reactjs - Feil i produksjonsbygget med Vite & React: Feil i Uncaught TypeError: _ er ikke en funksjon

Jeg bruker Vite, React, React Router og TypeScript for nettstedet mitt. Jeg har et problem når jeg kjører produksjonsbygget, i utviklingsmodus fungerer alt fint.

Når jeg bruker produksjonsbygget, viser nettleseren min en hvit bakgrunn, og jeg får følgende feil i nettleserkonsollen:

Den øvre linken tar meg til følgende (minifiserte?) kildekode på linje 70:

Så kanskje det har noe å gjøre med React Router?

Men jeg er usikker på hva som nøyaktig forårsaker denne feilen. Derfor vil jeg prøve å gi så mye relevant informasjon som mulig nedenfor.

Mine resultater når jeg kjører 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"]
}

Når jeg bruker npm start fungerer alt som forventet, men hvis jeg bruker npm run build og deretter npm run preview, får jeg feilen nevnt ovenfor, og nettleseren min viser en hvit bakgrunn.

Hva jeg allerede har prøvd

Jeg har allerede prøvd å deaktivere kode-splitting i Vite ved å bruke følgende vite.config.ts:

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

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

Dette hadde imidlertid ingen effekt.

Jeg prøvde å erstatte alle fragmentene mine i React:

<>
    ...
</>

med :

<Fragment>
    ...
<Fragment/>

Men dette hadde heller ingen effekt.

Svar #1

Jeg fant problemet.

@DrewReese pekte meg i riktig retning, og jeg tok faktisk en grundig kikk på den minifiserte koden.

Jeg innså at koden ovenfor handlet om datoformatering og at jeg bruker et bibliotek kalt Day.js.

Jeg løste problemet ved å endre importene mine fra:

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

til :

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

Sidebemerkning:

Day.js ser faktisk ut til å anbefale den første måten å importere biblioteket deres på for oppsettet mitt, som bryter i produksjonsbygget.

Svar #2

Problemet er en Typescript-versjonsproblem. Hvis du bruker vite + react + typescript, må du konvertere appen til create-react-app med Typescript-mal npx create-react-app app-name --template typescript. Deretter må du konvertere vite-konfigurasjonen til react-app-konfigurasjon, som for eksempel miljøinnstillinger.

vite - import.meta.env.VITE_ENV_NAME

cra - process.env.REACT_APP_ENV_NAME

bygg deretter appen og kjør bygget lokalt.

Relaterte artikler