如何解决插件构建后导入组件时的‘React is not defined’错误？

问题根源 #

你的构建工具（比如Webpack、Rollup、Vite这类）开启了自动JSX转换，会把JSX转成React.createElement调用，但如果配置里把React设成了外部依赖，或者开启了Tree Shaking自动移除“未使用”的导入，就会导致生产构建后代码里没了React的引用，最终报错。

具体解决办法 #

1. 把React设为peer依赖 #

在插件的package.json里加上peerDependencies，明确要求使用插件的项目自己提供React：

{
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
  }
}

这样构建工具就不会把React打包进你的插件，同时会提示用户安装对应版本的React，避免版本冲突。

2. 关闭Tree Shaking对React的自动移除 #

• 如果你用Webpack，在webpack.config.js里调整优化配置：

module.exports = {
  optimization: {
    usedExports: false
  }
};

• 如果你用Rollup，在rollup.config.js里把React标记为外部依赖：

export default {
  external: ['react'],
  // 其他配置项...
};

3. 强制保留React导入 #

在导入React的代码行上面加注释，告诉构建工具别删这个导入：

/* eslint-disable-next-line import/no-unused-modules */
import React from 'react';

要是用Vite，就在vite.config.js里排除React的依赖预构建：

export default {
  optimizeDeps: {
    exclude: ['react']
  }
};

4. 改用React 17+的JSX运行时（推荐） #

如果你的React版本是17或更高，可以直接用新的JSX运行时，不用手动导入React。在tsconfig.json或jsconfig.json里配置：

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

这样构建工具会自动引入react/jsx-runtime，彻底不用写import React from 'react'，从根上解决问题。

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