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,
  },
});

score 22 · Answer 1 · edited Apr 21 '23 at 14:42

22

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.

edited Apr 21 '23 at 14:42

Philippe Fanaro

6,148
6
38
76

answered Apr 06 '23 at 20:23

Hashira

340
1
6

score 7 · Answer 2 · answered Jun 01 '23 at 07:29

7

same like cache problem , have a try

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

answered Jun 01 '23 at 07:29

宇智波佐助

71
1
2

it worked, thanks for help – Aman Jat Aug 16 '23 at 09:19

score 3 · Answer 3 · answered May 27 '23 at 16:08

3

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.

answered May 27 '23 at 16:08

Mahmoud Adel

53
3

score 3 · Answer 4 · answered Aug 16 '23 at 07:04

3

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.

answered Aug 16 '23 at 07:04

Philipp Serfling

358
2
4

score 2 · Answer 5 · edited Aug 08 '23 at 05:52

2

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

Try to clean your cache and restart.

edited Aug 08 '23 at 05:52

Tomas Vancoillie

3,463
2
29
45

answered Jul 17 '23 at 03:53

Alic Zhang--az

21
2

Link-only answers are discouraged. Please include enough of the solution to ensure it will be meaningful if the link becomes invalid. – DaveL17 Jul 18 '23 at 22:36

score 1 · Answer 6 · answered Aug 10 '23 at 12:44

1

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

answered Aug 10 '23 at 12:44

kevvvvv

65
7

score 1 · Answer 7 · answered Aug 29 '23 at 16:38

Try:

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

This should clear the cache and fix it.

score 0 · Answer 8 · answered Aug 08 '23 at 08:02

0

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 :)

answered Aug 08 '23 at 08:02

Pranavdhar N

81
1
2

score 0 · Answer 9 · answered Aug 16 '23 at 17:51

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);
        },
    };
}

score 0 · Answer 10 · answered Aug 28 '23 at 08:13

0

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

answered Aug 28 '23 at 08:13

Ylaner

1
1

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](/help/how-to-answer). – Community Sep 01 '23 at 06:49

score 0 · Answer 11 · answered Sep 01 '23 at 10:47

0

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.

answered Sep 01 '23 at 10:47

Irfan Ahmad

1
1

504 (Outdated Optimize Dep) while using react-vite

11 Answers11