Search code examples
reactjsbabeljsbrowser-cacheliveservernpm-live-server

live-server doesn't cache JavaScript code while using live server

My project is React.js/Babel.js based. I have no errors with my code which I'm certain of, but the live server isn't responding to changes made via JavaScript. I made changes to the HTML file, changes take place without any errors. When I make changes to the JavaScript file, they don't.

I tried the following options but the problem remained as is and the browser refuse to show changes on the code:

  1. Stop/Run Live server
  2. Switch browser
  3. Delete Browser Cache
  4. Delete the live server IP Cookies
  5. Disable/Enable Live Server
  6. Uninstall/install Live Server
  7. Install Live-server using NPM
  8. Checked Auditing package dependencies for security vulnerabilities using audit fix
  9. Running Live Server for the public directory where Babel JS and Index.html is stored.
  10. Reset Windows

Here's a Screenshot:

enter image description here

Then I tried running Live Server for the public directory [live-server public] and that showed me the following console result:

enter image description here

Stackoverflow keeps showing this error [Your post appears to contain code that is not properly formatted as code.] therefore I uploaded my code to Codepen [https://codepen.io/abbbas_alhashimi/pen/XWzQaJP]

Please note: There is a console message that isn't displayed in the browser when live-server is running "test". I tried changing string values as well, but the browser keeps showing the old version of the code.

I hope, I have given you all the information required to help me solve this issue.

Thank you in advance

Solution

  • I solved it!

    You Need to make sure that Babel Presets are properly installed and compiling JSX with Babel into JavaScript. You could use the following script to clarify the requested compilation files, the output, and the presets. babel src/app.js --out-file=public/scripts/app.js --presets=env,react. Once the server is running and compiling, you should let the server actively compile JSX and all your changes will take place without any further complications. This can be done by adding --watch at the end of the last command to look like this: babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch.

    I hope my someone will find my solution helpful.