Uncaught TypeError: Object(...) is not a function after update webpack resolve.modules答案

【问题标题】：Uncaught TypeError: Object(...) is not a function after updating webpack resolve.modulesUncaught TypeError: Object(...) is not a function after update webpack resolve.modules
【发布时间】：2020-06-28 01:02:11
【问题描述】：

为了让 Typescript 使用绝对导入，我将 baseUrl 添加到我的 tsconfig 并将 modules 添加到我的 webpack.config.js 的 resolve 部分。它来自：

resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json", ".jsx"]
  },

到

resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json", ".jsx"],
    modules: [
      path.resolve(__dirname, "./src/main/resources/static/")
    ]
  },

然而，一旦我这样做了，webpack 就不再解析来自 node_modules 的导入，所以我将其更新为：

resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json", ".jsx"],
    modules: [
      path.resolve(__dirname, "./src/main/resources/static/"),
      path.resolve("./node_modules")
    ]
  },

在那之后，我开始在我正在处理的页面上的控制台中收到以下异常：

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js (index.ts:17)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js   @   index.ts:17
__webpack_require__ @   bootstrap:18
(anonymous) @   bootstrap:82
(anonymous) @   bootstrap:83

【问题讨论】：

标签： javascript typescript webpack

【解决方案1】：

在我的情况下，这是由于 webpack 解析了 redux 工具包导入的错误版本的 immer。在根node_modules 下，我看到immer 第5 版并嵌入在node_modules/@reduxjs/toolkit 中，我看到另一个node_modules，其中immer 第7 版。我发现 webpack 正在解析错误的版本，因为我在我的 webpack 配置中的 resolve 下添加了 modules 键。 modules、as stated in the docs 的默认值为 ["node_modules"]。我添加了脚本的根路径以启用绝对导入，然后包含 root node_modules 以启用常规外部依赖项导入，但我阻止了 webpack 使用嵌入的 node_modules 目录解析导入忽略在resolve.modules 中只包含"node_modules"。结束了这个，它又可以工作了：

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".ts", ".tsx", ".js", ".json", ".jsx"],
    modules: [
      path.resolve(__dirname, "./src/main/resources/static/"),
      "node_modules",
    ]
  },

【讨论】：