我们目前正在开发一个小应用程序，它只呈现一个外部反应组件(外部的，因为它是 npm install 编辑的)。这个应用程序的目的是获取一些JSON配置，并将其作为支柱传递给该组件，以演示它的用法。

这个应用程序是由创建的，它对脚手架应用程序的唯一更改是index.tsx和App.tsx文件的内容。此外，还有两个JSON文件添加到公共目录中。

问题是:编译失败。

现在的问题是，这个项目在我同事的机器上编译和运行，而不是在我的机器上运行。在 npm ci 和 npm start 之后，我得到以下信息：

Failed to compile.
Module not found: Error: You attempted to import /home/newlukai/story/app/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/.
assets by path static/js/*.js 4.81 MiB
  asset static/js/bundle.js 4.8 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.56 KiB [emitted] 1 related asset
asset index.html 1.63 KiB [emitted]
asset asset-manifest.json 458 bytes [emitted]
988 modules
ERROR in ./src/App.tsx 1:40-155
Module not found: Error: You attempted to import /home/newlukai/story/app/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/.
 @ ./src/index.tsx 9:0-28 13:35-38
ERROR in ./src/index.tsx 1:40-155
Module not found: Error: You attempted to import /home/newlukai/story/app/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/.
ERROR in ./src/reportWebVitals.ts 1:40-155
Module not found: Error: You attempted to import /home/newlukai/story/app/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/.
 @ ./src/index.tsx 7:0-48 31:0-15
webpack 5.69.1 compiled with 3 errors in 7225 ms
No issues found.

大问号

我请求支持的原因是:在任何这些文件中都没有明显的“refresh”导入。上面提到的index.tsx看起来就像

import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router} from 'react-router-dom';
import reportWebVitals from './reportWebVitals';
import './index.scss';
import {App} from './App';
ReactDOM.render(
    <React.StrictMode>
        <Router>
            <App />
        </Router>
    </React.StrictMode>,
    document.getElementById('root')
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <bit.ly link hidden due to SO inspection>
reportWebVitals();

我的方法

到目前为止，我成功地尝试了

react-refresh)

• create提供的快速刷新功能--一个新的反应应用程序( npx create-react-app@latest my-react-app --template typescript ) --并将文件内容复制到新的应用程序

中。

创建新目录并执行以下操作无效：

cd newdirectory
cp <project>/package.json .
cp <project>/package-lock.json .
cp <project>/README.md .
cp <project>/tsconfig.json .
cp -r <project>/public .
cp -r <project>/src .
npm ci