Hello there, I recently created an npm module using Typescript and ES-modules.
Inside the /source folder, you can find my tsconfig.json file which includes a path alias.
{
"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"
]
}
In the root directory /, you will find my esmodule 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'],
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'
}
}
I am facing issues because of the path aliases (@/xxx/yyy) as shown below:
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
Even with the usage of TsconfigPathsPlugin, the problem persists when working with esmodules.
You can access the branch module-alias of this repository here
EDIT: After investigating further, the error seems to stem from using tsconfig-paths-webpack plugin with the specific extension .js. Refer to this log screenshot I created after adding some debug statements inside the plugin: