Deno, TypeScript, ESBuild, WebGL, VSCode

Hello! As the title suggests, I am using these technologies to create a web application:

* Deno
* TypeScript
* ESBuild
* WebGL (which uses .glsl shader files)
* VSCode

My goal is to have a .ts file be able to import a .glsl file as a string, and for there to be no errors or warnings about this in VSCode. This is a very common workflow for frontend development involving WebGL.

My understanding is that I need to create a modules.d.ts file at the root of my project that looks like so:

declare module "*.glsl" {
    const value: string;
    export default value;
}

declare module "*.glsl" {
    const value: string;
    export default value;
}

and then have Deno use it by having deno.json have a line like so:

{
    "compilerOptions": {
        "types": ["modules.d.ts"]
    }
}

{
    "compilerOptions": {
        "types": ["modules.d.ts"]
    }
}

I believe that this is all that should be needed to have any .ts file be able to import any .glsl as a string like so:

import fragmentShaderSource from "./fragmentShader.glsl";
import vertexShaderSource from "./vertexShader.glsl";

import fragmentShaderSource from "./fragmentShader.glsl";
import vertexShaderSource from "./vertexShader.glsl";

It appears that this actually works with ESBuild and the glsl plugin. However, in VSCode I am getting errors on the above import lines like so:

Module '"file:///<root path of my project>/fragmentShader.glsl"' has no default exportModule '"file:///<root path of my project>/fragmentShader.glsl"' has no default export

So what I am doing wrong here, and how can I get VSCode to be happy?

Deno, TypeScript, ESBuild, WebGL, VSCode

declare module "*.glsl" {
    const value: string;
    export default value;
}

declare module "*.glsl" {
    const value: string;
    export default value;
}

and then have Deno use it by having deno.json have a line like so:

{
    "compilerOptions": {
        "types": ["modules.d.ts"]
    }
}

{
    "compilerOptions": {
        "types": ["modules.d.ts"]
    }
}

I believe that this is all that should be needed to have any .ts file be able to import any .glsl as a string like so:

import fragmentShaderSource from "./fragmentShader.glsl";
import vertexShaderSource from "./vertexShader.glsl";

import fragmentShaderSource from "./fragmentShader.glsl";
import vertexShaderSource from "./vertexShader.glsl";

Deno, TypeScript, ESBuild, WebGL, VSCode

Deno, TypeScript, ESBuild, WebGL, VSCode

Continue the conversation

Deno

Continue the conversation

Deno

Similar Threads