发布React组件包后导入函数式React项目遇编译错误求解决方案

检查组件包的构建与发布配置 #

• 确认组件包发布前已完成编译：将TSX/JSX源码转译为浏览器可识别的普通JavaScript。检查组件包package.json中的main、module、types字段，必须指向编译后的产物文件（如dist/index.js），而非源码文件（src/index.tsx）。
• 若使用Rollup、Vite或webpack打包组件包，确保配置中包含React/JSX转译规则：比如用babel-loader配合@babel/preset-react处理JSX，或Rollup的@rollup/plugin-babel插件配置React预设。
• 检查组件包的发布范围：通过.npmignore排除src目录，或在package.json的files字段仅指定dist等编译产物目录，避免源码被打包发布。

调整消费项目的编译配置（临时方案） #

若组件包未完成编译（不推荐长期使用），可修改消费项目的webpack配置，让它处理node_modules中的目标组件包：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(tsx|jsx)$/,
        include: /node_modules\/@my-package/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-typescript']
          }
        }
      }
    ]
  }
}

重新发布并更新组件包 #

• 在组件包项目中执行构建命令（如npm run build），确认dist目录生成完整编译产物。
• 重新发布组件包：npm publish，然后在消费项目中更新包版本：npm update @my-package。

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