Uncaught TypeError: Object(…) is not a function after updating webpack resolve.modules

Question

To get absolute imports working with Typescript, I added baseUrl to my tsconfig and added modules to the resolve section of my webpack.config.js. It went from:

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

to

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

once I did that, however, webpack was no longer resolving imports from node_modules , so I updated it to:

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")
    ]
  },

after that, I started getting the following exception in the console on the page I was working on:

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

Answer 1

In my case, this was due to webpack resolving the wrong version of immer imported by redux toolkit. Under the root node_modules I see immer version 5 and embedded within node_modules/@reduxjs/toolkit I see another node_modules with immer version 7 inside it. I found out that webpack was resolving the wrong version due to me adding the modules key under resolve in my webpack config. The default value for modules , as stated in the docs , is ["node_modules"] . I had added the root path of my scripts to enable absolute imports and then included the root node_modules to enable regular external dependency imports, but I had prevented webpack from resolving imports using embedded node_modules directories by neglecting to include just "node_modules" in the resolve.modules . Ended up with this, which is working again:

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