How to setup webpack for nodejs with server side rendering

Question

How to setup webpack for nodejs with server side rendering

I am trying to set up Webpack to generate 2 packages, one for server side rendering server code and one for client side rendering code. So far the bundle is being generated correctly, but when I run the server code and it tries to render some of my React components, it throws errors like this:

ERROR in ./~/react-load-script/lib/index.js
Module build failed: ReferenceError: Unknown plugin "add-module-exports" specified in "/Users/alex/Development/muub/one/website/node_modules/react-load-script/.babelrc" at 0, attempted to resolve relative to "/Users/alex/Development/muub/one/website/node_modules/react-load-script"
at /Users/alex/Development/muub/one/website/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (/Users/alex/Development/muub/one/website/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/Users/alex/Development/muub/one/website/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init (/Users/alex/Development/muub/one/website/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/alex/Development/muub/one/website/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/alex/Development/muub/one/website/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/alex/Development/muub/one/website/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/alex/Development/muub/one/website/node_modules/babel-loader/lib/index.js:46:20)
at Object.module.exports (/Users/alex/Development/muub/one/website/node_modules/babel-loader/lib/index.js:163:20)
@ ./App/Containers/Publish/Payment/Payment.jsx 18:0-39
@ ./App/Containers/Publish/Payment/index.js
@ ./App/Containers/Publish/Publish.jsx
@ ./App/Containers/Publish/index.js
@ ./App/Routes/index.js
@ ./App/Containers/App.jsx
@ ./App/index.js
@ multi webpack-hot-middleware/client react-hot-loader/patch ./App

There are more bugs like this but related to other third party npm packages.

Here is my webpack server config:

const path = require('path');
const webpack = require('webpack');
const ExternalsPlugin = require('webpack2-externals-plugin');

let conf = {
  devtool: 'source-map',
  context: path.resolve(__dirname),

  entry: [
    path.resolve(__dirname, 'index.js')
  ],
  target: 'node',

  output: {
    path: path.join(__dirname, 'build'),
    pathinfo: true,
    filename: 'server.js',
    publicPath: '/public/',
    libraryTarget: 'commonjs2'
 },
  resolve: {
    modules: ['App', 'node_modules'],
    extensions: ['.js', '.jsx']
 },
  module: {
   rules: [
   {
    test: /\.css$/,
    use: [
      {
        loader: 'css-loader/locals',
        options: {
          modules: true,
          sourceMap: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        }
      },
      'postcss-loader'
    ]
  },
  {
    test: /\.(js|jsx)?$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  }
  ]
 },
 plugins: [
   new webpack.NoEmitOnErrorsPlugin(),
   new webpack.HotModuleReplacementPlugin(),
   new ExternalsPlugin({
     type: 'commonjs2',
     include: path.join(__dirname, 'node_modules'),
     exclude: [path.join(__dirname, 'node_modules', 'webpack/buildin'), path.join(__dirname, 'App')]
   }),
   new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}),
   new webpack.DefinePlugin({
     'process.env.NODE_ENV': JSON.stringify('development')
   })
  ]
}

module.exports = conf;