如何修复React Refresh导入错误？React项目构建失败求助

Module not found: Error: You attempted to import server/reactweb/node_modules/react-refresh/runtime.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

尝试创建符号链接但无效，以下是相关配置、代码及文件结构：

相关配置与代码 #

package.json #

{
  "name": "acims",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/cli": "^7.22.5",
    "@react-icons/all-files": "^4.1.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "date-fns": "^2.30.0",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-date-range": "^1.4.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.10.1",
    "react-native": "^0.72.1",
    "react-native-calendars": "^1.1299.0",
    "react-native-elements": "^3.4.3",
    "react-native-modal": "^13.0.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "^0.19.6",
    "react-refresh": "^0.14.0",
    "react-router-dom": "^6.14.1",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start ./index.js",
    "build": "react-scripts build ./index.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-syntax-jsx": "^7.22.5",
    "@babel/plugin-transform-react-jsx": "^7.22.5",
    "@babel/preset-env": "^7.22.5",
    "@babel/preset-react": "^7.22.5",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.8.1",
    "file-loader": "^6.2.0",
    "style-loader": "^3.3.3",
    "ts-loader": "^9.4.4",
    "webpack-cli": "^5.1.4"
  }
}

App.js #

import React from 'react';

import WebRoutes from './src/WebRoutes';

export default function App() {
  return React.createElement(WebRoutes, null);
}

根目录index.js #

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  React.createElement(React.StrictMode, null,
    React.createElement(App)
  )
);

reportWebVitals();

WebRoutes.js（原标注为webpack.config.js，系笔误） #

import React from 'react';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import SettingsScreen from './screens/admin/SettingsScreen';
import SignupScreen from './screens/admin/SignupScreen';
import LoginScreen from './screens/auth/LoginScreen';
import ClientsScreen from './screens/contracts/ClientsScreen';
import ContractsScreen from './screens/contracts/ContractsScreen';
import ProspectsScreen from './screens/contracts/ProspectsScreen';
import SplashScreen from './screens/contracts/SplashScreen';
import TimeCardAdminScreen from './screens/time/TimeCardAdminScreen';
import TimeCardEmpScreen from './screens/time/TimeCardEmpScreen';
import MyTasksScreen from './screens/user/MyTasksScreen';


const WebRoutes = () => {
  return (
    <Router>
      <Routes>
        <Route path="/splash" element={<SplashScreen />} />
        <Route path="/" element={<LoginScreen />} />
        <Route path="/signup" element={<SignupScreen />} /> // Add this line
        <Route path="/clients" element={<ClientsScreen />} />
        <Route path="/prospects" element={<ProspectsScreen />} />
        <Route path="/contracts" element={<ContractsScreen />} />
        <Route path="/mytasks" element={<MyTasksScreen />} />
        <Route path="/settings" element={<SettingsScreen />} />
        <Route path="/timecard" element={<TimeCardEmpScreen />} />
        <Route path="/timecardadmin" element={<TimeCardAdminScreen />} />
      </Routes>
    </Router>
  );
};

export default WebRoutes;

文件结构 #

root
 |-build
 |-node_modules
 |-public
    |-index.html
 |-App.js
 |-index.js
 |-package.json
 |-src
    |-assets
    |-components
    |-constants
    |-screens
    |-utils
      |-runtime.js
    |-runtime.js //*测试用，复制了两份*//
    |-WebRoutes.js
  |-App.css
  |-App.js
  |-babel.config.js
  |-index.css
  |-package-lock.json
  |-package.json
  |-webpack.config.js

操作与期望 #

运行npm run build（注：原命令npm start build有误，应为npm run build），期望React应用能正常构建并启动。

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