ReactJs构建部署后出现TypeError: Cannot read properties of undefined (call)错误

1. 确认Amplify初始化时机 #

生产环境下Amplify初始化若滞后于组件渲染，会导致未初始化完成就调用相关方法触发错误。需在应用最顶层（如index.js）同步执行初始化，不要放在组件内部或懒加载逻辑中：

// index.js
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 优先初始化Amplify
Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 修复路由与Amplify认证组件的嵌套关系 #

项目使用React Router时，若withAuthenticator仅包装单个路由组件，生产环境路由切换可能导致认证状态异常。建议将认证组件包装在路由外层：

// App.js
import { withAuthenticator } from '@aws-amplify/ui-react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import Tracking from './components/Tracking';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/tracking" element={<Tracking />} />
      </Routes>
    </Router>
  );
}

// 把整个App包裹在withAuthenticator中
export default withAuthenticator(App);

3. 禁用不必要的Tree Shaking避免代码误删 #

Create React App默认的生产构建会开启Tree Shaking，可能误删Amplify的核心代码。可通过craco调整webpack配置：

1. 安装依赖：

npm install @craco/craco --save-dev

2. 修改package.json的scripts：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

3. 项目根目录创建craco.config.js：

module.exports = {
  webpack: {
    configure: config => {
      // 禁用unused代码移除，避免Amplify核心逻辑被误删
      config.optimization.minimizer.forEach(minimizer => {
        if (minimizer.options?.terserOptions) {
          minimizer.options.terserOptions.compress = {
            ...minimizer.options.terserOptions.compress,
            unused: false
          };
        }
      });
      return config;
    }
  }
};

4. 统一Amplify依赖版本 #

版本不匹配可能引发生产构建异常。删除旧依赖文件后重新安装最新匹配版本：

rm -rf node_modules package-lock.json
npm install aws-amplify@latest @aws-amplify/ui-react@latest

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