ReactJS15+Webpack3升级至ReactJS16+Webpack4编译错误求助

Hey there, let's work through this frustrating compilation error you're hitting when upgrading from React 15 to 16 using create-react-app. The error pointing to an unexpected token in lodash suggests a mix of module compatibility issues and possibly outdated dependencies. Here's a step-by-step breakdown of solutions to try:

1. Upgrade Your lodash Dependency First #

That unexpected token error in lodash is a red flag—your installed version might use syntax that isn't being properly transpiled by create-react-app's default Babel setup. Create React App only transpiles code in your src/ folder by default; it skips most node_modules packages, so if your lodash version has untranspiled ES6+ syntax, it'll throw errors.

• Run this command to upgrade to the latest stable lodash version:

  npm install lodash@latest
  # Or with yarn:
  yarn add lodash@latest
  

• After upgrading, delete your node_modules and lock file, then reinstall dependencies to ensure clean installs:

  rm -rf node_modules package-lock.json
  npm install
  

2. Resolve CommonJS/ES Module Conflicts #

Your old project uses module.exports (CommonJS), while create-react-app leans into ES modules (import/export). While React 16 supports both, mixing them can cause parsing issues, especially when files are shared between client and server.

• Convert CommonJS exports to ES modules: For files using module.exports, replace them with export default:

  // Old:
  module.exports = MySharedComponent;
  
  // New:
  export default MySharedComponent;
  

• If you have hundreds of files to convert, use a Babel plugin to automate this. Since you're using create-react-app, you'll need to customize the config without ejecting (avoid ejecting if possible—you lose future CRA updates):
  1. Install react-app-rewired and customize-cra:

     npm install react-app-rewired customize-cra --save-dev
     

  2. Create a config-overrides.js file in your project root:

     const { override, addBabelPlugin } = require('customize-cra');
     
     module.exports = override(
       addBabelPlugin('babel-plugin-transform-modules-commonjs')
     );
     

  3. Update your package.json scripts to use react-app-rewired:

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

3. Upgrade react-scripts to the Latest Version #

Older versions of create-react-app's react-scripts package might have outdated Babel/webpack configurations that don't handle newer syntax or module setups properly.

• Upgrade react-scripts:

  npm install react-scripts@latest
  

• Again, clean your dependencies after upgrading to avoid cache issues.

4. Isolate Server-Specific Code #

Since your app shares files between client and server, make sure server-only code (like Node.js APIs) isn't being compiled for the browser. Create React App will try to parse all imported files, so server-specific code can throw errors.

• Wrap server-only logic in a check for the Node environment:

  if (typeof window === 'undefined') {
    // Server-only code here (e.g., file system access, Node APIs)
  }
  

• Alternatively, split server and shared code into separate directories so CRA only processes client-safe files.

5. Force Transpile lodash (If Needed) #

If upgrading lodash doesn't fix the syntax error, you can tell CRA to transpile the lodash package specifically using react-app-rewired:

• Add this to your config-overrides.js:

  const { override, addBabelLoader } = require('customize-cra');
  
  module.exports = override(
    addBabelLoader({
      test: /\.js$/,
      include: /node_modules\/lodash/,
    })
  );
  

Start with the simplest steps first (upgrade lodash, clean dependencies) before moving to more involved config changes. Most of the time, outdated dependencies or module mismatches are the root cause here.

内容的提问来源于stack exchange，提问作者Sadanand