如果我在tsconfig中使用自定义路径，Webpack开发人员服务器找不到带Typescript的模块

wecizke3 于 2022-11-13 发布在 Webpack

关注(0)|答案(3)|浏览(350)

我正在React + TypeScript上从头开始构建一个项目，并使用Webpack Dev服务器。我希望使用组件的相对路径，这对于更灵活的开发来说并不严格。
在我的App.tsx中，我尝试导入组件：

import EntityTypes from "components/EntityTypes/EntityTypes";

并收到错误

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

此路径下的文件存在（/src/components/EntityTypes/EntityTypes.js），并导出类，如

export default EntityTypes;

我的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'
        })
    ]
};

我已经检查了文档中关于“路径”的打字稿，该文件是存在的，我不明白是什么问题。

webpack

来源：https://stackoverflow.com/questions/58443646/webpack-dev-server-cannot-find-modules-with-typescript-if-i-use-custom-paths-in

3条答案

按热度按时间

pgky5nke1#

我已经整理出如何使用路径为我的文件，并使他们灵活，我可以重新组织项目和管理路径容易没有很多变化的严格相对路径。
此问题与Webpack的配置有关。下面是最终配置：

文件系统配置.json

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

网页包.配置.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'),
    }
  },
}

用法示例

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

赞(0）回复(0）举报 2022-11-13

vwhgwdsa2#

只需将tsconfig-paths-webpack-plugin添加到您的webpack配置中：

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

};

而且您不需要将路径配置复制为webpack别名。

赞(0）回复(0）举报 2022-11-13

368yc8dk3#

您使用的是绝对导入，而不是相对导入。请尝试import EntityTypes from "./components/EntityTypes/EntityTypes";，假设您要导入的文件与components目录位于同一级别。

赞(0）回复(0）举报 2022-11-13