I'm having a strange behavior of my ts-loader: When importing *.json file from node_modules the declaration files are generated in a subfolder of dist/
but I expect them to be directly in the dist/
folder.
I have following project structure:
Project/
├── src/
│ ├── components/
│ │ └── PhoneNumberInput/
│ │ ├── index.ts
│ │ └── utils.ts
│ └── index.ts
├── package.json
├── tsconfig.json
└── webpack.config.js
When running webpack
(using the ts-loader
) I expect following output folder structure:
Project/
├── dist/
│ ├── components/
│ │ └── PhoneNumberInput/
│ │ ├── index.d.ts
│ │ └── utils.d.ts
│ ├── index.d.ts
│ └── index.js
└── ...
This was the case until I start importing a .json (from node_modules/
) file within my utils.ts
:
import * as de from "react-phone-number-input/locale/de.json";
The declaration files are now generated under dist/src/
:
Project/
├── dist/
│ ├── src/
│ │ ├── components/
│ │ │ └── PhoneNumberInput/
│ │ │ ├── index.d.ts
│ │ │ └── utils.d.ts
│ │ └── index.d.ts
│ └── index.js
└── ...
Any relative imports to assets are now broken.
If I use the awesome-typescript-loader
or import a .json from the project
import * as de from "./countries.json";
I don't get the src/
subfolder.
Does anyone have an idea where the behavior comes from? What I'm doing wrong? Or is it maybe a bug in the ts-loader
?
The example project can be found at https://github.com/psalchow/ts-path-test
Here are the relevant config files:
package.json
{
"name": "ts-path-test",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "webpack --progress --mode=production"
},
"dependencies": {
"react-phone-number-input": "^3.1.19"
},
"devDependencies": {
"@types/react-phone-number-input": "^3.0.6",
"@types/webpack": "^5.28.0",
"awesome-typescript-loader": "^5.2.1",
"ts-loader": "^8.1.0",
"typescript": "^4.2.4",
"webpack": "^4.46.0",
"webpack-cli": "^4.6.0"
}
}
tsconfig.json
{
"compilerOptions": {
"allowJs": false,
"baseUrl": "src",
"declaration": true,
"esModuleInterop": true,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"outDir": "dist",
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"suppressImplicitAnyIndexErrors": true,
"target": "es2019"
},
"files": ["src/index.ts"]
}
webpack.config.js
module.exports = () => {
return {
entry: {
index: './src/index.ts',
},
output: {
filename: '[name].js',
libraryTarget: 'umd',
library: 'DummyComponent',
umdNamedDefine: true,
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.tsx?$/,
// loader: 'awesome-typescript-loader',
loader: 'ts-loader',
},
],
},
};
};
I know this question hasn't been touched for a long time. With the current version (9.4.3) of
ts-loader
this problem does not occur anymore and everything is generated as expected directly under thedist
folder (without anysrc
subfolder). The test repo has been updated accordingly: https://github.com/psalchow/ts-path-test