Использование tsconfig-paths-webpack-plugin приводит к ошибке «Module not found» для «fs» и других стандартных модулей

Question

Я потратил полдня на поиски решения и пробовал все, с чем сталкивался. Я хочу использовать импорт относительно моей папки sr c, используя псевдоним @ sr c. Например. import { GmailMgr } from '@src/google-api/GmailMgr';

Наиболее популярный способ достижения этого, кажется, использует https://www.npmjs.com/package/tsconfig-paths-webpack-plugin Редактирование tsconfig.json, как это делает код счастливым:

{
  "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, как описано в readme:

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, но используют этот стиль импорта @ sr c, скомпилированы так, что он работает, но я использую пакеты 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, et c. внутри папки модуля вместо того, чтобы искать его, запустив в node_modules root. Если я удаляю tsconfig-paths-webpack-plugin и paths, все в порядке, но я должен придерживаться импорта как import { GmailMgr } from '../../../google-api/GmailMgr';

PS Я пробовал webpack-node-externals, и это работает для ошибок, но это для веб-сайта, поэтому я получаю ошибки в браузере, которые требуют не существует.

Answer 1

До меня дошло, что веб-пакет имеет проблемы только с модулями, которые требуют работы узла (например, fs), а браузер не сможет это сделать. Я полагаю, что модули API Google предназначены исключительно для бэкэнда (хотя вы можете использовать их идеально, если вы включите их в html). Я думаю, мне придется разделить мое приложение на передний и задний.

Обновление: Я был прав в этом и разделил его. Тем не менее, я все еще использовал webpack для обоих, только с разными конфигами. Затем в бэкэнд-пакете я использовал target: 'node', который предотвращает упаковку всего, что должно быть из node_modules.