Webpack，React.js-在浏览器控制台中要求未定义的错误

Question

I'm trying to build a web app with a React.js front-end, Express handling the back-end and Webpack bundling the whole thing. I'm trying to move away from my habitual way of doing things which is creating separate webpack.config files for the server and client. I'm also trying to add a minifier (Babili).

Here is my webpack.config file. Note how I used object.assign to create different objects for my client and server files and how I export them at the very end. I doubt this is where the problem lies.

const BabiliPlugin = require('babili-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const path = require('path');
const srcPath = path.resolve(__dirname + '/src');
const distPath = path.resolve(__dirname + '/dist');

// Common entries for all configs
var common = Object.assign({}, {
  context: srcPath,
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['*']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new BabiliPlugin()
  ],
  externals: nodeExternals()
});

// Server.js config
// Output to dist/client/
var serverConfig = Object.assign({}, common, {
  entry: './server/index.js',
  output: {
    path: distPath,
    filename: 'server.min.js'
  },
  target: 'node',
  node: {
    __dirname: false,
    __filename: false
  }
});

// Client.js config
// Output to /dist/
var clientConfig = Object.assign({}, common, {
  entry: "./client/index.js",
  output: {
    path: distPath,
    filename: './client/client.min.js',
    publicPath: '/'
  },
  target: 'web',
  devtool: 'source-map'
});

// Export configurations array
module.exports = [serverConfig, clientConfig]

Here is my client.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route } from 'react-router-dom';

import Home from './routes/Home.js';

ReactDOM.render((
  <div>
    <p> why is this not working </p>
  </div>
), document.getElementById('app'));

The error I get in the browser console is the following :

Uncaught ReferenceError: require is not defined
at Object.<anonymous> (client.min.js:1)
at b (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at b (client.min.js:1)
at client.min.js:1
at client.min.js:1

I don't understand why it wouldn't work. The server.js file works fine since I can see the index.html file is served to the browser. My usual webpack.config files are the exact same except for the Babili minifier, which when removed does not solve the issue. I'm hoping you guys can help me out with this. Thank you in advance!

Edit: I'd like to add the fact I did not have the nodeExternals() part in my previous client config. However, when I don't include it, I get the following error:

Uncaught Error: Cannot find module "object-assign"
at client.min.js:8
at client.min.js:8
at Object.<anonymous> (client.min.js:8)
at Object.<anonymous> (client.min.js:8)
at t (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at t (client.min.js:1)
at Object.<anonymous> (client.min.js:1)
at t (client.min.js:1)

Answer 1

externals: nodeExternals () tells Webpack to load all modules using require . This is useful for the server but throws this error in the browser (because require is only natively present on Node.js).

To fix it simply move the externals field to the server config :

// Common entries for all configs
var common = Object.assign({}, {
  context: srcPath,
  resolve: {
    modules: ['node_modules', 'src'],
    extensions: ['*']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new BabiliPlugin()
  ]
});

// Server.js config
// Output to dist/client/
var serverConfig = Object.assign({}, common, {
  entry: './server/index.js',
  output: {
    path: distPath,
    filename: 'server.min.js'
  },
  target: 'node',
  node: {
    __dirname: false,
    __filename: false
  },
  externals: nodeExternals()
});