tsconfig-paths-webpack-plugin

tsconfig-paths-webpack-plugin copied to clipboard

With ESM, it is not working.

This is my webpack.config.mjs

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'],
        extensionAlias: {
            '.js': ['.ts', '.js'],
            '.mjs': ['.mts', '.mjs']
        },
        plugins: [new TsconfigPathsPlugin({
            configFile: './source/tsconfig.json',
            extensions: ['.ts', '.js'],
            logLevel: 'info'
        }), 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'
    }
}

And this is my tsconfig.json

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

And this is the log that I created by injecting some console.log statements

tsconfig-paths-webpack-plugin: Using config file at /home/euber/Github/lifeware-java-mangler/source/tsconfig.json
[Function (anonymous)]
---------------------
@/modules/index.js
[Function (anonymous)]
[Function (anonymous)]
[ '.ts', '.js' ]
[
  {
    type: 'file',
    path: '/home/euber/Github/lifeware-java-mangler/source/modules/index.js'
  },
  {
    type: 'extension',
    path: '/home/euber/Github/lifeware-java-mangler/source/modules/index.js.ts'
  },
  {
    type: 'extension',
    path: '/home/euber/Github/lifeware-java-mangler/source/modules/index.js.js'
  },
  {
    type: 'package',
    path: '/home/euber/Github/lifeware-java-mangler/source/modules/index.js/package.json'
  },
  {
    type: 'index',
    path: '/home/euber/Github/lifeware-java-mangler/source/modules/index.js/index.ts'
  },
  {
    type: 'index',
    path: '/home/euber/Github/lifeware-java-mangler/source/modules/index.js/index.js'
  },
  {
    type: 'file',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/modules/index.js'
  },
  {
    type: 'extension',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/modules/index.js.ts'
  },
  {
    type: 'extension',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/modules/index.js.js'
  },
  {
    type: 'package',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/modules/index.js/package.json'
  },
  {
    type: 'index',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/modules/index.js/index.ts'
  },
  {
    type: 'index',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/modules/index.js/index.js'
  }
]
---------------------
@/errors/index.js
[Function (anonymous)]
[Function (anonymous)]
[ '.ts', '.js' ]
[
  {
    type: 'file',
    path: '/home/euber/Github/lifeware-java-mangler/source/errors/index.js'
  },
  {
    type: 'extension',
    path: '/home/euber/Github/lifeware-java-mangler/source/errors/index.js.ts'
  },
  {
    type: 'extension',
    path: '/home/euber/Github/lifeware-java-mangler/source/errors/index.js.js'
  },
  {
    type: 'package',
    path: '/home/euber/Github/lifeware-java-mangler/source/errors/index.js/package.json'
  },
  {
    type: 'index',
    path: '/home/euber/Github/lifeware-java-mangler/source/errors/index.js/index.ts'
  },
  {
    type: 'index',
    path: '/home/euber/Github/lifeware-java-mangler/source/errors/index.js/index.js'
  },
  {
    type: 'file',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/errors/index.js'
  },
  {
    type: 'extension',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/errors/index.js.ts'
  },
  {
    type: 'extension',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/errors/index.js.js'
  },
  {
    type: 'package',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/errors/index.js/package.json'
  },
  {
    type: 'index',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/errors/index.js/index.ts'
  },
  {
    type: 'index',
    path: '/home/euber/Github/lifeware-java-mangler/source/@/errors/index.js/index.js'
  }
]

I appears that the problem stands with the Typescript syntax that enforces the usage of .js even with the other .ts files

@euberdeveloper I opened your profile and found that you migrated to esbuild from webpack. Thanks, now it works 😹

Yeah 😂