React 15项目与React 16组件库兼容问题咨询

Hey Bonnie, let's tackle this issue head-on. Your core problem stems from having two different React versions running side-by-side: your component library (Project B) uses React 16.3.2, while your main app (Project A) is on 15.6.2. This causes multiple React instances to load, which breaks react-responsive-carousel's ability to track DOM nodes—hence the "Unable to find node on an unmounted component" error.

Let's go through your options, starting with peer dependencies, then other fixes, and whether you really need to upgrade Project A.

Peer Dependencies: Your Best First Step #

First off: peer dependencies are NOT deprecated—they're actually designed exactly for this scenario! Component libraries use them to declare which versions of host dependencies (like React) they're compatible with, avoiding duplicate installs and version clashes.

How to set this up in Project B: #

1. Move react and react-dom from devDependencies to peerDependencies in your package.json, and define a version range that covers both Project A and B's needs:

   "peerDependencies": {
     "react": "^15.6.2 || ^16.3.2",
     "react-dom": "^15.6.2 || ^16.3.1"
   },
   "devDependencies": {
     "@storybook/addon-knobs": "^3.3.13",
     "@storybook/react": "^3.4.0",
     "react-hot-loader": "^4.2.0",
     "react-redux": "^5.0.7",
     "react-responsive-carousel": "^3.1.37",
     "styled-components": "^3.2.5"
   }
   

   This way, when you run Storybook for Project B, it'll use the React 16.x version you need for development. When Project A installs your component library, it'll reuse Project A's existing React 15.x instance—no duplicate React code, no conflicts.

2. Align your react-responsive-carousel versions: Notice Project A uses 3.1.34 while Project B uses 3.1.37. To avoid extra friction, either upgrade Project A's version to match Project B's, or downgrade Project B's to match Project A's. Check the carousel's docs to confirm it supports both React 15 and 16 (it should, given the patch version difference).

Other Fixes If Peer Dependencies Aren't Enough #

If you still run into issues after setting up peer dependencies, try these approaches:

1. Exclude React from your component library's bundle #

Configure your Project B build tool (Webpack or Rollup) to mark react and react-dom as external dependencies. This ensures your bundled component library doesn't include React code—it'll rely entirely on Project A's React instance.

Webpack example:

module.exports = {
  // ... rest of your config
  externals: {
    'react': 'react',
    'react-dom': 'react-dom'
  }
};

Rollup example:

export default {
  // ... rest of your config
  external: ['react', 'react-dom'],
  output: {
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  }
};

2. Force unified dependency versions in Project A #

Use npm/yarn's resolution features to make sure all dependencies use Project A's React version:

• For npm (v6+), add this to Project A's package.json:

  "resolutions": {
    "react": "^15.6.2",
    "react-dom": "^15.6.2"
  }
  

• Run npm install again to apply the changes. This will override any nested dependencies trying to use a different React version.

• For yarn, the resolutions field works the same way—just run yarn install after adding it.

You can also try running npm dedupe in Project A's root directory, which automatically merges duplicate dependency packages where possible.

Do You Have to Upgrade Project A? #

Nope! The peer dependency + external bundle setup should solve your problem without touching Project A's React version. Just two quick checks to make sure everything works:

• Verify that Project B's code doesn't use React 16-only features (like React.Fragment, createContext, or new lifecycle methods). If it does, either replace them with React 15-compatible alternatives or add polyfills (like react-addons-create-fragment which Project A already has).
• Confirm react-responsive-carousel@3.1.37 (or whichever version you settle on) supports React 15.x. A quick look at its package.json shows it lists react: ">=15.0.0" as a peer dependency, so you're good to go.

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