The tag that is on the page is pointing to a resource that isn’t a real .js file (e.g., a CSS file, an HTML error page, or a 404 page).
The tag is sitting inside a broken DOM tree (e.g. an un‑closed `
Second heading
b) Load CSS correctly
Inline CSS – use exactly as you did:
External CSS – use a tag so the browser knows it’s CSS:
c) Load JavaScript correctly
If you don’t need any external JS, delete the empty tags at the bottom.
If you do need an external JS file, make sure the tag points to a real.js file and that the server is sending Content‑Type: application/javascript.
If you’re using ES‑modules (e.g., bundlers that output `.mjs` files), set the type:
d) Verify the server’s MIME type
If you’re using a development server (Express, `npm start`, Vite dev server, etc.), make sure it serves `.js` files with the proper MIME type. Some servers will return `text/html` for unknown extensions or mis‑configured routes.
Node/Express – ensure you have a static middleware that serves /public/js/*.js with application/javascript.
Vite/Parcel/webpack dev server – check the dev‑server config; you normally don’t need to tweak this, but a typo in your import path can cause the dev server to proxy to the HTML index page.
e) Re‑validate
After making the above changes:
Clear your browser cache or do a hard reload (Ctrl+F5).
Re‑open DevTools → Console – the “unexpected token '
In the Network tab, the JS request should now return a small file that starts with function, var, export, etc., and not with .
---
4. Bonus: Common “CSS‑as‑JS” pitfalls in single‑page app bundlers
If you are using a bundler that automatically inlines CSS into JS bundles, make sure:
CSS loaders (e.g., style-loader, css-loader) are only applied to .css files, not to .js modules.
In Vite, a typical vite.config.js will contain something like:
js
import { defineConfig } from 'vite';
export default defineConfig({
});
If you accidentally added a CSS file to a `js` import (`import './style.css'` in a JS module), Vite will transform it into a JS module that injects a `
No comments yet. Be the first to comment!