反应应用程序构建时出现错误：TypeError：无法读取未定义的属性（读取“endsWith”）

Question

我已经浏览了很多与当前错误相关的文章，但找不到解决方案。我收到错误，但是页面刷新后应用程序已加载。猜测当前错误导致在 [Github] 上构建应用程序时出现问题（https://serhii-yunnikov.github.io/ip-address-tracker/）

main.tsx：

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import React from "react";
import App from "./App";
import ReactDOM from "react-dom/client";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>
);

package.json：

{
  "homepage": "https://serhii-yunnikov.github.io/ip-address-tracker/",
  "name": "ip-address-tracker",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "predeploy": "npm-run-build",
    "deploy": "gh-pages -d build",
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tanstack/react-query": "^4.32.6",
    "@tanstack/react-query-devtools": "^4.32.6",
    "classnames": "^2.3.2",
    "esri-leaflet-geocoder": "^3.1.4",
    "leaflet": "^1.9.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-leaflet": "^4.2.1",
    "react-query": "^3.39.3",
    "sass": "^1.64.2"
  },
  "devDependencies": {
    "@types/leaflet": "^1.9.3",
    "@types/node": "^20.4.7",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.46.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "gh-pages": "^6.0.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-eslint": "^1.8.1"
  }
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "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": [{ "padiv": "./tsconfig.node.json" }]
}

index.html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IP ADDRESS TRACKER</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

我尝试清理缓存并安装最新的依赖项 typescript，vite

Answer 1

在一个小时的兔子洞里思考这与 sass 有关之后，结果发现这只是一个 tsconfig.json 配置错误。

改变

padiv

：

"references": [{ "padiv": "./tsconfig.node.json" }]

至

path

:

"references": [{ "path": "./tsconfig.node.json" }]

另外，您的 .env 文件应添加到您的

.gitignore

。

反应应用程序构建时出现错误：TypeError：无法读取未定义的属性（读取“endsWith”）

问题描述投票：0回答：1

1个回答

最新问题

反应应用程序构建时出现错误：TypeError：无法读取未定义的属性（读取“endsWith”）

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1