Why does my application respond to the build after the upgrade to respond to 16?

Question

Why does my answer application not work when assembling the assembly after the update in order to respond to 16?

After updating the response to version 16, my application stopped working on the production assembly when the development work was great. If I abandon React 15.6, it still works fine in both prod and dev environments.

I use: "webpack": "^3.5.6",and"react": "^16.0.0",

I get the following error:

Untrained ReferenceError: require not defined

Configuration of my webpack prod:

const path = require('path');
const merge = require("webpack-merge");
const webpack = require("webpack");
const config = require("./webpack.base.babel");

const OfflinePlugin = require('offline-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(config, {
  // devtool: "nosources-source-map",
  devtool: "source-map",
  // In production, we skip all hot-reloading stuff
  entry: [
    'babel-polyfill', // Needed for redux-saga es6 generator support
    path.join(process.cwd(), 'src/client/app.js'), // Start with app.js
  ],
  performance: {
    assetFilter: (assetFilename) => !(/(\.map$)|(^(main\.|favicon\.))/.test(assetFilename)),
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true
    }),
    new HtmlWebpackPlugin({
      template: "src/client/index.html",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),
    // Shared code
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      children: true,
      minChunks: 2,
      async: true,
    }),
    // Avoid publishing files when compilation fails
    new webpack.NoEmitOnErrorsPlugin(),
    // Put it in the end to capture all the HtmlWebpackPlugin's
    // assets manipulations and do leak its manipulations to HtmlWebpackPlugin
    new OfflinePlugin({
      relativePaths: false,
      publicPath: '/',

      // No need to cache .htaccess. See http://mxs.is/googmp,
      // this is applied before any match in `caches` section
      excludes: ['.htaccess'],

      caches: {
        main: [':rest:'],

        // All chunks marked as `additional`, loaded after main section
        // and do not prevent SW to install. Change to `optional` if
        // do not want them to be preloaded at all (cached only when first loaded)
        additional: ['*.chunk.js'],
      },

      // Removes warning for about `additional` section usage
      safeToUseOptionalCaches: true,

      AppCache: false,
    }),
  ]
});

How can i fix this?

webpack.base.babel.js

// Common Webpack configuration used by webpack.config.development and webpack.config.production
const path = require("path");
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");
const e2c = require("electron-to-chromium");
const GLOBALS = require('../bin/helpers/globals');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const isProd = process.env.NODE_ENV === 'production';
const postcssLoaderOptions = {
  plugins: [
    autoprefixer({
      browsers: e2c.electronToBrowserList("1.4")
    }),
  ],
  sourceMap: !isProd,
};

GLOBALS['process.env'].__CLIENT__ = true;

module.exports = {
  target: 'web', // Make web variables accessible to webpack, e.g. window
  output: {
    filename: 'js/[name].[hash].js',
    chunkFilename: 'js/[name].[hash].chunk.js',
    path: path.resolve(process.cwd(), 'build'),
    publicPath: "/"
  },
  resolve: {
    modules: ["node_modules"],
    alias: {
      client: path.resolve(process.cwd(), "src/client"),
      shared: path.resolve(process.cwd(), "src/shared"),
      server: path.resolve(process.cwd(), "src/server")
    },
    extensions: [".js", '.jsx', ".json", ".scss"],
    mainFields: ["browser", "module", 'jsnext:main', "main"],
  },
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /\/Bundles.js/,
      './AsyncBundles.js'
    ),
    new webpack.IgnorePlugin(/vertx/),
    new webpack.ProvidePlugin({
      Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise',
      fetch: "imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch", // fetch API
      $: "jquery",
      jQuery: "jquery",
    }),
    new webpack.DefinePlugin(GLOBALS),
    new ExtractTextPlugin({
      filename: "css/[name].[hash].css",
      disable: false,
      allChunks: true
    })
  ],
  module: {
    noParse: /\.min\.js$/,
    rules: [
      // JavaScript / ES6
      {
        test: /\.(js|jsx)?$/,
        include: [
          path.resolve(process.cwd(), "src/client"),
          path.resolve(process.cwd(), "src/shared"),
        ],
        exclude: /node_modules/,
        use: "babel-loader"
      },
      // Json
      {
        test: /\.json$/,
        use: 'json-loader',
      },
      //HTML
      {
        test: /\.html$/,
        include: [
          path.resolve(process.cwd(), "src/client"),
        ],
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }
        ]
      },
      // Images
      // Inline base64 URLs for <=8k images, direct URLs for the rest
      {
        test: /\.(png|jpg|jpeg|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 8192,
            name: "images/[name].[ext]?[hash]"
          }
        }
      },
      // Fonts
      {
        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: 'application/font-woff'
          }
        }
      },
      {
        test: /\.(ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader'
      },
      // Styles
      {
        test: /\.scss$/,
        include: [
          path.resolve(process.cwd(), "src/client"),
          path.resolve(process.cwd(), "src/shared"),
        ],
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                modules: true,
                importLoaders: 1,
                localIdentName: '[local]_[hash:base64:3]'
              }
            },
            {
              loader: "postcss-loader",
              options: postcssLoaderOptions
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true,
                outputStyle: "compressed"
              }
            }
          ]
        })
      },
    ]
  }
};

Answer 1

The fix was simple.

I just needed to delete this line noParse: /\.min\.js/

What is he doing:

- , (). , .