本地正常的React应用生产环境报错：Cannot read properties of undefined (reading 'React')

根据你提供的代码和问题描述，本地正常但生产环境报错，大概率是生产打包时的代码优化（Tree Shaking）导致React被误删，或者全局挂载的时机不对。以下是具体解决方案：

方案1：阻止Tree Shaking移除React #

生产环境的Webpack默认会开启Tree Shaking，移除未被"直接使用"的模块。你代码里仅将React挂载到window.IngenicoLib，Webpack可能认为React没有被实际使用，从而在打包时将其剔除，导致window.IngenicoLib.React变成undefined。

给React添加一个无意义的引用，让Webpack认为它被使用了：

import React from 'react';
import ReactDOM from 'react-dom';
// 添加这行代码，防止React被Tree Shaking移除
const _keepReact = React;

// 其余代码保持不变
window.IngenicoLib = {
    React,
    ReactDOM,
    moment,
    NotificationContext,
    FetchContext,
    UserInfoContext,
    'styled-components': styled,
};

方案2：调整全局挂载的时机 #

如果第三方库og-merchant-portal-react-library在你的全局变量挂载前就执行了，也会导致它读取不到React。可以将全局变量的赋值提前到所有第三方库导入之后、App导入之前，确保在依赖库执行前完成挂载：

// 先导入所有依赖
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import * as styled from 'styled-components';
import NotificationContext from 'og-merchant-portal-react-library/lib/NotificationContext/NotificationContext';
import FetchContext from 'og-merchant-portal-react-library/lib/FetchContext';
import { UserInfoContext } from 'og-merchant-portal-react-library';

// 立即挂载全局变量
window.IngenicoLib = {
    React,
    ReactDOM,
    moment,
    NotificationContext,
    FetchContext,
    UserInfoContext,
    'styled-components': styled,
};

// 再导入并渲染App
import App from './App';
import { unregister } from './serviceWorker';

// 执行App渲染逻辑...

方案3：改用CommonJS导入方式 #

尝试使用CommonJS的require语法导入核心依赖，避免ES模块打包时的优化差异：

const React = require('react');
const ReactDOM = require('react-dom');
const moment = require('moment');
const styled = require('styled-components');

// 第三方库也改用require导入
const NotificationContext = require('og-merchant-portal-react-library/lib/NotificationContext/NotificationContext');
const FetchContext = require('og-merchant-portal-react-library/lib/FetchContext');
const { UserInfoContext } = require('og-merchant-portal-react-library');

window.IngenicoLib = {
    React,
    ReactDOM,
    moment,
    NotificationContext,
    FetchContext,
    UserInfoContext,
    'styled-components': styled,
};

方案4：检查Webpack生产配置 #

确认Webpack生产配置中没有过度优化React相关模块：

• 避免将optimization.usedExports强制设为false（生产环境默认值为true，是Tree Shaking的基础）
• 如果使用了babel-plugin-transform-react-remove-prop-types等清理插件，检查是否误删了React的核心导出

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