如何解决React报错Module build failed (babel-loader)问题

所有报错都是一处拼写错误导致的连锁反应：第二行导入依赖时把ES模块导入关键字from错写成了form，解析器无法识别这个非法语法，才会抛出缺分号、语法仅支持TS文件这类误导性提示。

1. 先修正拼写错误，把第二行的form改回from
2. 匹配你本地安装的React版本使用对应渲染API，不同版本API存在差异，避免修正拼写后又碰到版本兼容问题

React 18 及以上版本（当前create-react-app默认创建的版本） #

import React from "react";
import ReactDOM from "react-dom/client";

const element = <h1>Hello World</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

React 17 及更早版本 #

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello World</h1>;
ReactDOM.render(element, document.getElementById('root'));

• 如果拼写改完还是报JSX语法错误，检查项目的babel配置有没有引入@babel/preset-react预设，JSX语法必须依赖这个预设才能被正常转译
• 存放JSX代码的文件建议统一使用.jsx后缀，如果坚持用.js后缀，要提前配置构建工具支持.js文件内的JSX语法解析
• 不需要因为'import ... =' can only be used in TypeScript files这个提示把文件改成TS格式，拼写修正后这个提示会自动消失，它本质是解析器识别错语法后给出的误判
• 导入ReactDOM时建议遵循官方规范将DOM三个字母大写，虽然自定义变量名写ReactDom也能正常运行，但不符合社区通用写法，后续协作容易引发混淆

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