Webpack: bundle typescript module alias with esmodules

Question

I have developed an npm module with Typescript and ES-Modules.

This is the tsconfig.json, in which you can see that there is a path alias. It resides inside the /source folder.

{
    "compilerOptions": {
        "moduleResolution": "Node16",
        "module": "Node16",
        "target": "ES2015",
        "lib": [
            "ES2022"
        ],
        "resolveJsonModule": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./source/*"
            ],
            "@": [
                "./source"
            ],
            "@src/*": [
                "./source/*"
            ],
            "@src": [
                "./source"
            ],
            "@test/*": [
                "./test/*"
            ],
            "@test": [
                "./test"
            ]
        },
        "outDir": "./dist"
    },
    "include": [
        "source",
        "test"
    ]
}

This is the webpack.config.mjs, indeed an esmodule. It resides in the root /

import { fileURLToPath } from 'node:url';
import path from 'node:path';

import nodeExternals from 'webpack-node-externals';
import BundleDeclarationsWebpackPlugin from 'bundle-declarations-webpack-plugin';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
import ResolveTypescriptPlugin from 'resolve-typescript-plugin';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    // experiments: {
    //     outputModule: true
    // },
    entry: {
        index: './source/index.ts',
    },
    resolve: {
        fullySpecified: true,
        extensions: ['.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({
            configFile: './source/tsconfig.json',
            extensions: ['.ts', '.js']
        }), new ResolveTypescriptPlugin()]
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new BundleDeclarationsWebpackPlugin({
            entry: "./source/index.ts",
            outFile: "./index.d.ts"
        })
    ],
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, './bundled'),
        filename: 'index.js',
        chunkFormat: 'module'
    }
}

The problem is that it does not work because I have path aliases (@/xxx/yyy):

assets by status 9.18 KiB [cached] 22 assets
./source/index.ts 433 bytes [built] [code generated]

ERROR in ./source/index.ts 1:0-363
Module not found: Error: Can't resolve '@/modules/index.js' in '/home/euber/Github/lifeware-java-mangler/source'

ERROR in ./source/index.ts 2:0-34
Module not found: Error: Can't resolve '@/errors/index.js' in '/home/euber/Github/lifeware-java-mangler/source'

ERROR in ./source/index.ts 3:0-33
Module not found: Error: Can't resolve '@/types/index.js' in '/home/euber/Github/lifeware-java-mangler/source'

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.73.0 compiled with 3 errors in 8500 ms

It does not work even if I am using TsconfigPathsPlugin, which works well when I do not use esmodules.

The source of the project is the branch module-alias of this repo here

EDIT: I think that the error regards the usage of tsconfig-paths-webpack with the specified extension .js, because this is a log that I created by adding some console.logs inside it:

Answer 1

This seems to be the problem with the webpack, which has been resolved in the latest build 5.74.0 (see more details here https://github.com/webpack/webpack/issues/13252). To fix, please upgrade the webpack to the latest version 5.74.0 and add the below to the webpack config

  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs']
    }
  },