Mime unsupported type JSX

1

I am getting this error ,

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/jsx”. Strict MIME type checking is enforced for module scripts per HTML spec.

i tried making an .htaccess and importing AddType text/jsx .jsx

2

Hi,

Browser’s can’t utilize JSX files. It sounds like you may need to run a build script to generate production code?

Render Static Sites/Native Runtimes, also doesn’t support .htaccess files.

3

It’s indeed production code , What kind of build script ? “scripts”: {
“dev”: “vite”,
“build”: “vite build”,
“lint”: “eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0”,
“preview”: “vite preview”,
“serve”: “node server.js”
},

4

I’d assume npm run build, which would run vite build.

You’ll know your app better than us, but from that small package.json snippet it appears you would need to run your build script, which often creates a folder of generated files.

The serve script node server.js implies you’re using an http server, maybe Express, so that would need to be configured to serve those generated files from the build and not any original source files that use .jsx directly.

5

I actually tried quite several build scripts

i tried with enviroment CI= npm run build
Also using NPM_FLAGS --legacy–peer-deps

i tried npm install–force && npm run build
everything seems to be building the app correctly - but mime seems to persist ,i even tried transforming jsx to read it as js
app.use(express.static(path.join(__dirname, “”)));

app.use((req, res, next) => {
if (req.url.endsWith(“.jsx”)) {
res.type(“application/javascript”);
}
next();
});

app.get(“*”, (req, res) => {
res.sendFile(path.join(__dirname, “index.html”));
});

6

Debugging your code would be beyond the scope of our support. Other community members may be able to assist further.

However, from what you’ve shared, it appears you may be over-complicating it. JSX/mimetypes is not the issue here, you shouldn’t be serving or referencing those files.

vite by default will build files into a dist folder. So maybe you need to serve the files from dist (or another build folder if you configured it differently) and not serve the source files that reference JSX.

7

I simplified everything , let vanilla build now i am getting
Cannot GET /
used static to my build folder also.

when i use correct static i get mime error…

8

Cannot GET / is Express telling you haven’t configured a root path route (/).

Again, you’ll know your app best, it will be down to you to debug and correct any issues. For example, check logs thoroughly, try running a production build locally, confirm the build destination and code match, etc.

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.