Syntax error on IE11 when v3.4.1 is bundled by webpack

I have just updated from version 3.3 to 3.4 and noticed that index.cjs.js is missing. index.cjs.js worked on IE11, but syntax error occurs version 3.4 index.js

Our project has to continue to support IE11… After version 3.4, is the only way to support it to transpile index.js by itself?

[tt4g]

What we have in 3.4.1 is: zustand/index.js is cjs for old browsers and zustand/esm/index.js is esm for modern browsers.

v3.3 used the following webpack aliases.

resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    modules: ["node_modules"],
    alias: {
        zustand: path.resolve(__dirname, "node_modules/zustand/index.cjs.js"),
    },
},

I guess mainFields or direct path is a way to go for IE11 with webpack.

As of now, the following two settings worked with IE11.

Use webpack resolve alias:

resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    modules: ["node_modules"],
    alias: {
        zustand: path.resolve(__dirname, "node_modules/zustand/index.js"),
    },
},

Use babel (transpile):

module: {
      rules: [
        {
          test: /\.jsx?$/,
          include: [
            path.resolve(__dirname, "src"), // project source root.
            path.resolve("node_modules/zustand/"), // transpile for IE11 support.
          ],
          use: [{
            loader: "babel-loader"
          }],
        },
}

IMO: webpack resolve alias may be the best workaround. This way, even if webpack prioritizes ES modules, the same files will always be bundled. Transpiling with babel changes the post-transpiling state depending on the module resolved by webpack.

[tt4g]

I think this is a minor issue as IE11 will be out of support for many products by August 2021.

I’m going to close it because there are workarounds.