Uncaught ReferenceError: exports is not defined after Webpack Code Split

Question

I am trying to optimize my webpack bundle size by splitting it into two bundles: webpack-bundle.js, which contains my code, and vendor-bundle.js, which contains node modules and third party libraries. But after I successfully created two bundles, I am getting two errors in the browser regarding both bundles:

Uncaught ReferenceError: exports is not defined at vendor-bundle.self-879f615019647c756dc959f99d735b3a2534b00805364ae6fca0091d1190d62d.js?body=1:1

Uncaught TypeError: Cannot read property 'call' of undefined at I (webpack-bundle.self-78221fc03008c178fe970b69731594f14d651dab84e5cf928beacc805ebde79c.js?body=1:1)

This is my webpack.config.js.

const config = {
  "entry": {
    "webpack-bundle": "./app/registration",
  },

  "output": {
    filename: "[name].js",
    path: pathLib.resolve(__dirname, "../app/assets/webpack"),
  },

  "module": {
    "rules": [
      {
        "exclude": /node_modules/,
        "test": /\.jsx?$/,
        "use": {
          "loader": "babel-loader",
          "options": {
            "plugins": [
              "@babel/plugin-proposal-class-properties",
              ["@babel/plugin-proposal-decorators", {"legacy": true}],
              "@babel/plugin-proposal-export-namespace-from",
              "@babel/plugin-proposal-function-sent",
              "@babel/plugin-proposal-json-strings",
              "@babel/plugin-proposal-numeric-separator",
              "@babel/plugin-proposal-object-rest-spread",
              "@babel/plugin-proposal-throw-expressions",
              "@babel/plugin-syntax-dynamic-import",
              "@babel/plugin-syntax-import-meta",
              "@babel/plugin-transform-react-jsx"
            ],
            "presets": [
              "@babel/preset-env",
              "@babel/preset-react"
            ]
          }
        }
      }
    ],
  },

  "plugins": [
    new webpack.ProvidePlugin({
      "$": "jquery",
      "jQuery": "jquery",
      "window.jQuery": "jquery"
    }),
    new UglifyJsPlugin(),
  ],

  "optimization": {
    "splitChunks": {
      "cacheGroups": {
        "vendor": {
          "test": /node_modules/,
          "chunks": "all",
          "name": "vendor-bundle"
        }
      }
    }
  },

  "resolve": {
    "alias": {
      "Lib": pathLib.resolve(__dirname, "app/lib/"),
      "Shared": pathLib.resolve(__dirname, "app/shared/")
    },
    "extensions": [".js", ".jsx"]
  },
  "target": "node"
};

module.exports = config;

This is my .babelrc:

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-json-strings",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-transform-react-jsx"
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

We use React, Rails, React on Rails, and Slim. To load webpack, I'd add this to my application.slim:

  = javascript_include_tag 'vendor-bundle'
  = javascript_include_tag 'webpack-bundle'

I want to be able to serve the two bundles I created. Is there anything wrong in the way I configured my webpack and split the bundle? Or should I install something else?

Answer 1

At the bottom of your webpack config, you have your target mode set to node

In node, module and module.exports both exist, but these don’t exist in the browser - this is what’s causing the error

If you remove this line, webpack will assume you’re targeting browsers instead, and will also transform this line for you - your bundles should then run in the browser as expected.