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

Question

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

• run FAST_REFRESH=false npm start (which effectively turns of fast refresh provided by react-refresh)
• create a new React app (npx create-react-app@latest my-react-app --template typescript) and copy the file contents to the new app

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

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

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?

Secant

Have you tried the traditional: delete node_modules, delete package-lock.json, npm install? – Distant

Dammit. That did the trick. I already tried rm -rf node_modules, npm install. But without deletion of package-lock.json. I did not assume that package-lock.json would disturb npm i. Thanks for that hint. Do you have an idea what's wrong then? – Secant

UPDATE: Somehow the colleagues managed to have a relative path in the package-lock.json. We will investigate on this. But I'm still wondering why that influences npm i. – Secant

The clue is that it failed for you and worked for others. So far I've found that's often the solution in such cases but I couldn't say why :) – Distant

Another important step in my scenario was to npm uninstall react-refresh. For some reason it was also specified as dependency for that simple app … Do you mind if I write an answer or do you want to? – Secant

Adding an explicit dependency (+ version) of react-refresh in my package.json file fixed this for me. Specifically using version: "0.11.0" (tried with 0.13.0 and had the same issue). – Paste

Answer 1

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.

Distant

This unblocked me. I had tried just about everything except deleting the package-lock.json. Definitely my fault that I was switching between yarn and npm :P – Kimberli

Answer 2

Running yarn over npm solves the issues. Yarn needs to be installed globally.

With npm: npm install --global yarn or with homebrew: brew install yarn

1. Remove node_modules folder rm -rf node_modules
2. Remove package-lock.json rm package-lock.json
3. Update Storybook npx sb upgrade
4. To re-install packages run yarn
5. To run storybook yarn storybook
6. To run react app yarn start

Armagnac

Answer 3

My suggestion will be to first check for any conflict versions of internal dependencies.

In my case it happened because of react scripts conflict version.

1. Run npm ls react-refresh and it shows a different of react-refresh package versions

2. Run npm dedupe --force to de-duplicate versions

3. Run npm ls react-refresh to check versions of react-refresh

4. Then run npm start successfully.

Iong

Answer 4

For me, the problem was that we have a mono repo and use turbo.

One of our other apps still used react-refresh, while in the app where it crashed, react-refresh was not imported, but I think react-scripts uses it.

There was a conflict between both. Using FAST_REFRESH=false fixed it

Rotator