We are currently working on a tiny app which just renders an external React component (external since it's npm installed). The purpose of this app is to just fetch some JSON configuration and pass that as prop to that component to demonstrate its usage.
This app was created by create-react-app and its only changes to the scaffolded app are the contents of the index.tsx and App.tsx files. Well, there are also two JSON files added to the public directory.
The problem now is, that this project compiles and runs on the machines of my co-workers but not on my machine. After npm ci and npm start I get the following:
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.
The reason why I'm asking for support is: there is no explicit import of "react-refresh" in any of those files. The mentioned index.tsx looks like
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();
So far I successfully tried to
FAST_REFRESH=false npm start (which effectively turns of fast refresh provided by react-refresh)npx create-react-app@latest my-react-app --template typescript) and copy the file contents to the new appCreating a new directory and executing the following did not work:
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
Two co-workers use Windows, another one and me are running Linux (Manjaro and Ubuntu). Windows works fine, the problem only occurs on Linux. But so far I did not find any hint that the OS might be the reason (all files use LF endings, no special file attributes found on ls -la).
The lines in the error message (lines 7 and 9) don't match import statements in the index.tsx file. So I guess there is some injection done by the compilation process to enable fast refresh. Is it possible to print this changed file?
There are three error messages, but only two carry line numbers. When I disable the imports of App and reportWebVitals (and change the usages accordingly) only one compilation error remains complaining about the not found module. But it does not tell anything about the line it refers to:
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.
I don't have any clue why this happens. And why this seem to happen on Linux only. I tried already to rm -rf the project, git clone it again and npm cache clean --force before npm ci. But that did not work.
Is there anybody with some React, React compilation and react-refresh insights able to give a hint on how to narrow that issue down?
The problem now is, that this project compiles and runs on the machines of my co-workers but not on my machine
This jumps out to me as a significant factor, to which the first solution I suggest is:
Both node_modules and package-lock are local to the build and can be safely deleted and will be automatically replaced by npm install.