浏览器控制台报错：Uncaught ReferenceError: require is not defined 求助

问题原因 #

你当前使用babel-standalone在浏览器环境直接运行React代码，但它默认会把ES6的import语法转译为Node.js环境的require函数，而浏览器本身并不支持这个函数，因此触发了该错误。同时你直接以普通脚本方式加载index.js，未启用浏览器的模块支持，也导致导入逻辑无法正常执行。

解决方案 #

以下提供两种简单可行的修复方式，可根据项目需求选择：

方式一：全局挂载函数（适合小型演示项目） #

无需处理模块导入，直接将函数暴露到全局作用域：

1. 修改jogar.js，把函数挂载到window对象：

window.Jogar = function() {
    window.alert("funcionou")
}

2. 在HTML中添加jogar.js的脚本引用，放在index.js之前：

<script src="jogar.js"></script>
<script src="index.js" type="text/babel"></script>

3. 删除index.js开头的import Jogar from "./jogar"语句，直接使用全局的Jogar函数即可。

方式二：启用ES模块支持（更规范的模块写法） #

保留ES模块语法，让浏览器和babel-standalone正确处理：

1. 修改HTML中的脚本标签，将index.js设为模块类型：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="module">
    import "./index.js"
</script>

2. 在index.js顶部添加JSX编译标识（babel-standalone处理模块时需明确JSX转换规则）：

/** @jsx React.createElement */
import Jogar from "./jogar.js"

// 剩余代码保持不变

3. 确保jogar.js的导出语法不变，且导入时写全文件名后缀（.js）。

额外代码修复 #

你index.js中有一行无效代码：<Jogar/>直接写在函数外部，这不符合JSX的使用规范，建议直接删除该行（你已通过按钮onClick调用Jogar函数，无需额外渲染）。

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