jsontypescriptwebpackts-loader

ts-loader outputs declaration files in subdirectory when importing .json files


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',
        },
      ],
    },
  };
};

Solution

  • 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 the dist folder (without any src subfolder). The test repo has been updated accordingly: https://github.com/psalchow/ts-path-test