React app breaks with child compilation and webpack errors

Viewed 174

I just finished the ReactJS.org tutorial and it was functional. Then I added a bunch of comments to explain each block of code, closed down the local server, and went home. When I re-opened it to start tweaking it and trying advanced options, it broke, with several errors (webpack, eslint, child compilation failed...). The only thing that changed was a VS Code update.

The main error seems to be related to webpack, but I don't have a webpack config file, and I'm not using it to my knowledge. I used create-react-app to build the app, and deleted the files in the src/ directory to start from scratch like the tutorial says to do.

Errors: (see image)

  • When doing npm start, it says 1 ERROR in child compilations... in the terminal
  • Must use import to load ES module...
  • Child compilation failed...

Troubleshooting:

  • I removed and re-inserted ESLint config options in package.json
  • I tried npm uninstall eslint
  • Did a git checkout of the previous commit (the finished tutorial) which was functional, but it's broken now
  • Also did an npm ls for reference (see images)

error-screen webpage-errors npm-ls

1 Answers

I have reproduced this problem, but my problem is that I created a project based on create-react-app in the V16.* version of Node, but I ran it with the V12.* version of Node. So when I re-run the 16.* version it will work, hopefully that will help you

Related