由于（不存在）导入react-refresh而导致编译错误

Question

我们目前正在开发一个小型应用程序，它只渲染外部 React 组件（因为它是外部npm install组件）。此应用程序的目的是获取一些 JSON 配置并将其作为 prop 传递给该组件以演示其用法。

该应用程序是由 create-react-app 创建的，它对脚手架应用程序的唯一更改是 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.

大大的问号

我请求支持的原因是：在任何这些文件中都没有显式导入“react-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();

我的方法

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

• run FAST_REFRESH=false npm start（有效地关闭由react-refresh提供的快速刷新）
• 创建一个新的 React 应用程序 ( npx create-react-app@latest my-react-app --template typescript) 并将文件内容复制到新应用程序

创建新目录并执行以下命令不起作用：

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.

真正困扰我的是

• 两名同事使用 Windows，另一名同事和我正在运行 Linux（Manjaro 和 Ubuntu）。Windows 工作正常，问题仅出现在 Linux 上。但到目前为止，我没有发现任何提示操作系统可能是原因（所有文件都使用 LF 结尾，在 上没有找到特殊的文件属性ls -la）。

• import错误消息中的行（第 7 行和第 9 行）与文件中的语句不匹配index.tsx。所以我猜编译过程会进行一些注入以实现快速刷新。是否可以打印这个更改后的文件？

• 有 3 条错误消息，但只有 2 条带有行号。当我禁用andimport的 s （并相应地更改用法）时，只有一个编译错误仍然抱怨未找到模块。但它没有告诉任何有关它所指的行的信息：AppreportWebVitals

  Failed to compile.
  
  Module not found: Error: You attempted to import /home/jens/git/technology-consulting/formats/interactive-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/.
  asset static/js/bundle.js 1.61 MiB [emitted] (name: main) 1 related asset
  asset index.html 1.63 KiB [emitted]
  asset asset-manifest.json 190 bytes [emitted]
  runtime modules 28.2 KiB 13 modules
  modules by path ./node_modules/ 1.48 MiB 124 modules
  modules by path ./src/ 6.36 KiB
    ./src/index.tsx 2.1 KiB [built] [code generated]
    ./src/index.scss 3.05 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss 1.2 KiB [built] [code generated]
  
  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/.
  
  webpack 5.69.1 compiled with 1 error in 3875 ms
  No issues found.
  

结论

我不知道为什么会发生这种情况。以及为什么这似乎只发生在 Linux 上。我已经尝试过rm -rf这个项目，之前git clone又尝试过。但这没有用。npm cache clean --forcenpm ci

有没有人有一些 React、React 编译和 React-refresh 见解，能够给出如何缩小问题范围的提示？

Answer 1

现在的问题是，这个项目可以在我同事的机器上编译并运行，但不能在我的机器上编译和运行

这对我来说是一个重要因素，我建议的第一个解决方案是：

1. 删除node_modules
2. 删除package-lock.json
3. npm 安装

node_modules 和 package-lock 都是构建本地的，可以安全删除，并将自动由 npm install 替换。