Import results in mime type error

Questions
1

Line:

import fs_simple from '../glsl/fs-simple-basic.glsl'

Gives error:

Loading module from “http://localhost/somepath/glsl/fs-simple-basic.glsl” was blocked because of a disallowed MIME type (“application/octet-stream”).

I have checked the permission, they seem to be ok.
I have tried adding a .js at the end of the file like appears to be done in some other places.
I have tried adding brackets around fs_simple.
And googling a lot.

How can I solve this mime type error?

2

If you are not using a build tool like Vite (see vite-plugin-glsl) then you won’t be able to import GLSL files. Without a build tool the GLSL must be in a JavaScript file and exported as a string.

// fs_simple_basic.glsl.js

export const fs_simple = `
// your GLSL here
`;
3 Likes
3

I know it says in the link that the way to install vite-plugin is via npm or yarn.

But is it possible to install it without those?

4

I would advise against importing anything except JavaScript files, if you are trying to develop the application without using npm or build tools.

Personally I find https://vitejs.dev/ to be the best and easiest way to develop web apps right now, but I understand there’s some preference in there. :slight_smile:

5

Yes I convert the glsl files to js, then import them.

But I’m getting an error, later in the file.

Not sure if it’s connected with the glsl import.