我们目前正在开发一个小应用程序,它只呈现一个外部反应组件(外部的,因为它是npm install
编辑的)。这个应用程序的目的是获取一些JSON配置,并将其作为支柱传递给该组件,以演示它的用法。
这个应用程序是由创建的,它对脚手架应用程序的唯一更改是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.
大问号
我请求支持的原因是:在任何这些文件中都没有明显的“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();
我的方法
到目前为止,我成功地尝试了
react-refresh)
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
真正困扰我的是
ls -la
).上找到特殊的文件属性)。
index.tsx
文件中的import
语句不匹配。因此,我想编译过程中可能有一些注入来启用快速刷新。可以打印这个修改过的文件吗?import
的App
和reportWebVitals
(并相应地更改用法)时,只剩下一个编译错误,抱怨没有找到模块。但是它并没有说出它所指的台词:编译失败。模块未找到:错误:您试图导入位于项目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 clone
和npm cache clean --force
在npm ci
之前。但这不起作用。
有没有人有反应,反应,编译和反应刷新洞察力,能够给出一个提示,如何缩小这个问题?
发布于 2022-02-22 08:18:46
现在的问题是,这个项目在我的同事的机器上编译和运行,而不是在我的机器上运行。
这对我来说是一个重要的因素,我建议的第一个解决办法是:
删除node_modules
node_modules和包锁都是构建的本地版本,可以安全地删除,并将由npm安装自动替换。
发布于 2022-05-29 19:53:39
通过npm运行纱线解决了这些问题。纱线需要在全球安装。
与npm:npm install --global yarn
或与自制:brew install yarn
删除文件夹rm -rf node_modules
rm package-lock.json
npx sb upgrade
yarn
yarn storybook
yarn start
https://stackoverflow.com/questions/71207712
复制相似问题