Webpack migration from v4 to v5, expose-loader throwing error

Question

Trying to update webpack from version 4.44.2 to the latest version 5.58.2 and I suppose there are breaking changes. The expose-loader is setup and it is throwing an error.

Here is a snippet of the package.json file

    "expose-loader": "^3.0.0",
    "file-loader": "^6.2.0",
    "node-sass": "^4.14.1",
    "oidc-client": "^1.11.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.1",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^4.0.3",
    "typescript": "^3.9.10",
    "url-loader": "^4.1.1",
    "webpack": "^5.58.2",
    "webpack-cli": "^4.9.1",

Here is the setup for webpack.config.js file

module.exports = env => ({
  watch: !env.production,
  mode: env.production ? "production" : "development",
  entry: {
    style: "./styles/style.scss",
    client: [
      "./ts/client-polyfills.ts",
      "expose-loader?React!react",
      "expose-loader?ReactDOM!react-dom",
      "expose-loader?Components!./components"
    ],
    server: [
      "./ts/server-polyfills.ts",
      "expose-loader?React!react",
      "expose-loader?ReactDOM!react-dom",
      "expose-loader?ReactDOMServer!react-dom/server",
      "expose-loader?Components!./components"
    ]
  },

And here is another way of setting up expose-loader that I have tried...

module: {
    rules: [
      {
        test: require.resolve('react'),
        use: {
          loader: 'expose-loader',
          options: 'React'
        }
      },
      {
        test: require.resolve('react-dom'),
        use: {
          loader: 'expose-loader',
          options: 'ReactDOM'
        }
      },
      {
        test: require('.\/components'),
        use: {
          loader: 'expose-loader',
          options: 'Components'
        }
      },
      {
        enforce: "pre",
        test: /\.scss$/,
        exclude: /node_modules/,
        use: "import-glob"
      },
      {
        test: /\.s[ac]ss$/i,
        exclude: /node_modules/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [{ loader: "ts-loader" }]
      },
      {
        test: /\.(svg|png|jpg|woff2?|ttf|eot)$/,
        enforce: "pre",
        use: {
          loader: "file-loader",
          options: {
            expose:{
            globalName : "[name].[hash].[ext]",
            moduleLocalName:"ext",
            override:true
            }
          }
        }
      }
    ]
  },

The error I am getting is

ERROR in ./node_modules/react-dom/server.browser.js (./node_modules/expose-loader/dist/cjs.js?exposes=ReactDOMServer!./node_modules/react-dom/server.browser.js)
Module build failed (from ./node_modules/expose-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (C:\**\ClientApp\node_modules\expose-loader\dist\index.js:19:24)
@ ./components (multi ./ts/server-polyfills.ts expose-loader?exposes=React!react expose-loader?exposes=ReactDOM!react-dom expose-loader?exposes=ReactDOMServer!react-dom/server (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-1 (webpack)-inject-plugin/dist/webpack-inject-plugin.loader?id=webpack-inject-module-2 expose-loader?exposes=Components!./components) server[3]

score 2 · Answer 1 · answered Oct 26 '21 at 19:46

Here is how we could finally get this to work: (by using exposes= keyword)

client: [
    "./ts/client-polyfills.ts",
    "expose-loader?exposes=React!react",
    "expose-loader?exposes=ReactDOM!react-dom",
    "expose-loader?exposes=Components!./components"
 ],
server: [
   "./ts/server-polyfills.ts",
   "expose-loader?exposes=React!react",
   "expose-loader?exposes=ReactDOM!react-dom",
   "expose-loader?exposes=ReactDOMServer!react-dom/server",
   "expose-loader?exposes=Components!./components"

Webpack migration from v4 to v5, expose-loader throwing error

1 Answers1