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?

CodePudding user response：

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.

CodePudding user response：

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]