Webpack is not working with Typescript aliases-CodePudding

I have this webpack.config.js:

{
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    entry: {
        index: './source/lib/index.ts',
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            compiler: 'ttypescript'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new BundleDeclarationsWebpackPlugin({
            entry: "./source/lib/index.ts",
            outFile: "./index.d.ts"
        })
    ],
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, 'bundled', 'lib'),
        filename: 'index.js',
        library: 'mongo-cleaner',
        libraryTarget: 'umd',
        globalObject: 'this',
        umdNamedDefine: true,
    }
}

In that you can see that I am bundling a library with webpack, keeping the node_modules as externals.

And this tsconfig.json:

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "ES5",
        "strictNullChecks": true,
        "lib": [
            "ES2021"
        ],
        "outDir": "../dist",
        "sourceMap": true,
        "declaration": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./lib/*"
            ],
            "@lib/*": [
                "./lib/*"
            ],
            "@bin/*": [
                "./bin/*"
            ]
        }
    },
    "plugins": [
        {
            "transform": "typescript-transform-paths"
        },
        {
            "transform": "typescript-transform-paths",
            "afterDeclarations": true
        }
    ],
    "include": [
        "lib",
        "bin"
    ]
}

When I do tsc -p source everything works, even if I have "@" paths in my requires

But when I do the same with webpack, I obtain these errors:

ERROR in ./source/lib/index.ts 50:16-42
Module not found: Error: Can't resolve '@/utils/cleaner' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 51:19-48
Module not found: Error: Can't resolve '@/utils/askConfirm' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 52:16-42
Module not found: Error: Can't resolve '@/utils/options' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 53:13-45
Module not found: Error: Can't resolve '@/interfaces/exported' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 54:13-32
Module not found: Error: Can't resolve '@/errors' in '/home/euber/Github/mongo-cleaner/source/lib'

How is it possible that webpack is ignoring the @?

To have more information and be able to reproduce it, just look at this repo

UPDATE:

I have tried also this answer, but it does not work:

webpack.config.js

alias: {
            '@': path.resolve(__dirname, 'lib'),
            '@lib': path.resolve(__dirname, 'lib'),
            '@bin': path.resolve(__dirname, 'bin')
        }

Errors:

ERROR in ./source/lib/index.ts 50:16-42
Module not found: Error: Can't resolve '@/utils/cleaner' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 51:19-48
Module not found: Error: Can't resolve '@/utils/askConfirm' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 52:16-42
Module not found: Error: Can't resolve '@/utils/options' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 53:13-45
Module not found: Error: Can't resolve '@/interfaces/exported' in '/home/euber/Github/mongo-cleaner/source/lib'

ERROR in ./source/lib/index.ts 54:13-32
Module not found: Error: Can't resolve '@/errors' in '/home/euber/Github/mongo-cleaner/source/lib'

CodePudding user response：

You have specified path aliases for typescript compiler but you also need to specify aliases for webpack cause webpack resolves modules in it's own way.

So you need to update webpack config is some way like in the following example:

{
...
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      '@': path.resolve(__dirname, 'lib'),
      '@lib': path.resolve(__dirname, 'lib'),
      '@bin': path.resolve(__dirname, 'bin')
    }
  }
...
}

CodePudding user response：

I don't know why, but @Mikhail Sereniti 's answer did not work. Something similar did, by the way.

I added this:

plugins: [new TsconfigPathsPlugin({
  configFile: './source/tsconfig.json',
  extensions: ['.ts', '.js']
})]

And it worked.

The full code:

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const BundleDeclarationsWebpackPlugin = require('bundle-declarations-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');


const libConfig = {
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    entry: {
        index: './source/lib/index.ts',
    },
    resolve: {
        extensions: ['.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({
            configFile: './source/tsconfig.json',
            extensions: ['.ts', '.js']
        })]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            compiler: 'ttypescript'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new BundleDeclarationsWebpackPlugin({
            entry: "./source/lib/index.ts",
            outFile: "./index.d.ts"
        })
    ],
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, 'bundled', 'lib'),
        filename: 'index.js',
        library: 'mongo-cleaner',
        libraryTarget: 'umd',
        globalObject: 'this',
        umdNamedDefine: true,
    }
};

const binConfig = {
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    entry: {
        index: './source/bin/index.ts',
    },
    resolve: {
        extensions: ['.ts', '.js'],
        plugins: [new TsconfigPathsPlugin({
            configFile: './source/tsconfig.json',
            extensions: ['.ts', '.js']
        })]
    },
    plugins: [
        new webpack.BannerPlugin({ banner: '#!/usr/bin/env node', raw: true })
    ],
    module: {
        rules: [
            {
                test: /\.ts?$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            compiler: 'ttypescript'
                        }
                    },
                    {
                        loader: 'shebang-loader'
                    }
                ]
            }
        ]
    },
    externals: [{
        '../lib/index': {
            amd: '../lib/index',
            root: 'mongo-cleaner',
            commonjs: '../lib/index',
            commonjs2: '../lib/index'
        },
    }, nodeExternals()],
    output: {
        path: path.resolve(__dirname, 'bundled', 'bin'),
        filename: 'index.js',
        library: 'mongo-cleaner',
        libraryTarget: 'umd',
        globalObject: 'this',
        umdNamedDefine: true,
    }
};

module.exports = [
    libConfig,
    binConfig
];

EDIT:

I found also another error. I used ttypescript for a similar purpose, but the "plugins" keyword should have been inside the compiler options.

So, even without the TsconfigPathsPlugin thing, by changing the tsconfig.json like this the problem was solved:

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "commonjs",
        "target": "ES5",
        "strictNullChecks": true,
        "lib": [
            "ES2021"
        ],
        "outDir": "../dist",
        "sourceMap": true,
        "declaration": true,
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./lib/*"
            ],
            "@lib/*": [
                "./lib/*"
            ],
            "@bin/*": [
                "./bin/*"
            ]
        },
        "plugins": [
            {
                "transform": "typescript-transform-paths"
            },
            {
                "transform": "typescript-transform-paths",
                "afterDeclarations": true
            }
        ],
    },
    "include": [
        "lib",
        "bin"
    ]
}