I am trying to import an object using path mapping.
When compiling using tsc it compiled successfully but when I try to compile using webpack I get the error message:
Module not found: Error: Can't resolve '@generated/generatedModel' in 'C:\Dev\Work\testTs\src'.
The problem occurred only when trying to import an object.
Importing interfaces is working as desired.
Project structure:
├── generated
│ ├── generatedInterface.ts
│ └── generatedModel.ts
├── package.json
├── src
│ ├── index.html
│ └── index.ts
├── tsconfig.json
└── webpack.config.js
The imported model that cause the build to fail - generatedModel.ts:
export const data = {
x: 3
}
index.ts:
import {Iinterface} from "@generated/generatedInterface"
import {data} from "@generated/generatedModel"
const foo2 = (x:Iinterface) => x.x + data.x;
tsconfig:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"baseUrl": ".",
"paths": {
"@generated/*": [
"./generated/*"
]
},
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
webpack config:
const path = require('path');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
Trying to compile using ts-loader - the compilation failed.
package.json:
{
"name": "testTs",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@babel/core": "^7.12.7",
"@babel/preset-env": "^7.12.7",
"@babel/preset-typescript": "^7.12.7",
"babel-loader": "^8.2.1",
"ts-loader": "^8.0.11",
"typescript": "^4.1.2",
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0"
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
]
}
}
Can you help please?
Thanks!!