强制 Webpack 4 仅导入 cjs 而从不使用 typescript 导入 esm

Question

基于 webpack@4.43.0 构建的应用；打字稿 4.2.4；

尝试在应用程序上安装和使用 @reduxjs/toolkit 会产生构建错误：

ERROR in ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js
Module not found: Error: Can't resolve 'immer' in './node_modules/@reduxjs/toolkit/dist'

如何禁用从库的“模块”路径导入 esm 模块 package.json 并仅在 webpack 中使用“主”入口点？

package.json 个 @reduxjs/toolkit

  "main": "dist/index.js",
  "module": "dist/redux-toolkit.esm.js",
  "unpkg": "dist/redux-toolkit.umd.min.js",
  "types": "dist/index.d.ts",

我们的配置： tsconfig.json

    "target": "es6",
    "jsx": "react",
    "module": "commonjs",
    "lib": [
      "es6",
      "dom",
      "esnext",
      "esnext.asynciterable"
    ],
    "strict": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

webpack.config.js

const HappyPackConfig = new HappyPack({
  id: 'ts',
  threads: 2,
  loaders: [
    {
      path: 'ts-loader',
      query: { happyPackMode: true },
      options: {
        transpileOnly: true,
      },
    },
  ],
});

module.exports = {
  node: {
    net: 'mock',
  },
  entry: ['whatwg-fetch', './src/index.tsx'],
  output: {
    path: path.resolve('dist'),
    filename: '[name].bundle.[contenthash].js',
    publicPath: '/',
    globalObject: 'this',
  },
  devtool: process.env.NODE_ENV === 'development' ? 'inline-source-map' : false,
  devServer: {
    https: true,
    historyApiFallback: true,
    watchOptions: {
      ignored: /node_modules/,
    },
  },
  optimization: { ... },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /\/node_modules/,
        use: { loader: 'happypack/loader?id=ts' },
      },
    ],
  },
};

package.json不包含"type": "module" 而且我们没有使用 babel

Answer 1

将以下参数添加到 webpack.config.js 对我的情况有帮助：

module.exports = {
/* ... */
resolve: {
    /* ... */
    mainFields: ['browser', 'main'],
  },
};

强制 Webpack 4 仅导入 cjs 而从不使用 typescript 导入 esm

Force Webpack 4 to import cjs only and never esm with typescript

typescript

tsconfig

webpack

package.json

redux-toolkit