React Web Component打包后无法正常访问props的解决方案咨询

问题根源 #

打包过程中，要么propTypes被生产环境构建工具剔除，导致react-to-webcomponent无法自动推断Web Component的可观察属性；要么打包后的代码存在React版本冲突，或者属性未显式声明，导致宿主框架（React/Angular）无法正确识别并传递属性。

解决方案 #

1. 显式声明Web Component的属性列表 #

react-to-webcomponent允许通过配置参数手动指定需要监听的属性，避免依赖propTypes的自动推断（打包时propTypes常被移除）。修改代码如下：

import reactToWebComponent from "react-to-webcomponent";
import React from "react";
import ReactDOM from "react-dom/client";

interface Props {
    type?: string;
}

const CustomComponent: React.FC<Props> = (props: Props) => {
    console.log("props", props);
    return <div>{props.type}</div>;
};

// 显式声明Web Component要监听的属性
customElements.define(
    "my-component",
    reactToWebComponent(CustomComponent, React, ReactDOM, {
        attributes: ["type"]
    })
);

export default CustomComponent;

2. 禁止打包工具移除propTypes（可选） #

如果坚持依赖propTypes推断属性，需确保生产打包时保留propTypes：

• Webpack/Babel：禁用babel-plugin-transform-react-remove-prop-types插件，或添加配置保留目标组件的propTypes：

  {
    "plugins": [
      ["babel-plugin-transform-react-remove-prop-types", {
        "ignoreFilenames": ["CustomComponent.tsx"]
      }]
    ]
  }
  

• Vite：修改vite.config.ts配置：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [
      react({
        babel: {
          plugins: [
            ['babel-plugin-transform-react-remove-prop-types', { removeImport: false }]
          ]
        }
      })
    ]
  });
  

3. 避免React版本冲突 #

将React和ReactDOM设为外部依赖，让宿主应用提供这些库，避免打包后bundle包含重复的React实例：

• Vite配置示例：

  export default defineConfig({
    build: {
      rollupOptions: {
        external: ['react', 'react-dom'],
        output: {
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM'
          }
        }
      }
    }
  });
  

• Webpack配置示例：

  module.exports = {
    externals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  };
  

4. 确保属性传递的正确性 #

• 在React应用中使用Web Component时，直接使用原生属性语法：<my-component type="sometype"></my-component>，不要用React的camelCase属性（Web Component只识别小写短横线或原生属性名）。
• 在Angular应用中，需确保属性被正确绑定：使用[type]="'sometype'"或直接type="sometype"，Angular会自动处理Web Component的属性映射。

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