Next.js: Uncaught ReferenceError: require is not defined

[mtford90]

I'm getting a bunch of strange errors on the client-side that prevents the react app from initialising.

The first is this:

Uncaught ReferenceError: require is not defined
    at Object.816 (eval at evalScript (commons.js:6611), <anonymous>:2150:18)
    at __webpack_require__ (manifest.js:694)
    at fn (manifest.js:111)
    at Object.603 (eval at evalScript (commons.js:6611), <anonymous>:277:15)
    at __webpack_require__ (manifest.js:694)
    at fn (manifest.js:111)
    at Object.785 (eval at evalScript (commons.js:6611), <anonymous>:2126:15)
    at __webpack_require__ (manifest.js:694)
    at fn (manifest.js:111)
    at Object.645 (eval at evalScript (commons.js:6611), <anonymous>:915:16)

And then:

Invalid HMR message: {"action":"reload","data":["/products"]}
Error: No router instance found.
You should only use "next/router" inside the client side of your app.
commons.js:14115 Error with on-demand-entries-ping: No router instance found.
You should only use "next/router" inside the client side of your app.

I'm not using require or next/router anywhere so this is fairly confusing...

Is this something obvious or do you need me to put together a concrete example?

[mtford90]

Ah this turned out to be because of my use of externals.

My next.config.js looks like this:

module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      },
      {
        test: /\.css$/,
        loader: 'babel-loader!raw-loader'
      },
      {
        test: /\.scss$/,
        loader: 'babel-loader!raw-loader!sass-loader'
      }
    )

    config.externals = Object.assign(
      {},
      config.externals,
      {
        'jquery/dist/jquery.slim': '$',
      }
    )

    if (dev) {
      config.devtool = 'cheap-source-map'
    }

    return config
  }
}

Is it not possible to use externals with next.js?

[arunoda]

We have not experimented that.
But you may need to read our webpack config and tweak as you need.

[dbergey]

@mtford90 Did you ever find a workaround for this?

[sheerun]

I have the same issue

[ofarukcaki]

I still have the issue as well