使用 Vite 和 React 进行生产构建时出错：Uncaught TypeError 中的错误：_ 不是函数

Question

我的网站使用 Vite、React、React Router 和 TypeScript。 我在运行生产构建时遇到问题，在开发模式下一切正常。

使用生产版本时，我的浏览器显示白色背景，并且我在浏览器控制台中收到以下错误：

上面的链接将我带到第 70 行中的以下（缩小的？）源代码：

那么这可能与 React Router 有关吗？

但我不确定到底是什么导致了这个错误。 因此，我将尽力在下面提供尽可能多的相关信息。

我跑步时的结果

npm run build

:

package.json：

{
    "name": "frontend",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "start": "vite",
        "build": "tsc && vite build",
        "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview",
        "test": "jest"
    },
    "dependencies": {
        "@faker-js/faker": "^8.0.2",
        "@vitejs/plugin-react": "^4.0.3",
        "axios": "^1.4.0",
        "chart.js": "^4.3.0",
        "daisyui": "^3.1.7",
        "dayjs": "^1.11.9",
        "i18next": "^23.2.7",
        "i18next-browser-languagedetector": "^7.1.0",
        "lucide-react": "^0.258.0",
        "react": "^18.2.0",
        "react-chartjs-2": "^5.2.0",
        "react-dom": "^18.2.0",
        "react-i18next": "^13.0.1",
        "react-router-dom": "^6.14.2",
        "vite": "^4.4.6"
    },
    "devDependencies": {
        "@tailwindcss/typography": "^0.5.9",
        "@types/axios": "^0.14.0",
        "@types/node": "^20.1.1",
        "@types/react": "^18.0.28",
        "@types/react-dom": "^18.0.11",
        "@typescript-eslint/eslint-plugin": "^5.57.1",
        "@typescript-eslint/parser": "^5.57.1",
        "autoprefixer": "^10.4.14",
        "eslint": "^8.2.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-prettier": "^8.8.0",
        "eslint-plugin-import": "^2.25.3",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.28.0",
        "eslint-plugin-react-hooks": "^4.3.0",
        "eslint-plugin-react-refresh": "^0.3.4",
        "jest": "^29.5.0",
        "postcss": "^8.4.23",
        "prettier": "^2.8.8",
        "prettier-plugin-tailwindcss": "^0.2.8",
        "tailwindcss": "^3.3.2",
        "typescript": "^5.0.2"
    }
}

vite.config.ts：

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

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

tsconfig.json：

{
    "compilerOptions": {
        "target": "ESNext",
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json：

{
    "compilerOptions": {
        "composite": true,
        "skipLibCheck": true,
        "module": "ESNext",
        "moduleResolution": "bundler",
        "allowSyntheticDefaultImports": true
    },
    "include": ["vite.config.ts"]
}

当使用

npm start

时，一切都会按预期工作，但如果我使用

npm run build

然后使用

npm run preview

，我会收到上述错误，并且我的浏览器显示白色背景。

我已经尝试过的

我已经尝试使用以下 vite.config.ts 禁用 Vite 中的代码分割：

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    build: {
        rollupOptions: {
            output: {
                manualChunks: {},
            },
        },
    },
});

但这并没有任何效果。

我尝试替换掉 React 中的所有片段：

<>
    ...
</>

与：

<Fragment>
    ...
<Fragment/>

但这也没有任何效果。

Answer 1

我发现问题了。

@DrewReese 为我指明了正确的方向，我实际上仔细查看了缩小后的代码。

我意识到上面的代码是关于日期格式的，并且我使用了一个名为 Day.js 的库。

我通过更改导入来解决问题：

import * as dayjs from "dayjs";
import * as customParseFormat from "dayjs/plugin/customParseFormat";

至：

import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";

旁注：

Day.js 实际上似乎推荐为我的设置导入其库的第一种方法，这会破坏生产构建。

Answer 2

问题是 typescript 版本问题，如果您使用 vite + React + Typescript 那么您需要将应用程序转换为带有 typescript 模板的 create-react-app (npx create-react-app app-name --template typescript) 然后您需要将 vite 配置转换为响应应用程序配置，如 env 设置。

vite - import.meta.env.VITE_ENV_NAME

cra - process.env.REACT_APP_ENV_NAME

然后构建应用程序并在本地运行构建。