javascript - 504 (Outdated Optimize Dep) while using react-vite - Stack Overflow

admin管理员组

文章数量:1131211

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";

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

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

• javascript
• reactjs
• vite
• bigdecimal

Share Improve this question Follow edited Apr 26, 2023 at 15:48 Mark Rotteveel 109k226226 gold badges155155 silver badges218218 bronze badges asked Mar 30, 2023 at 2:48 Vedant ShahVedant Shah 1,33622 gold badges1010 silver badges2020 bronze badges 1

• Just restart the command prompt and re-run your application – Cedric Ipkiss Commented Sep 11, 2024 at 13:26

Add a comment  | 

23 Answers 23

Sorted by: Reset to default 96

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.

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.

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.

same like cache problem , have a try

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

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.

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

Try to clean your cache and restart.

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.

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.

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

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

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.

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

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

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

Just add

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

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

just do:

rm -rf node_modules/.vite/
yarn dev

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

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

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.

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

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"
  },
}

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"
    ],
  },
}

I could reproduce the problem using a long folder path (nested folders). When I reduced the path the problem has gone.

本文标签： javascript504 (Outdated Optimize Dep) while using reactviteStack Overflow