CODEWITHSUNDEEP
node.jsnpmcreate-react-app
Philipp
Philipp

Reputation: 11813

create-react-app seems to cache source files after compilation error

I am working an a React based website which was created using create-react-app. Since several days I am running into a really annoying behavior: When I have a compilation error in my code (not always but often), the error message shown in the browser and in the terminal where I called npm run start does not want to disappear, even after fixing the file. The compilation error remains the same, including the line number etc., even if this line does not exist anymore in the file. The shown excerpt from the source file is clearly the old one. It seems like the source file got "cached" and is not updated anymore.

In order to resolve this, not even restarting npm helps. What I found as a very annoying workaround, is to rename the source file, then restart npm, adjust the references to the new name and then it is working.

I also did a clean checkout of my repository in a different directory, freshly installed the node modules there, but I get the same behavior. I am working on Windows 10.

Searching on the web did not bring up anything related.

Upvotes: 1

Views: 894

Answers (1)

Willow
Willow

Reputation: 1466

I was having this problem too, and it was driving me nuts! I just fixed it so I'll try to describe how I did so.

TLDR; The error message was showing a preview for a different file than the file that was the problem. Check the name of the file referenced at the top of the error message, and run: $touch /path/to/file.

Long version:

I had two files, something like this:

// src/components/know/HomePage.js
import { SomeComponent} from 'components/show';
//...do some stuff!

// src/components/show/index.js
import SomeComponent from './SomeComponent';

export SomeComponent;

The error I was getting showed an old, bad version of src/components/show/index.js. I guess I should have killed my app when I git rebased or something:

src/components/know/HomePage.js
  Line 3:33:  Parse errors in imported module 'components/show': Line 11: Unexpected token

   1 | import SomeComponent from './SomeComponent';
>  2 | <<<<<<< Updated upstream
     |  ^
   3 | =======
   4 | export SomeComponent;

Search for the keywords to learn more about each error.

I kept on trying to re-save src/components/show/index.js, to no avail.

But I finally noticed that the error message title referenced src/components/know/HomePage.js. It was odd, because I hadn't changed that file in a long time, so I didn't think it could possibly be the problem.

However, running $touch src/components/know/HomePage.js fixed my problem!

Hope this helps you too :)

Upvotes: 1

Related Questions