将组件库bundle导入React项目时出现‘React is not defined’错误求助

1. 修正externals配置格式 #

当前externals的写法不符合UMD规范要求，需改为多规范兼容的对象式配置，确保Electron-Renderer环境能正确识别不同模块规范下的React导出：

externals: {
  react: {
    root: 'React',
    commonjs: 'react',
    commonjs2: 'react',
    amd: 'react',
    umd: 'react'
  },
  'react-dom': {
    root: 'ReactDOM',
    commonjs: 'react-dom',
    commonjs2: 'react-dom',
    amd: 'react-dom',
    umd: 'react-dom'
  }
}

2. 调整JSX运行时配置 #

通过配置Babel或TypeScript的自动JSX运行时，避免手动导入React的缺失问题：

• Babel配置（.babelrc或babel.config.json）：

{
  "presets": [
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

• TypeScript配置（tsconfig.json）：

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

3. 完善Webpack Output配置 #

补充库名称、导出规则并修复全局对象绑定问题：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'testing.js',
  library: 'TestingComponent',
  libraryTarget: 'umd',
  libraryExport: 'default', // 组件为默认导出时开启
  globalObject: 'this' // 适配Electron中window/global的全局对象差异
}

4. 适配Electron渲染进程的上下文隔离 #

若Electron开启了contextIsolation: true，需通过预加载脚本暴露React到全局上下文：

• 预加载脚本（preload.js）：

const { contextBridge } = require('electron');
const React = require('react');
const ReactDOM = require('react-dom');

contextBridge.exposeInMainWorld('React', React);
contextBridge.exposeInMainWorld('ReactDOM', ReactDOM);

• 主进程BrowserWindow配置：

new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false
  }
});

5. 验证组件库入口的导出逻辑 #

确保组件库入口文件正确导出组件，若使用旧版JSX运行时需手动导入React：

import React from 'react';
export const TestComponent = () => <div>Test</div>;
export default TestComponent;

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