使用react-vite时出现504（过时的优化部门）

Question

我在 Vite 上使用 React 和 JavaScript 时安装了一个名为bigdecimal js的包。编译时，它在控制台上显示以下错误，并且应用程序未加载：

我的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"
  }
}

和 Vite 配置：

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

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

Answer 1

尝试将此代码添加到您的vite.config.js文件中：

import { defineConfig } from "vite";

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

然后删除您的node_modules文件夹并重新安装所有部门。

github vite github issues上正在持续讨论这个问题。

Answer 2

对我来说，它已经帮助刷新禁用缓存的浏览器选项卡。

在 chrome 中是这样，在 mac 上是Shift + Ctrl + F5这样。Shift + Cmd + r

Answer 3

和缓存问题一样，试试

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

Answer 4

尝试：

1. 关闭您的开发服务器
2. 删除node_modules/.vite/目录。如果 Mac/Linux 运行rm -rf node_modules/.vite/
3. 清除包管理器的缓存。如果 npm 运行npm cache clean --force
4. 重新安装依赖项并启动开发服务器，例如。对于 npm 运行npm i && npm run dev

这应该清除缓存并修复它。