Components not rendering. #261
Comments
|
Hey @daviddanielng |
Just the script tag. <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Meta School Info Admin</title>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/svg+xml"
href="/icons/admin-favicon.svg"
sizes="150x150"
/>
<link
rel="apple-touch-icon"
sizes="512x512"
href="/images/admin-app-icon.png"
/>
<meta name="apple-mobile-web-app-title" content="Meta School Info Admin" />
<link rel="manifest" href="/admin.webmanifest" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://api.metaschoolinfo.me" />
<link rel="preconnect" href="https://www.googletagmanager.com" />
<script
crossOrigin="anonymous"
src="//unpkg.com/react-scan/dist/auto.global.js"
/>
<meta name="robots" content="noindex" />
<meta
rel="preload"
href="https://fonts.googleapis.com/css2?family=Fredoka&display=swap"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="#53574f"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="#1a1a1b"
/>
</head>
<body>
<div id="admin-root"></div>
<script type="module" src="/src/adminapp.tsx"></script>
</body>
</html>vite.config.js import { sentryVitePlugin } from "@sentry/vite-plugin";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import dns from "node:dns";
import { resolve } from "path";
import { defineConfig, loadEnv } from "vite";
dns.setDefaultResultOrder("verbatim");
const ReactCompilerConfig = {
/* ... */
};
export default defineConfig(({ mode }) => {
// Load environment variables based on the current mode (development, production, etc.)
const env = loadEnv(mode, process.cwd());
return {
base: "/",
plugins: [
react({
babel: {
plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
},
}),
tailwindcss(),
sentryVitePlugin({
authToken: env.SENTRY_AUTH_TOKEN,
org: "cloudy-curtain",
project: "meta-school-info",
telemetry: false,
}),
],
build: {
sourcemap: false,
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
admin: resolve(__dirname, "admin.html"),
},
},
},
server: {
host: true,
port: Number(env.VITE_PORT),
strictPort: true,
headers: {
"Cross-Origin-Opener-Policy": "same-origin-allows-popups",
},
allowedHosts: ["e0b2-172-166-156-161.ngrok-free.app"],
proxy: {
"/api": {
target: "http://localhost:9060",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
};
});I did set it up with vite, it did not work so i removed it. |
|
Hm ... strange. |
Unfortunately, the project is private I was brought in when one of the devs was fired for neglect. One of devs said the project was created with I could tag one of them, but none of them cares about the project. |
|
No worries ... can you try the setup from the https://github.com/react-scan/react-scan-vite-example? then in you vite config If this works (should works) you can check the Options to make any adjustments if you want |
This triggered an error when used with tailwind CSS. It is tailwind version 4.
|
|
so it works without react-scan? but with react-scan you see this tailwind error? |
I will do that. |
I want to try react scan, it is not working as expected.
The website will show a blank screen and react-scan toggle when i add the script tag, the page will be render when i remove the script tag.
I am using react and vite.
React: 19.0.0
Vite: 6.0.11
When react scan is enabled
when react scan is disabled
And the instruction for vite installation in the dashboard has an error
Cannot find name 'usePathname'. Did you mean 'pathname'?ts(2552)The text was updated successfully, but these errors were encountered: