reactjs - Vite & React ile üretim derlemesinde hata: Yakalanmamış TypeError: _ bir fonksiyon değil

Web sitem için Vite, React, React Router ve TypeScript kullanıyorum. Üretim derlemesini çalıştırırken bir sorunum var, geliştirme modunda her şey düzgün çalışıyor.

Üretim yapısını kullandığımda tarayıcım beyaz bir arka plan gösteriyor ve tarayıcı konsolumda şu hatayı alıyorum:

Üst bağlantı beni aşağıdaki (sıkıştırılmış mı?) kaynak koduna, 70. satırda götürüyor:

Yani belki bunun React Router ile bir ilgisi vardır?

Ama bu hataya tam olarak neyin sebep olduğunu bilmiyorum. Bu nedenle, aşağıda mümkün olduğunca çok ilgili bilgi vermeye çalışacağım.

npm run build komutunu çalıştırdığımda çıkan sonuçlarım:

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 kullandığımda her şey beklendiği gibi çalışıyor, ancak npm run build ve ardından npm run preview kullandığımda yukarıda belirtilen hatayı alıyorum ve tarayıcım beyaz bir ekran gösteriyor.

Zaten denediğim şey

Vite'de kod bölmeyi devre dışı bırakmayı aşağıdaki vite.config.ts dosyasını kullanarak zaten denedim:

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

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

Ancak bunun hiçbir etkisi olmadı.

React'te tüm parçacıklarımı değiştirmeyi denedim:

<>
    ...
</>

ile :

<Fragment>
    ...
<Fragment/>

Ama bu da hiçbir etki yapmadı.

Cevap #1

Sorunu buldum.

@DrewReese beni doğru yöne yönlendirdi ve aslında minify edilmiş koda iyi bir şekilde baktım.

Yukarıdaki kodun tarih biçimlendirme ile ilgili olduğunu ve Day.js adında bir kütüphane kullandığımı fark ettim.

İthalatlarımı şuradan değiştirerek sorunu çözdüm:

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

için :

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

Yan not:

Day.js aslında kurulumum için kütüphanelerini içe aktarmanın ilk yolunu önermeye benziyor, bu da üretim derlemesinde bozuluyor.

Cevap #2

Sorun TypeScript sürüm sorunudur, eğer vite + react + typescript kullanıyorsanız, uygulamayı TypeScript şablonlu create-react-app'e dönüştürmeniz gerekir npx create-react-app app-name --template typescript, ardından vite yapılandırmasını çevresel ayarlar gibi react uygulama yapılandırmasına dönüştürmeniz gerekir.

vite - import.meta.env.VITE_ENV_NAME

cra - process.env.REACT_APP_ENV_NAME

sonra uygulamayı oluşturun ve oluşturulan sürümü yerel olarak çalıştırın.

İlgili makaleler