无法将React组件库导入Create React App（CRA）项目求助

我之前折腾自己的React组件库时，也踩过npm link的各种坑，针对你遇到的import { Button } from 'ph-shared'报错问题，给你梳理几个最可能的原因和解决办法：

1. 先确认组件库的导出与打包配置是否正确 #

• 检查组件库根目录的package.json：确保main（或module字段，用于ES模块）指向的是打包后的正确文件路径，比如如果用Rollup/Webpack打包到dist目录，应该设置成"main": "dist/index.js"，路径错了的话，import根本找不到文件。
• 验证组件导出：在组件库的入口文件（比如src/index.js）里，必须明确导出Button组件，比如：

  export { Button } from './components/Button';
  

  要是漏了这一步，外部项目自然无法import到Button。

2. 解决React版本冲突（最常见的坑） #

当用npm link时，组件库和主项目可能会加载两个不同的React实例，这会导致Hook报错或者组件识别失败，解决步骤：

• 进入你的组件库目录，先移除本地的react/react-dom依赖（如果它们是devDependencies的话）：

  cd react-lib
  npm unlink react react-dom
  

• 然后将组件库的react/react-dom链接到主项目的依赖：

  npm link ../your-main-project/node_modules/react
  npm link ../your-main-project/node_modules/react-dom
  

• 更稳妥的方式是在组件库的package.json里，把react和react-dom设为peerDependencies，这样组件库不会本地安装它们，而是直接使用主项目的版本，从根源避免冲突：

  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
  

3. 主项目的配置与缓存问题 #

• 如果主项目用的是Create React App，npm link后记得重启开发服务器，CRA有时候不会自动检测到链接的外部包变化。
• 若主项目是自定义Webpack配置，确保resolve.modules包含了node_modules，没有限制只加载本地依赖；或者可以在resolve.alias里手动指定组件库的路径，临时绕过npm link的问题：

  resolve: {
    alias: {
      'ph-shared': path.resolve(__dirname, '../react-lib/dist')
    }
  }
  

• 清除npm缓存和开发服务器缓存：

  npm cache clean --force
  

  然后重启主项目的dev server，重新执行npm link操作。

4. 快速验证方法 #

可以先在主项目里尝试全量导入，看看组件库的导出是否正常：

import * as PhShared from 'ph-shared';
console.log(PhShared);

如果控制台能看到Button的导出，那就是单个导入的语法问题；如果看不到，那就是组件库的导出或打包有问题。

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