点击按钮触发app()时出现ReferenceError: app未定义的原因？

算力阿峰

2026-6-28

问题原因及解决办法

为什么会报错？

你用ES模块（import/export）编写的App.js中，app函数属于模块私有作用域，不会自动暴露到浏览器的全局window对象上。index.html里的onclick事件是在全局作用域查找函数，自然找不到app，所以会抛出Uncaught ReferenceError。

三种解决方式

1. 把app函数挂到全局window上

修改App.js，导出函数的同时将其挂载到window对象，让全局作用域能访问到：

import React from 'react';
import ReactDOM from 'react-dom/client';
import CheckTask from './Check.js';

export function app() {
  // 你的应用初始化逻辑
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<CheckTask />);
}

// 挂载到全局对象
window.app = app;

2. 直接在App.js里自动执行初始化

如果不需要手动点击按钮启动，直接在App.js里调用app()，然后index.html以模块方式引入该文件：

<!-- index.html 中的script标签 -->
<script type="module" src="./App.js"></script>

// App.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import CheckTask from './Check.js';

function app() {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<CheckTask />);
}

// 页面加载后自动运行初始化
app();

3. 在index.html里通过模块导入绑定事件

这种方式不会污染全局作用域，更符合模块化开发规范：

<!-- index.html -->
<button id="startBtn">启动待办应用</button>

<script type="module">
  // 从App.js导入app函数
  import { app } from './App.js';
  // 给按钮绑定点击事件
  document.getElementById('startBtn').addEventListener('click', app);
</script>