reactjscreate-react-appreact-refresh

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


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: Compilation failed.

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 big question mark

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();

My approaches

So far I successfully tried to

Creating 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

What really bothers me

Conclusion

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?


Solution

  • 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:

    1. Delete node_modules
    2. Delete package-lock.json
    3. npm install

    Both node_modules and package-lock are local to the build and can be safely deleted and will be automatically replaced by npm install.