使用Create React App导入自定义组件库时项目启动失败

Hey there, let's break down why this error is happening and how to fix it.

First, the root cause: Create React App's default Webpack configuration doesn't transpile ES6+ code from node_modules by default. Your company's component library is likely publishing uncompiled ES modules (since its entry file uses export * from './src', and the src directory has raw component code), and Webpack can't parse the export syntax because it's not running Babel on that module.

Here are your solutions, ordered from most ideal to workaround:

1. Fix the Component Library (Best Practice) #

Reach out to the team maintaining your company's component library and ask them to compile the code before publishing to your npm registry. A properly packaged React component library should output CommonJS (CJS) or UMD format (or at least provide a compiled entry point in its package.json).

They should set up a build step (using Babel, Rollup, or Webpack) that converts the ES6+ code into browser-compatible JS, and point the main field in their package.json to the compiled output file instead of the raw src directory.

2. Transpile the Component Library in Your Project (Workaround) #

If you can't get the library updated, you'll need to modify your CRA project's Webpack config to transpile the problematic module. Since CRA hides its config by default, use react-app-rewired to override it without ejecting:

• Install the required dependencies:

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

• Update your package.json scripts to use react-app-rewired instead of react-scripts:

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

• Create a config-overrides.js file in your project root with this code (replace [涉事模块] with the actual module name):

  const { override, addBabelLoader } = require('customize-cra');
  
  module.exports = override(
    addBabelLoader({
      test: /\.js$/,
      include: /node_modules\/[涉事模块]/,
      options: {
        presets: ['react-app']
      }
    })
  );
  

• Restart your development server, and the error should be resolved—Webpack will now run Babel on the component library's code to parse the ES module syntax.

3. Eject Your CRA Project (Last Resort) #

If you're comfortable ejecting (note this is irreversible), you can directly modify the Webpack config:

• Run npm run eject
• Open config/webpack.config.js, find the babel-loader rule, and add your component library to the include array (or remove it from the exclude list if it's there).

A quick extra check: Verify the component library's package.json—if it has a module field pointing to an ES module file, CRA might be prioritizing that over the main field. If that's the case, either ask the library team to remove the module field (if they haven't compiled it) or follow the transpilation steps above.

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