I have already looked through many articles related to the current error and can't find the solution. I got errorlocalhost, but after page refresh the application has been loaded. Guess current error caused problem with app building on [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>
I tried to clean the cache and install latest dependencies typescript, vite
After going down a rabbit hole for an hour thinking it had something to do with sass, it turns out it's just a tsconfig.json configuration error.
Change padiv:
"references": [{ "padiv": "./tsconfig.node.json" }]
to path:
"references": [{ "path": "./tsconfig.node.json" }]
On a separate note, your .env file should be added to your .gitignore.