Блог

Приложение, построенное на 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?

пакет.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

Добавление следующих параметров в webpack.config.js помощь в моем случае:

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