React练习项目添加type:module仍报import语句模块外使用错误

针对你遇到的问题，结合现有配置，给出几个关键修复点：

1. 浏览器端脚本需声明为模块 #

package.json中的"type":"module"仅作用于Node.js环境，浏览器加载转换后的脚本时，必须在HTML的<script>标签里添加type="module"属性：

<script type="module" src="public/scripts/app.js"></script>

你的Babel配置中@babel/preset-env设置了"modules": false，会保留ES模块的import语法，浏览器必须明确识别这是模块文件才能正确解析。

2. 调整Babel模块转换配置 #

如果不需要保留ES模块语法（比如兼容旧浏览器），可以修改.babelrc，将modules设为"commonjs"，让Babel把ES模块转成通用的CommonJS格式：

{ 
  "presets": [
    ["@babel/preset-env", { "modules": "commonjs" }],
    "@babel/preset-react"
  ] 
}

也可以直接移除modules配置项，@babel/preset-env会根据目标环境自动选择合适的模块格式。

3. 补充React/ReactDOM的引入 #

你的app.js缺少React和ReactDOM的引入，会导致运行时错误，需要补充：

import React from 'react';
import ReactDOM from 'react-dom/client'; // React 18+ 写法
// 若使用React 17及以下，替换为：
// import ReactDOM from 'react-dom';

import {AddJob} from './Comps/AddJob.js';
import {JobList} from "./Comps/JobList.js";
import {DoneJobs} from "./Comps/DoneJobs.js";

function App() {
    // 组件内容不变
}

// React 18+ 渲染方式
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// React 17及以下写法：
// ReactDOM.render(<App />, document.getElementById('root'));

4. 清理冗余依赖 #

package.json中同时安装了@babel/preset-env（官方最新版）和babel-preset-env（旧版非官方包），可能引发冲突，执行命令删除旧版：

npm uninstall babel-preset-env

按以上步骤调整后，重新运行npm start编译代码，即可解决模块加载错误。

内容的提问来源于stack exchange，提问作者Samet Yıldırım