如何在模块中导入JSX文件，解决Uncaught SyntaxError: Unexpected token '<'报错

报错原因 #

你仅给入口文件index.js配置了type="text/babel"让Babel转译JSX语法，通过import导入的test.js会被浏览器默认当作普通ES模块解析，不会经过Babel转译，碰到JSX的<语法就会抛出语法错误。

具体修改步骤 #

1. 调整index.html配置 #

首先补全缺失的依赖（React、ReactDOM、jQuery），再添加Babel全局配置，开启模块转译能力：

<!-- 先引入项目依赖 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 提前配置Babel全局参数 -->
<script>
window.Babel = {
  presets: ['react', 'es2020'],
  standalone: {
    // 开启对导入模块的转译处理
    transformModules: true
  }
}
</script>

<!-- 引入babel standalone -->
<script src="https://unpkg.com/@babel/standalone@7.15.8/babel.min.js" crossorigin></script>

<div id="app"></div>
<script src="index.js" type="text/babel" data-type="module"></script>

2. 修改index.js的导入路径 #

把import语句改为相对路径，避免浏览器路径解析异常：

// 改成相对路径./test.js
import {SheetWaypointList} from './test.js';

// 原有其他代码保持不变
class App extends React.Component{
  constructor(props) {
    super(props);
  };
  render() {
    return <div>content 1</div>;
  };
};
$(document).ready(function () {
  ReactDOM.render(
    <App/>,
    document.getElementById('app')
  );
});

3. test.js代码无需修改 #

调整后导入的test.js会自动被Babel转译JSX语法，不会再抛出<相关的语法错误。

注意事项 #

这种纯浏览器端Babel转译的方式仅适合本地调试、原型开发使用，生产环境还是建议用Vite、Create React App等构建工具打包后部署，性能会好很多。

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