Question 130119 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Ignore import error for .png files/ files other than js/ts

Esbuild allows importing files like ".png" as base64 code, I do it like so:

const bundle = await esbuild.build({
        write: false, bundle: true,
        entryPoints: ["./game/main.ts"],
        format: 'esm', minify: true,
        loader: { ".png": "base64" }
})

Then, in files that are bundled I write some imports:

import Image from "./image.png"

Thanks to that I can embed images into the code and at the same time keep them in their original form.

It technically works. The problem is editor – Visual Studio Code, doesn’t recognize the files at all and gives me annoying error:

import Image from "./image.png" ❌
💭 Unable to load a local module: "file:///...image.png". 
💭 Please check the file path.deno(no-local)

I tried to add @ts-ignore, @ts-nocheck with no outcomes – I tried to add exclusions in tsconfig:

  • "exclude": ["*.png"]
  • "exclude": ["png.ts"] where png.ts would be script with png imports

No good!

Now I am just keeping this stuff in png.ts and I guess I’ll be trying not to open it too often – then the error rings.

I mean… I can bare it, if not I can just restart editor, but the solution would be awesome

Thank you for reading, hope someone can help 😃

Tags:

2

Answers


  1. 0

    Maybe try adding a .d.ts.

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

    And then include your images instead of excluding them.

    I haven’t tested this, just thinking out loud.

    Login or Signup to reply.
  2. 0

    There’s no way to suppress module-resolution-related diagnostic errors when using the Deno extension as a diagnostic provider in VS Code.

    This is expected and useful behavior because Deno doesn’t support what you’re trying to do: although Deno supports custom ambient types when type-checking, it doesn’t offer customizable module resolution apart from import maps — and (at least currently — as of Deno v1.32.3) there’s no scenario where Deno can resolve an import of an actual PNG file.

    You might ask yourself at this point — does it make sense to use the Deno extension to provide compilation diagnostics for an esbuild module graph?

    I interpret the question to mean that what you really want is to override Deno’s Language Server to imitate the custom content type loader features of esbuild — and, currently, that’s not possible.

    This leaves two workarounds:

    1. Disable the Deno extension for your workspace and create a custom vanilla TypeScript environment with the desired tooling setup — Deno types, ambient types, module resolution, linting, formatting, etc. (Diving into all of these details is far out of scope for any single Stack Overflow answer — this would be several separate questions.)

    2. Use the Deno extension, and configure a custom import map for your workspace which has a mapping for every custom file import specifier to a declaration file describing its exports. This import map should only be used in the workspace to satisfy Deno’s LSP — not during actual compilation with esbuild. I’ll provide a basic example of that below:

    Configure the extension to use a custom import map:

    ./.vscode/settings.json:

    {
  "deno.enable": true,
  "deno.importMap": "./custom_file_import_map.json"
}

    Create an entry for every custom file import specifier that points to a declaration file describing the exports:

    ./custom_file_import_map.json:

    {
  "imports": {
    "./image1.png": "./custom_file_base64_image.d.ts",
    "./image2.png": "./custom_file_base64_image.d.ts"
  }
}

    Create a declaration file for each custom file type — here’s an example for PNG files that will be imported as base64 strings in esbuild:

    ./custom_file_base64_image.d.ts:

    declare const base64Image: string;
export default base64Image;

    After configuration, you will be able to use the custom file specifiers in import statements without complaint (and they’ll have the correct types that you declared), but attempting to import custom files outside of the import map will continue to produce diagnostic errors:

    ./main.ts:

    import Image1 from "./image1.png"; // Ok

import Image2 from "./image2.png"; // Ok

import Image3 from "./image3.png"; /* Error
                   ~~~~~~~~~~~~~~
Unable to load a local module: "file:///Users/deno/so-75953426/image3.png".
  Please check the file path.deno(no-local) */

type TypeofImage1 = typeof Image1;
   //^? type TypeofImage1 = string

    Potentially relevant: denoland/deno#17867

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search