我们目前正在开发一个小型应用程序，它只呈现一个外部 React 组件（外部因为它是npm installed）。这个应用程序的目的是获取一些 JSON 配置并将其作为 prop 传递给该组件以演示其用法。
这个应用程序是由 create-react-app 创建的，它对脚手架应用程序的唯一更改是 index.tsx 和 App.tsx 文件的内容。好吧，还有两个 JSON 文件添加到 public 目录。
问题：编译失败。
现在的问题是，这个项目在我同事的机器上编译和运行，而不是在我的机器上。之后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();
我的方法
到目前为止，我成功地尝试了
- 运行
FAST_REFRESH=false npm start（这实际上是由 react-refresh 提供的快速刷新） - 创建一个新的 React 应用程序 (
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
npm start
真正困扰我的是什么
两位同事使用 Windows，另一位和我正在运行 Linux（Manjaro 和 Ubuntu）。Windows 工作正常，该问题仅发生在 Linux 上。但到目前为止，我没有发现任何暗示操作系统可能是原因（所有文件都使用 LF 结尾，在 上没有找到特殊文件属性
ls -la）。import错误消息中的行（第 7 行和第 9 行）与文件中的语句不匹配index.tsx。所以我猜编译过程会进行一些注入以实现快速刷新。是否可以打印这个更改的文件？有三个错误消息，但只有两个进位行号。当我禁用and （并相应
import地更改用法）时，只有一个编译错误仍然在抱怨找不到模块。但它没有说明它所指的行：AppreportWebVitalsFailed 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 见解能够给出如何缩小这个问题的提示？