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

App built on [email protected]; TypeScript 4.2.4;

Trying install and use @reduxjs/toolkit on app will produce build errors:

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'

How to disable importing esm modules from "module" path of libraries package.json and use only "main" entry point in webpack?

package.json of @reduxjs/toolkit

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

our configs: 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 does not contain "type": "module" and we are not using babel

CodePudding user response：

Adding following parameters to webpack.config.js helps in my case:

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