首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >由于(不存在)react刷新的导入而导致的编译错误

由于(不存在)react刷新的导入而导致的编译错误
EN

Stack Overflow用户
提问于 2022-02-21 14:09:09
回答 2查看 3.2K关注 0票数 6

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

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

问题是:编译失败。

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

代码语言:javascript
运行
复制
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看起来就像

代码语言:javascript
运行
复制
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) --并将文件内容复制到新的应用程序

中。

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

代码语言:javascript
运行
复制
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行)与index.tsx文件中的import语句不匹配。因此,我想编译过程中可能有一些注入来启用快速刷新。可以打印这个修改过的文件吗?

  • 有三条错误消息,但只有两条带有行号。当我禁用importAppreportWebVitals (并相应地更改用法)时,只剩下一个编译错误,抱怨没有找到模块。但是它并没有说出它所指的台词:

编译失败。模块未找到:错误:您试图导入位于项目src/目录之外的/home/jens/git/technology-consulting/formats/interactive-story/app/node_modules/react-refresh/runtime.js。不支持src/之外的相对导入。您可以将其移动到src/中,也可以从项目的node_modules/向其添加一个符号链接。资产静态/js/bundle.js 1.61 MiB emitted 1相关资产index.html 1.63 KiB发出资产use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules1.oneOf7.use2!./node_modules/resolve-url-loader/index.js??ruleSet1.rules1.oneOf7.use3!./node_modules/sass-loader/dist/cjs.js??ruleSet1.rules1.oneOf7.use4!./src/index.scss 1.2 KiB在./src/index.tsx 1:40-155 KiB中生成错误:KiB:您试图导入/home/newlu介子/KiB/KiBapp/node_modules/react refresh/runtime.js,它位于项目src/目录之外。不支持src/之外的相对导入。您可以将其移动到src/中,也可以从项目的node_modules/向其添加一个符号链接。webpack 5.69.1在3875毫秒中编译了一个错误,没有发现问题。

结论

我不知道为什么会发生这种事。为什么这种情况似乎只发生在Linux上。我已经尝试过rm -rf这个项目,再次git clonenpm cache clean --forcenpm ci之前。但这不起作用。

有没有人有反应,反应,编译和反应刷新洞察力,能够给出一个提示,如何缩小这个问题?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-02-22 08:18:46

现在的问题是,这个项目在我的同事的机器上编译和运行,而不是在我的机器上运行。

这对我来说是一个重要的因素,我建议的第一个解决办法是:

删除node_modules

  • Delete package-lock.json

  • npm

node_modules和包锁都是构建的本地版本,可以安全地删除,并将由npm安装自动替换。

票数 4
EN

Stack Overflow用户

发布于 2022-05-29 19:53:39

通过npm运行纱线解决了这些问题。纱线需要在全球安装。

与npm:npm install --global yarn或与自制:brew install yarn

删除文件夹rm -rf node_modules

  • Remove包-锁. react rm package-lock.json

  • Update Storybook npx sb upgrade

  • To重新安装包运行yarn

  • To运行故事书yarn storybook

  • To运行反应应用程序yarn start
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71207712

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档