Aliases in serverless-webpack are not supported

[slushnys]

This is a Bug Report

Description

Trying to resolve aliases through typescript and webpack with this configuration on the webpack side:

resolve: {
    alias: {
      '@/': path.resolve(__dirname, './src/'),
    },
  },

Whenever I use import syntax of import { test } from '@/folder/file' and try to build, it throws an error

Serverless: Invoke webpack:package
Serverless: Fetch dependency graph from ....examplePath/package.json
Serverless: WARNING: Could not determine version of module @/folder
Serverless: Package lock found - Using locked versions
Serverless: Packing external modules: @/folder, source-map-support@^0.5.19
 
  Error --------------------------------------------------
 
  yarn install --frozen-lockfile --non-interactive failed with code 1
  error An unexpected error occurred: "https://registry.yarnpkg.com/@%2fcommon: Not found".

I also have tsconfig set with these parameters:

"baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }

Additional Data

• Serverless-Webpack Version you're using: 5.3.2
• Webpack version you're using: 4.43.0
• Serverless Framework Version you're using: 1.72.0
• Operating System: macOS

[tafelnl]

I managed to get it to work fairly easily without problems. I am not using TypeScript however.

Anyway, my config:

  // webpack.config.js
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src/'),
    },
  },

  // .eslintrc.js
  // need to run following command first:
  // npm i eslint-import-resolver-webpack --save-dev
  settings: {
    'import/resolver': 'webpack',
  },

[slushnys]

Could you confirm that this works for you with '@' as well? I am using yarn and it does not work for me.

[tafelnl]

I have just tried it out, and I can confirm it works with both @ and ~.

I have no idea what your problem can be. But my advice would be that if it really matters enough you can try to debug it like the following:

• start a complete new repo
• make it as barebone as possible at first (so no typescript, no babel, no linter, etc.)
• start by adding serverless-webpack and try running a simple script (this should be fairly easy to do)
• now add:

  // webpack.config.js
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src/'),
    },
  },

• check if it still works

You can now add other things one by one (such as typescript support, a linter etc.)

This way you can exclude things that might cause this issue. As soon as the issue pops up after you added something, you now know where to look.

[fernando-mf]

I think you are missing the extensions in webpack.resolve. I'm using typescript and aliases work fine. Here's my config

// webpack.config.js
resolve: {
  extensions: ['.ts'],
  alias: {
    '@app': path.resolve(__dirname, './src'),
  },
},

// tsconfig.json
"baseUrl": "./src/",
"paths": {
    "@app/*": ["./*"]
},

[ButuzGOL]

I have resolved issue with this solution

In top of handler.ts

require('module-alias/register');
const moduleAlias = require('module-alias');

moduleAlias.addAliases({
  '@': `${__dirname}/src`,
  '@base': `${__dirname}/src/base`,
  '@db': `${__dirname}/db`,
});