如何解决ES6模块语法引发的“找不到模块”及import语句报错问题？

终端启动错误 #

执行npm start时，终端抛出错误：

Cannot find module 'C:\Users\55319\Desktop\my-first-website\my-app\index.js'

GitHub Pages页面加载错误 #

页面无法正常显示，浏览器控制台报错：

Uncaught SyntaxError: Cannot use import statement outside a module

已尝试的无效操作 #

• 在HTML文件中添加了<script type="module" src="../index.js"></script>
• 安装了Babel，但问题仍未解决

项目入口文件index.js代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './src/index.css';
import App from './src/App.js';
import reportWebVitals from './src/reportWebVitals.js';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


reportWebVitals();

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