SolidJS•4mo ago

Ideas what could cause static assets from failing to import?

import testImg from './test.png';

import testImg from './test.png';

fails with

`Cannot find module './test.png' or its corresponding type declarations.

This with "solid-js": "^1.8.17", and "@solidjs/start": "^1.0.0",. If I create a new project with npm create solid I can import the test img, trying to pinpoint what could cause my project to fail importing it. app.config.ts:

import { defineConfig } from "@solidjs/start/config";
import suidPlugin from '@suid/vite-plugin';
import type { PluginOption } from "vite";

export default defineConfig({
  ssr: false,
  server: {
    static: true,
    preset: "static"
  },
  vite: {
    plugins: [suidPlugin() as PluginOption],
  },
});

import { defineConfig } from "@solidjs/start/config";
import suidPlugin from '@suid/vite-plugin';
import type { PluginOption } from "vite";

export default defineConfig({
  ssr: false,
  server: {
    static: true,
    preset: "static"
  },
  vite: {
    plugins: [suidPlugin() as PluginOption],
  },
});

5 Replies

Bersaelor•4mo ago

i tried this a while ago, couldn't get it to work, then and just used the public folder. But now I figured it's actually nice to be able to import assets

Bersaelor•4mo ago

turns out image actually imports correctly, just VSCode shows this error. Curious, I have another window with the npm create solid base project open and there is no error in VSCode there

Tommypop•4mo ago

Seems like a tsconfig issue. Are the configs the same in both projects?

Bersaelor•4mo ago

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "bundler",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "jsx": "preserve",
        "jsxImportSource": "solid-js",
        "allowJs": true,
        "strict": true,
        "noEmit": true,
        "types": ["vinxi/client", "node"],
        "isolatedModules": true,
        "paths": {
      "~/*": ["./src/*"]
    }
    }
}

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "bundler",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "jsx": "preserve",
        "jsxImportSource": "solid-js",
        "allowJs": true,
        "strict": true,
        "noEmit": true,
        "types": ["vinxi/client", "node"],
        "isolatedModules": true,
        "paths": {
      "~/*": ["./src/*"]
    }
    }
}

I thought i checked that it's identical to the default tsconfig.json

Tommypop•4mo ago

Maybe add vite types So add vite as a dev dep and add vite/client to the types field of the tsconfig (This is because vite includes types for handling the imports of *.png and i think vinxi doesn't re-export vite types correctly sometimes)

Gaming

Programming

Ideas what could cause static assets from failing to import?