504 (Outdated Optimize Dep) while using react-vite

Question

I installed a package called big decimal js while using React with JavaScript on Vite. On compiling, it showed the following error on the console, and the application did not load:

My package.json:

{
  "name": "settleup",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/material": "^5.11.14",
    "dayjs": "^1.11.7",
    "firebase": "^9.18.0",
    "js-big-decimal": "^1.4.1",
    "numeral": "^2.0.6",
    "react": "^18.2.0",
    "react-datepicker": "^4.11.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.8",
    "react-icons": "^4.8.0",
    "react-router-dom": "^5.3.4",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.2.0"
  }
}

and Vite config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 8000,
  },
});

Threesome

Answer 1

For me it already helped to refresh the browser tab with disabled cache.

In chrome it is Shift + Ctrl + F5 or Shift + Cmd + r on mac.

Sunderance

Much better than reinstalling vite every time it happens... – Ugly

Awesome, saved me a lot of headache! – Fridell

This helped cue me in to just stopping and restarting Vite which fixed it (for me it was a MUI icon that didn't show up as I ran npm install <the icons package> while vite was still running. – Zwickau

Answer 2

Try adding this code to your vite.config.js file:

import { defineConfig } from "vite";

export default defineConfig({
  ...
  optimizeDeps: {
    exclude: ['js-big-decimal']
  }
});

then delete your node_modules folder and reinstalled all your deps.

There's an ongoing discussion on this issue on github vite github issue.

Physiotherapy

yes!! optimizeDeps.exclude was the answer for me!! thank you! for future internet sleuths, I'm using tesseract-wasm with vite! – Ton

Answer 3

Try:

1. Shut down your development server
2. Remove node_modules/.vite/ directory. If Mac/Linux run rm -rf node_modules/.vite/
3. Clear the package manager's cache. If npm run npm cache clean --force
4. Reinstall dependencies and start the development server eg. for npm run npm i && npm run dev

This should clear the cache and fix it.

Zane

Well done it worked for me. – Mauro

rm -rf node_modules/.vite/ is the magic sauce for me - npm run dev --force alone was not enough 👍 – Candent

Answer 4

same like cache problem , have a try

"scripts": {
+    "dev": "vite --force",
   "build": "vite build",
   "preview": "vite preview"
 },

Sancho

sorry, which file in my vite is this? – Nat

@hlin03 this should be in your package.json – Thermotherapy

I don't how the issue came from but doing this solved the problem for me. Thanks a lot ! – Tenotomy

Answer 5

I faced this issue and I resolved it by stopping application via terminal then rerun it again.

This issue came to me when I had installed bootstrap and react-bootstrap packages, then I uninstalled them and installed mui package instead.

Ultravirus

Answer 6

It maybe a cache problem. check this: https://vitejs.dev/guide/dep-pre-bundling.html#browser-cache

Try to clean your cache and restart.

Enemy

Link-only answers are discouraged. Please include enough of the solution to ensure it will be meaningful if the link becomes invalid. – Rasp

Answer 7

To expand on the other answer, if cleaning the vite cache doesn't help try temporarily disabling the cache in the browser. In Chrome press F12, choose network tab and select the Disable cache checkbox.

Semblable

Answer 8

I faced the same issue, I tried stopping and restarting the app using npm run dev. That worked for me. I had installed sweetalert2 in my react app while running the app opening another terminal.

Breadthways

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Pierrepierrepont

This was actually helpful for me. Stopping and restarting the vite server made the error to go away. – Ounce

Answer 9

I solved this by deleting the vite cache in node_modules (the .vite folder), in a project that I coudlnt do changes, however the top answer seems to be the more longterm solution

Fielder

Answer 10

Just delete node_modules folder. then type npm i in the terminal again

Nashville

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Naturally

Answer 11

At Angular 17, I solved that by removing .vite folder inside of .angular folder in the root of the project.

Natalienatalina

Answer 12

https://github.com/vitejs/vite/issues/5310#issuecomment-949349291 This solved the issue for me on arch-based distro:

On Manjaro Linux (Arch-based), I was able to solve it by adding the following line to both /etc/systemd/system.conf and /etc/systemd/user.conf file:

DefaultLimitNOFILE=65536

Caracas

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Brathwaite

@RamChander I've literally posted the answer from the link in quotation, what do you even mean? – Caracas

Answer 13

Just add

optimizeDeps: {
    exclude: ['js-big-decimal']
  }

In your vite.config.js file and it will work perfectly.

Colophon

Answer 14

Try adding this code to your vite.config.js file:

import { defineConfig } from "vite"

export default defineConfig({
optimizeDeps:{
    exclude: ['blip-ds/loader']
   },
})

then reinstalled all your deps and run agian.

Barboza

The difference is in the specific dependency being excluded. @Hashira's answer excludes js-big-decimal, while mine excludes blip-ds/loader. Both approaches aim to prevent certain dependencies from being pre-bundled by Vite. In my case, excluding blip-ds/loader resolved the issue I was facing. – Barboza

Thanks for adding details. I see it now. I will delete my comment. Thanks – Electrocardiogram

Answer 15

Clear Vite's Cache: Sometimes, the problem can be resolved by clearing Vite's optimizer cache. You can do this by deleting the node_modules/.vite directory. Vite will recreate this directory with fresh data the next time you run your project.
its working for me

Detection

Answer 16

This is the problem with cache. Clean your cache using yarn cache clean or npm cache clean –force and try running it again. Or else you can simply delete the node_modules folder and run it again. It worked for me :)

