Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Merge has caused error saying I'm attempting to import runtime.js outside of src when the file structure hasn't changed

Ask Question

All of the questions I have seen asked are people deliberately trying to import files from outside of their project. But I have done a merge from one branch to another which has caused no folder structure change and I am getting the error

Compiled with problems:X

ERROR in ./src/App.jsx 1:40-132

Module not found: Error: You attempted to import /Users/johnsmith/Documents/projects/prism/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/.

As you can see from the screenshot below my folder/file structure hasn't changed since doing npx create-react-app.

1: import './App.css';

Why am I getting this issue and are there any commands I can do to fix it?

The way I fixed this was by installing react-refresh. Then doing npm ls react-refresh to see what version was being used across the project. So then because the project/react-scripts etc was using 0.11.0 I had to change react-refresh from "react-refresh": "^0.13.0", to "react-refresh": "^0.11.0", in package.json, delete node_modules and package-lock.json, npm install then after that it all started working again.

Same problem here. There must be something wrong with react-refresh version 0.13.0

We temporally fixed this forcing to install the 0.11.0 version:

npm i -D [email protected]
        

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.