React npm start show something in new version

user_17652578 0
Viewed 4764

I found something new output in new version, I don't know what its name.

There are picture below, green text.

After npm start

Previous version only show

Local: http://localhost:3000
On Your Network: http://192.168.1.108:3000
Note that the development build is not optimized.

To create a production build, use npm run build.

New Version show extra thing

assets by chunk 1.5 MiB (name: main)

asset static/js/bundle.js 1.5 MiB [emitted] (name: main) 1 related asset

asset main.aa0b3f79a143f8b72953.hot-update.json 28 bytes [emitted] [immutable] [hmr]

asset index.html 1.67 KiB [emitted]

webpack 5.65.0 compiled successfully in 444 ms

enter image description here

How can I close extra thing, I think that is useful information.

But I do not like it, if I don't need that.

Any way to close it or show it?

reactjs
3 Answers

That's because of react-scripts@5.0.0

If you want to remove that you have to downgrade react-scripts@5.0.0 to react-scripts@4.0.3

For Install react-scripts@4.0.3

npm remove react-scripts
npm install react-scripts@4.0.3

This will solve your problem.

user_139118440

It seems like you are using create-react-app for the project and it uses react-scripts to build and run the web app.

The green outputs are from webpack bundling information. Could you share the npm start command in more details if you don't mind.

react-scripts changelog didn't mention about that and not sure if it's actual bug from react-scripts or not.

user_118125630

Well after a lot of debugging, my suspicion is that there are some webpack compatibility issues with what the create-react-app template implements in its newest versions. I hope that this helps anyone struggling with this issue:

āŒ What is causing the error:

In my package.json file, I was using these packages, which gave the super annoying terminal output described above.

"dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },

āœ… A fix that works for me:

This is the downgraded packages that removed his terminal output noted above. My assumption is that this is a react-scripts issue, but I did update the other dependencies as well to be sure.

"dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "^3.2.0",
    "web-vitals": "^2.1.4",
  },

Hopefully this helps anyone struggling with this too!

user_166103590
Related