I get this error while deploying my NextJS app on firebase:
Uncaught SyntaxError: expected expression, got '<'
for almost all my js files but I also get this warning
The script from “https://eco-club-webpage.web.app/_next/static/tORMu0e4SV7nsrZDBvDI-/_buildManifest.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
I tried solutions suggested on stackoverflow but nothing worked out.
Here is my firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": [
{
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run build"
],
"source": "functions",
"codebase": "default"
}
],
"storage": {
"rules": "storage.rules"
},
"database": {
"rules": "#"
},
"hosting": {
"public": ".next",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/server/pages/index.html"
}
]
},
"emulators": {
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
},
"storage": {
"port": 9199
},
"ui": {
"enabled": true
},
"singleProjectMode": true,
"auth": {
"port": 9099
},
"database": {
"port": 9000
},
"hosting": {
"port": 5000
}
},
"remoteconfig": {
"template": "remoteconfig.template.json"
}
}
My .env.production
# Preview URL
NEXT_PUBLIC_URL=https://eco-club-webpage.web.app/
My .next/server/index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" href="favico.ico" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="EcoClub:site" content="@ccrsxx" />
<meta name="EcoClub:card" content="summary_large_image" />
<title>Eco Club</title>
<meta name="og:title" content="Eco Club" />
<meta
name="description"
content="From breaking news and entertainment to sports and politics, get the full story with all the live commentary."
/>
<meta
name="og:description"
content="From breaking news and entertainment to sports and politics, get the full story with all the live commentary."
/>
<meta property="og:image" content="/home.png" />
<meta name="og:url" content="https://eco-club-webpage.web.app/" />
<meta name="next-head-count" content="12" />
<link
rel="preload"
href="/_next/static/css/a747a3652e5adfc4.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/a747a3652e5adfc4.css"
data-n-g=""
/>
<noscript data-n-css=""></noscript>
<script
defer=""
nomodule=""
src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"
></script>
<script
src="/_next/static/chunks/webpack-3433a2a2d0cf6fb6.js"
defer=""
></script>
<script
src="/_next/static/chunks/framework-9b5d6ec4444c80fa.js"
defer=""
></script>
<script
src="/_next/static/chunks/main-f0e16f48d3775e5e.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/_app-f79b9a9b5046cab6.js"
defer=""
></script>
<script
src="/_next/static/chunks/986-86fabddb1dbcbf61.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/index-7c905bffd6c4c1c9.js"
defer=""
></script>
<script
src="/_next/static/tORMu0e4SV7nsrZDBvDI-/_buildManifest.js"
defer=""
></script>
<script
src="/_next/static/tORMu0e4SV7nsrZDBvDI-/_ssgManifest.js"
defer=""
></script>
</head>
<body>
<div id="__next">
<main class="flex min-h-screen items-center justify-center">
<i><img src="logo192.png" alt="" /></i>
</main>
</div>
<script id="__NEXT_DATA__" type="application/json">
{
"props": { "pageProps": {} },
"page": "/",
"query": {},
"buildId": "tORMu0e4SV7nsrZDBvDI-",
"nextExport": true,
"autoExport": true,
"isFallback": false,
"scriptLoader": []
}
</script>
</body>
</html>
Please ask me any other info you need, I really want to deploy my app. Really disappointed right now, hope someone can help me out. I will be really grateful.