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

Question

我们目前正在开发一个小型应用程序，它只渲染外部 React 组件（外部，因为它是

npm install

ed）。这个应用程序的目的是获取一些 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

  ) 并将文件内容复制到新应用程序

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

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

  上没有找到特殊的文件属性）。

• 错误消息中的行（第 7 行和第 9 行）与

  import

  文件中的

  index.tsx

  语句不匹配。所以我猜编译过程会进行一些注入以实现快速刷新。是否可以打印这个更改后的文件？

• 有3条错误信息，但只有2条带有行号。当我禁用

  import

  和

  App

  的

  reportWebVitals

  （并相应地更改用法）时，只有一个编译错误仍然抱怨未找到模块。但它没有告诉任何有关它所指的行的信息：

  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 --force

npm ci

。但这没有用。

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

Answer 1

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

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

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

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

Answer 2

在npm 上运行yarn 可以解决这个问题。 Yarn 需要全局安装。

使用 npm：

npm install --global yarn

或使用自制软件：

brew install yarn

1. 删除node_modules文件夹

   rm -rf node_modules

2. 删除 package-lock.json

   rm package-lock.json

3. 更新故事书

   npx sb upgrade

4. 要重新安装软件包，请运行

   yarn

5. 运行故事书

   yarn storybook

6. 运行反应应用程序

   yarn start

Answer 3

我的建议是首先检查内部依赖项是否有任何冲突版本。

就我而言，这是因为反应脚本版本冲突而发生的。

1. 运行

   npm ls react-refresh

   ，它会显示不同的react-refresh包版本

2. 运行

   npm dedupe --force

   以删除重复版本

3. 运行

   npm ls react-refresh

   来检查react-refresh的版本

4. 然后运行 npm start 成功。

Answer 4

对我来说，问题是我们有一个单声道存储库并使用涡轮。

我们的其他应用程序之一仍然使用

react-refresh

，而在崩溃的应用程序中，

react-refresh

未导入，但我认为

react-scripts

使用它。

双方发生了冲突。使用

FAST_REFRESH=false

修复了它