Web development has come a long way from basic HTML and CSS websites. These days, we have web development libraries that allow for the quick development of dynamic websites that look amazing.

However, there are still a lot of challenges developers face daily. Random bugs and errors can appear at any time, whether from an added package or the framework itself. In this article, we’re talking about errors you might face when using the web-vitals library.

Also read: How to fix ‘Objects are not valid as a react child’ error?

---

Install web-vitals

One of the most obvious reasons why you’re seeing this error is because the web-vitals library isn’t installed. You can install the library by using the following command.

npm install --save-dev web-vitals

Alternatively, if you use Yarn use the following command.

yarn add web-vitals --dev

Now restart your development server and the error should be gone. 

---

Reinitialise your project

If installing express didn’t do the trick, you might have to reinitialise your project to freshen up all the dependencies you’re using. This can be done by deleting the node_modules folder and the package-lock.json file. Just open a terminal, head over to your project’s root folder and run the following commands one at a time.

rm -rf node_modules package-lock.json
npm install

If you get an error saying you don’t have appropriate permissions to carry out these tasks, prefix sudo to both the commands. 

---

Manually add the package

If installing using the package manager isn’t working for you, you can manually install the express package. First, open your package.json file and add the following lines to the dependencies section. 

{
  // ....
  "dependencies": {
    "web-vitals": "^2.1.4" 
    // ....
  },
}

Be sure to check and add the latest version of express in the line (4.18.0 at the time of writing). Once the line is added, open a terminal in the root folder of your project and run this command.

npm install

Also read: React vs Next.js: 3 talking points