现有Web应用集成React时Webpack报错：无法解析'fbjs/lib/EventListener'

Hey there! Let's break down this React + Webpack integration issue you're hitting—sounds like you're close but got stuck on dependency resolution and runtime errors. Let's go through the most likely fixes based on what you've shared:

1. Fix Dependency Version Mismatches #

First up, the fbjs path issue often ties back to conflicting or duplicate dependency versions. Here's what to do:

• Run npm list react react-dom fbjs in your terminal. Look for multiple entries of the same package (like two versions of react or fbjs) or version mismatches between React and its peer dependencies.
• If you see duplicates or mismatches, delete your node_modules folder and package-lock.json (or yarn.lock if using Yarn), then re-run npm install to get a clean, consistent dependency tree. You can also try npm dedupe to automatically merge duplicate packages without reinstalling everything.

2. Correct Your Webpack Resolve Configuration #

Your manual fbjs path mapping might not have been set up correctly. Let's adjust your webpack.config.js to ensure Webpack resolves core React dependencies properly:

const path = require('path');

module.exports = {
  // ... other existing config
  resolve: {
    // Add these extensions to avoid typing them in imports
    extensions: ['.js', '.jsx', '.json'],
    // Force Webpack to use a single instance of React/fbjs from your node_modules
    alias: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
      'fbjs': path.resolve(__dirname, 'node_modules/fbjs')
    }
  }
};

This ensures every import of these packages points to the same files, eliminating "duplicate React instance" errors that often show up in the browser console.

3. Align Webpack Mode and Environment Variables #

You mentioned using --mode development to generate admin.js, but make sure Webpack is passing the correct environment to React. Add the DefinePlugin to your config to explicitly set the NODE_ENV:

const webpack = require('webpack');

module.exports = {
  // ... other config
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ]
};

This tells React to load its development build (with helpful warnings and error messages) instead of accidentally pulling in the production build, which can cause unexpected runtime errors.

4. Dig Into the Browser Console Error #

The Uncaught Error in react.development.js is the key to pinpointing the exact issue. For example:

• If it's an Invalid hook call error, that's almost always due to multiple React instances (the fix in step 2 should resolve this).
• If it's a module not found error, double-check that your resolve.extensions includes the file type you're importing (like .jsx for React components) and that your alias paths are correct.

If you can share the full error message, we can narrow this down even further, but the steps above should cover most common scenarios.

5. Validate Your npm Script #

Double-check your package.json's scripts section to make sure your wbp command is pointing to the right config and mode:

"scripts": {
  "wbp": "webpack --config webpack.config.js --mode development"
}

If your config file is in a subfolder (like config/webpack.config.js), adjust the path accordingly to avoid Webpack using a default config instead of yours.

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