Razzle 2 & Babel 7

razzle.babel.conf.js

// https://github.com/jaredpalmer/razzle/blob/e89853267639d62d7930f6ad0e283a5049ccbd35/packages/babel-preset-razzle/index.js
// https://github.com/jaredpalmer/razzle/pull/775
'use strict';

module.exports = (transform = null) => {
  // do env check first
  var env = process.env.BABEL_ENV || process.env.NODE_ENV;
  if (env !== 'development' && env !== 'test' && env !== 'production') {
    throw new Error(
      'Using `babel-preset-razzle` requires that you specify `NODE_ENV` or ' +
        '`BABEL_ENV` environment variables. Valid values are "development", ' +
        '"test", and "production". Instead, received: ' +
        JSON.stringify(env) +
        '.'
    );
  }

  var preset = {
    presets: [
      [require.resolve('@babel/preset-env'), { modules: false }],
      [require.resolve('@babel/preset-react'), { development: (env === 'development' || env === 'test')}],
    ],
    plugins: [
      // class { handleThing = () => { } }
      require.resolve('@babel/plugin-proposal-class-properties'),

      // The following two plugins use Object.assign directly, instead of Babel's
      // extends helper. Note that this assumes `Object.assign` is available.
      // { ...todo, completed: true }
      [require.resolve('@babel/plugin-proposal-object-rest-spread'), { useBuiltIns: true }],
      // Adds syntax support for import()
      require.resolve('@babel/plugin-syntax-dynamic-import'),
      // Add support for async/await
      require.resolve('@babel/plugin-transform-runtime'),
    ],
  };

  if (env === 'test') {
    preset.plugins.push.apply(preset.plugins, [
      // Compiles import() to a deferred require()
      require.resolve('babel-plugin-dynamic-import-node'),
      // Transform ES modules to commonjs for Jest support
      [
        require.resolve('@babel/plugin-transform-modules-commonjs'),
        { loose: true },
      ],
    ]);
  }

  if (env === 'production') {
    preset.plugins.push.apply(preset.plugins, [
      require.resolve('babel-plugin-transform-react-remove-prop-types'),
    ]);
  }

  if (transform) {
    preset = transform(preset);
  }

  return preset;
}

razzle.conf.js

var query = require('json-query');
var babelPresets = require("./razzle.babel.conf");

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    var result;
    // ========================================================================
    // BABEL 7
    // ========================================================================
    // update babel presets. When razzle supports babel 7, this can change to the
    // standard way of including babel, with only an override file
    result = query('module.rules.use[loader~/babel-loader/]', { data: config, allowRegexp: true });
    var babelLoader = require.resolve("babel-loader");
    var babelConfig = babelPresets((opts) => {
      // move to .babelrc when razzle supports babel 7
      opts.plugins.push(require.resolve('@babel/plugin-proposal-optional-chaining'));
      return opts;
    });

    result.references[0].loader = babelLoader;
    result.references[0].options.presets = babelConfig.presets || [];
    result.references[0].options.plugins = babelConfig.plugins || [];
    
    return config;
  }
};