CODEWITHSUNDEEP
javascriptreactjsvitebigdecimal
Vedant Shah
Vedant Shah

Reputation: 1416

504 (Outdated Optimize Dep) while using react-vite

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:

enter image description here

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

Upvotes: 94

Views: 153962

Answers (25)

Nwokolo matthew
Nwokolo matthew

Reputation: 1

Just delete the node_modules and install it again it works

Upvotes: 0

cody mikol
cody mikol

Reputation: 852

This can also occur if you are running multiple vite projects within the same directory.

By default vite stores its cache in ./node_modules/.vite if you have two projects running on different dev servers as soon as they try to access a shared resource in this cache, it will fail with the unoptimized dependency error

To handle this, make sure each vite configuration specifies a unique cacheDir

// Project A

defineConfig() => {
 return {
   ...
   cacheDir: './node_modules/.vite_project_a',
 }
}

// Project B

defineConfig() => {
 return {
   ...
   cacheDir: './node_modules/.vite_project_b',
 }
}

Upvotes: 0

Rafael
Rafael

Reputation: 974

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

Upvotes: 0

ahmnouira
ahmnouira

Reputation: 3491

just do:

rm -rf node_modules/.vite/
yarn dev

Upvotes: 1

Fathallah Anass
Fathallah Anass

Reputation: 41

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

Upvotes: 4

zamil
zamil

Reputation: 31

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.

Upvotes: 3

Akash Dev
Akash Dev

Reputation: 257

Just add

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

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

Upvotes: 1

Ali Sardari
Ali Sardari

Reputation: 379

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

Upvotes: 0

darklight81
darklight81

Reputation: 23

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

Upvotes: 1

Alex String
Alex String

Reputation: 1

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

Upvotes: 0

Patel Divyesh
Patel Divyesh

Reputation: 1

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

Upvotes: 0

Écio Silva
Écio Silva

Reputation: 142

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

Upvotes: 1

AlexDev
AlexDev

Reputation: 4727

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.

Upvotes: 4

sergio0983
sergio0983

Reputation: 1288

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.

Upvotes: 0

Irfan Ahmad
Irfan Ahmad

Reputation: 49

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.

Upvotes: 2

StarFruit Raven
StarFruit Raven

Reputation: 441

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.

Upvotes: 44

Ylaner
Ylaner

Reputation: 19

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

Upvotes: 1

L ' Labradon
L ' Labradon

Reputation: 61

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

Upvotes: 0

Philipp Serfling
Philipp Serfling

Reputation: 1366

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.

Upvotes: 102

kevvvvv
kevvvvv

Reputation: 75

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

Upvotes: 2

Pranavdhar N
Pranavdhar N

Reputation: 181

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

Upvotes: 0

Alic Zhang--az
Alic Zhang--az

Reputation: 41

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

Try to clean your cache and restart.

Upvotes: 4

宇智波佐助
宇智波佐助

Reputation: 221

same like cache problem , have a try

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

Upvotes: 22

Mahmoud Adel
Mahmoud Adel

Reputation: 113

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.

Upvotes: 9

Hashira
Hashira

Reputation: 1211

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.

Upvotes: 94

Related Questions