Tanyatanzania

Answer 17

Using below code worked for me. Reference

import type { Plugin } from "vite";
import fs from "fs";
import path from "path";


export default defineConfig({
  plugins: [ reactVirtualized() ], // add
}

const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`;
export function reactVirtualized(): Plugin {
    return {
        name: "flat:react-virtualized",
        // Note: we cannot use the `transform` hook here
        //       because libraries are pre-bundled in vite directly,
        //       plugins aren't able to hack that step currently.
        //       so instead we manually edit the file in node_modules.
        //       all we need is to find the timing before pre-bundling.
        configResolved() {
            const file = require
                .resolve("react-virtualized")
                .replace(
                    path.join("dist", "commonjs", "index.js"),
                    path.join("dist", "es", "WindowScroller", "utils", "onScroll.js"),
                );
            const code = fs.readFileSync(file, "utf-8");
            const modified = code.replace(WRONG_CODE, "");
            fs.writeFileSync(file, modified);
        },
    };
}

Snip

Answer 18

I encountered a similar issue. I won't delve into the solution as it's already been discussed. Instead, I'll address what I believe is the underlying cause.

I faced this while running a web project in Docker, with a volume mounted to the folder containing the source code.

Although most of the internal folders belong to my user account, which is conveniently mapped to the Docker user, an error in my startup script caused the 'node_modules' and 'build' folders to be owned by the root. This led to issues when Vite tried to write assets to these folders during execution.

Ultimately, I didn't delete or recreate the 'node_modules' folder. I simply changed its ownership to my user, and everything started functioning correctly.

Now, to address the root cause, I intend to change the startup script to avoid this situation in the future by running npm commands with my user account instead of root, or, maybe, change ownership after creation.

Proboscidean

Answer 19

This happens because you install a dependency while the server was running. Restarting the server solved the problem for me.

Bombay

Answer 20

For me this error was ocurring because I was using a different version of node.

• I was in Node v16
• The project was in Node v18

Note: to not forget about the engines config in package.json

{
  "engines": {
    "node": ">=18"
  },
}

Abdulabdulla

Answer 21

This warmup ensures a critical library is pre-loaded to avoid delays when using its hooks on initial page load.

server: {
  warmup: {
    clientFiles: [
      "./app/entry.client.tsx",
      "./app/root.tsx",
      "./app/routes/**/*.tsx"
    ],
  },
}

Pepper