首页 > 解决方案 > 找不到模块“@src/pages/MainPages”或其相应的类型声明

问题描述

我有一个 React & Typescript & Webpack 样板。我不能在我的样板文件中使用别名。有人可以帮助我吗?我在这里的任何地方都找不到答案是我的代码。我总是收到这个错误

找不到模块“@src/pages/MainPages”或其相应的类型声明。

我的网络包

module.exports = {
    mode: process.env.NODE_ENV || 'development',
    entry: "./src/index.tsx",
    devtool: 'inline-source-map',
    devServer: {
        port: process.env.PORT || 3000,
        open: true,
        historyApiFallback: true,
        proxy: {
            '/api': 'http://localhost:3050'
        }
    },
    output: {
        path: path.resolve(__dirname, "./build"),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx", ".css", ".scss"],
        alias: {
            "@src": path.join(__dirname, "./src/*")
        }
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                options: {
                    configFile: 'tsconfig.client.json'
                },
                loader: "ts-loader"
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                    {
                    loader: "file-loader"
                    }
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            }
        ]
    },
    plugins: [
        new HtmlPlugin({
            filename: "index.html",
            template: "./public/index.html"
        }),
        new MiniCssExtractPlugin(),
        new Dotenv()
    ]
}

这是我的 tsconfig.json

{
    "compilerOptions": {
      "outDir": "./build/",
      "noImplicitAny": true,
      "module": "es6",
      "moduleResolution": "node",
      "target": "es5",
      "jsx": "react",
      "allowSyntheticDefaultImports": true,
      "lib":[
          "es2015", "dom", "ES5", "ES6","DOM.Iterable","ES2015.Iterable"
      ],
      "baseUrl": ".",
      "paths": {
          "@src": ["./src/*"]
      }
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

顺便说一句,当我运行项目时,它偶尔会起作用,但大多只是得到这个错误

标签: reactjstypescriptwebpackbabeljsalias

解决方案


推荐阅读