时间戳

首页 > 解决方案 > 使用 tsconfig-paths-webpack-plugin 为“fs”和其他标准模块提供“Module not found”错误

node.js - 使用 tsconfig-paths-webpack-plugin 为“fs”和其他标准模块提供“Module not found”错误

问题描述

我花了半天时间寻找解决方案并尝试了我遇到的所有问题。我想要的是通过使用@src 别名来使用相对于我的 src 文件夹的导入。例如。 import { GmailMgr } from '@src/google-api/GmailMgr';

实现这一点的最流行方法似乎是使用https://www.npmjs.com/package/tsconfig-paths-webpack-plugin像这样 编辑tsconfig.json使 vs 代码快乐：

{
  "compilerOptions": {
    "outDir": "./dist/",        // path to output directory
    "sourceMap": true,          // allow sourcemap support
    "strictNullChecks": true,   // enable strict null checks as a best practice
    "module": "CommonJS",       // specify module code generation
    "jsx": "react",             // use typescript to transpile jsx to js
    "target": "es5",            // specify ECMAScript target version
    "allowJs": true,            // allow a partial TypeScript and JavaScript codebase
    "baseUrl": "./src",
    "paths": {
      "@src/*":["*"]
    }
  },
  "include": [
      "./src/"
  ]
}

为了通知 webpack tsconfig.js 中的路径，我TsconfigPathsPlugin按照自述文件中的描述将其添加到 webpack.config.js 中：

const path = require("path");
const webpack = require("webpack");

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

module.exports = {
  entry: "./App.tsx",
  context: path.resolve(__dirname, "src"),
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "source-map-loader"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: {
    // changed from extensions: [".js", ".jsx"]
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
    plugins: [new TsconfigPathsPlugin()]
  },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 45011,
    publicPath: "http://localhost:45011/dist/",
    hotOnly: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devtool: "source-map"
};

当我运行时webpack --mode production，我可以看到不使用 node_modules 但使用此 @src 导入样式的文件已编译，因此它可以工作，但我在一个文件中使用了 google api 包（GmailMgr.ts在错误中）并且那些依赖于 fs 之类的东西, child_process, net 和 tls ，对于它们中的每一个，我都会收到如下错误：

ERROR in ../node_modules/https-proxy-agent/dist/agent.js
Module not found: Error: Can't resolve 'tls' in 'D:\MartijnFiles\Documents\Programming\0502-crew\youtube4me\node_modules\https-proxy-agent\dist'
 @ ../node_modules/https-proxy-agent/dist/agent.js 16:30-44
 @ ../node_modules/https-proxy-agent/dist/index.js
 @ ../node_modules/gaxios/build/src/gaxios.js
 @ ../node_modules/gaxios/build/src/index.js
 @ ../node_modules/google-auth-library/build/src/transporters.js
 @ ../node_modules/google-auth-library/build/src/index.js
 @ ./google-api/GmailMgr.ts
 @ ./components/YTNotifications.tsx
 @ ./App.tsx

看起来它正在尝试在模块的文件夹中查找 fs 等，而不是通过从 node_modules 根目录开始来查找它。如果我删除 tsconfig-paths-webpack-plugin 和路径，一切都很好，但我必须坚持进口import { GmailMgr } from '../../../google-api/GmailMgr';

PS我已经尝试过webpack-node-externals，它适用于错误，但这是一个网站，所以我在浏览器中得到不存在所需的错误。

标签： node.jstypescriptwebpack

解决方案

我遇到了同样的问题，但我认为它与某些 api 无关。

我认为将 tsconfig-paths-webpack-plugin 与 webpack5 一起使用是一个错误。（我想你正在使用 webpack5）

我在这里提交了一个问题：https ://github.com/dividab/tsconfig-paths-webpack-plugin/issues/60

推荐阅读