I've encountered a peculiar issue with my ts-loader. When I import a *.json file from node_modules, the declaration files are being generated in a subfolder within dist/ instead of directly in the dist/ folder as expected.
Here is the structure of my project:
Project/
├── src/
│ ├── components/
│ │ └── PhoneNumberInput/
│ │ ├── index.ts
│ │ └── utils.ts
│ └── index.ts
├── package.json
├── tsconfig.json
└── webpack.config.js
When I run webpack (using the ts-loader), I anticipate the following output folder structure:
Project/
├── dist/
│ ├── components/
│ │ └── PhoneNumberInput/
│ │ ├── index.d.ts
│ │ └── utils.d.ts
│ ├── index.d.ts
│ └── index.js
└── ...
However, this setup changes when I start importing a .json file (from node_modules/) within my utils.ts:
import * as de from "react-phone-number-input/locale/de.json";
The declaration files are now created under dist/src/:
Project/
├── dist/
│ ├── src/
│ │ ├── components/
│ │ │ └── PhoneNumberInput/
│ │ │ ├── index.d.ts
│ │ │ └── utils.d.ts
│ │ └── index.d.ts
│ └── index.js
└── ...
As a result, any relative imports to assets are now broken.
If I switch to using the awesome-typescript-loader or import a .json file from the project itself like this:
import * as de from "./countries.json";
The src/ subfolder does not appear.
Any insights on what might be causing this behavior? Am I overlooking something? Or could it potentially be a bug in the ts-loader?
The example project can be accessed at https://github.com/psalchow/ts-path-test
For reference, here are the relevant configuration 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',
},
],
},
};
};