Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg".

[rosdi]

Hi,

I cloned the Razor Pages example and changed it into React project. Then I import an image into my React component like so:

import profileImage from "../small-profile.jpg"

I couldn't get this image to be displayed in browser, in console log I can see this error:

Expected a JavaScript module script but the server responded with a MIME type of "image/jpeg". Strict MIME type checking is enforced for module scripts per HTML spec.

If I run this project in Release mode, the image gets resolved correctly and displayed in the browser, so there must be some configuration related to the Vite dev server.

Any clue what I did wrong?

[rosdi]

The middleware will proxy all requests to the Vite Development Server. You won't need alternative paths for images or other resources from your public assets.

From the doc, I guess what it is saying is all images must be in public folder? Can anyone confirm? Any other way to make this work without putting all images into public folder?

[Eptagone]

Hello @rosdi. You don't need to use the vite public folder. You can still using your wwwroot as usual if you want.

About your first problem. Hmm, I think there's a problem in the examples with the configuration of vite.config.ts or tsconfig.json because according of the Vite Official Documentation. It says:

TypeScript, by default, does not recognize static asset imports as valid modules. To fix this, include vite/client.

[mattwcole]

I haven't been able to get around this problem. I'm creating the react app with npm create vite@latest. It runs fine, even if I change the root in vite.config.ts and move the source code into a subdirectory. When integrating the same app with Razor pages however, the page errors with the above unless the SVG imports are removed. Adding "types": ["vite/client"] to the tsconfig.json compiler options has no impact.

[mattwcole]

It looks like this might be because the Vite dev server responds differently due to the import query parameter.

[Eptagone]

It's working now. Thanks @mattwcole