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

Compilation error due to (non-existant) import of react-refresh

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

此应用程序是由 create-react-app 创建的，它对脚手架应用程序的唯一更改是 index.tsx 和 App.tsx 文件的内容。嗯，还有两个JSON文件添加到public目录。

问题：编译失败。

现在的问题是，这个项目在我同事的机器上编译和 运行s 而不是在我的机器上。在 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();

我的方法

到目前为止我已经成功尝试

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

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

真正困扰我的是什么

结论

我不知道为什么会这样。为什么这似乎只发生在 Linux 上。我已经尝试 rm -rf 项目，git clone 再 npm cache clean --force 之前 npm ci。但这没有用。

是否有人对 React、React 编译和 react-refresh 有一定的见解，可以就如何缩小该问题的范围给出提示？

The problem now is, that this project compiles and runs on the machines of my co-workers but not on my machine

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

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

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

运行 yarn over npm 解决了这些问题。 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. 至re-install 个包裹运行yarn
  5. 到运行故事书yarn storybook
  6. 到运行反应应用程序yarn start