reactjs - Webpack Dev Server kan ikke finne moduler med Typescript hvis jeg bruker tilpassede stier i tsconfig

Jeg bygger et prosjekt fra bunnen av med React + TypeScript og bruker Webpack Dev-serveren. Jeg vil bruke relative stier til komponenter, som ikke vil være strenge for en mer fleksibel utvikling.

I min App.tsx prøver jeg å importere en komponent:

import EntityTypes from "components/EntityTypes/EntityTypes";

og får en feil

Module not found: Error: Can't resolve 'components/EntityTypes/EntityTypes' in '/home/eugene/prj/work/crud-react/src'

Fil på denne banen eksisterer (/src/components/EntityTypes/EntityTypes.js) og eksporterer klassen som

export default EntityTypes;

Min tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "es5",
    "lib": [
      "es2015",
      "es2017",
      "dom"
    ],
    "removeComments": true,
    "allowSyntheticDefaultImports": false,
    "jsx": "react",
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "components/*": [
        "src/components/*"
      ]
    }
  }
}

webpack.config.js:

const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const path = require( 'path' );
module.exports = {
    context: __dirname,
    entry: './src/index.js',
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'main.js',
        publicPath: '/',
    },
    devServer: {
        historyApiFallback: true
    },
    module: {
        rules: [
            {
                test: /\.(tsx|ts)?$/,
                loader: 'awesome-typescript-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|j?g|svg|gif)?$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve( __dirname, 'public/index.html' ),
            filename: 'index.html'
        })
    ]
};

Jeg har sjekket dokumentasjonen til TypeScript om «paths», filen eksisterer, jeg forstår ikke hva problemet er.

Svar #1

Jeg har funnet ut hvordan jeg kan bruke stier for filene mine og gjøre dem fleksible, slik at jeg kan omorganisere prosjektet og håndtere stier enkelt uten mange endringer av strenge relative stier.

Problemet var relatert til konfigurasjonen av webpack. Den endelige konfigurasjonen er som følger:

tsconfig.json

{
  "compilerOptions": {
    // ...
    "paths": {
      "~/components/*": [
        "./src/components/*"
      ],
      "~/services/*": [
        "./src/services/*"
      ],
      "~/interfaces/*": [
        "./src/interfaces/*"
      ]
    },
  }
}

webpack.config.js

const path = require('path');
module.exports = {
  // ...
  resolve: {
    // ...
    alias: {
      '~/components': path.resolve(process.cwd(), './src/components'),
      '~/interfaces': path.resolve(process.cwd(), './src/interfaces'),
      '~/services': path.resolve(process.cwd(), './src/services'),
    }
  },
}

Eksempler på bruk

import {IEntities} from "~/interfaces/entities.interface";
// ...
import EntityForm from "~/components/EntityForm/EntityForm";

Svar #2

Bare legg til tsconfig-paths-webpack-plugin i webpack-konfigurasjonen din:

const { cwd } = require('node:process');
const { resolve } = require('node:path');

const TsconfigPathsWebpackPlugin = require('tsconfig-paths-webpack-plugin');


module.exports = {
    resolve: {
        plugins: [
            new TsconfigPathsWebpackPlugin({
                configFile: resolve(cwd(), './tsconfig.json'),
            })
        ]
    }

};

Og du trenger ikke å duplisere sti-konfigurasjon som webpack-aliaser.