小编Leo*_*eon的帖子

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

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

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

那么也许它与 React Router 有关？

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

我运行时的结果npm run build：

包.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我正在尝试让字体与TypeScript和 一起使用styled-components。

看起来GlobalStyle.ts如下：

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
   @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 300;
     src: url('./fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
     src: local(''),
          url('./fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('./fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
          url('./fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
          url('./fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
          url('./fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
   }

   *{
        color: red;
        font-family: "Roboto";
   }
   `;

export default GlobalStyle;

My …