🧩 Plasmo Developers•2mo ago

Svelte imports not working

Not even really sure whats going wrong Ive spent hours on this issue. For some reason when importing either ui elements or libraries with svelte no matter what I do its giving me issues. Examples would be: Cannot load file './index' from module 'bits-ui' Failed to resolve '$lib/components/ui/card' from './src/contents/FloatingPanel.svelte' Failed to resolve 'bits-ui' from './src/lib/components/ui/button/button.svelte' VS code doesn't give me any errors in fact when I highlight over it it shows me the correct filepath. Along with that if I run pnpx svelte-check I get "svelte-check found 0 errors and 0 warnings." Here is some relevent files:

2 Replies

HexOP•2mo ago

tsconfig.json

 {
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./src/**/*.ts", "./src/**/*.svelte"],
  "compilerOptions": {
    "baseUrl": ".",
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "paths": {
      "$lib": ["./src/lib"],
      "$lib/*": ["./src/lib/*"]
    },
    "types": ["svelte", "chrome"]
  }
}

 {
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./src/**/*.ts", "./src/**/*.svelte"],
  "compilerOptions": {
    "baseUrl": ".",
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "paths": {
      "$lib": ["./src/lib"],
      "$lib/*": ["./src/lib/*"]
    },
    "types": ["svelte", "chrome"]
  }
}

Components.json

 
{
    "$schema": "https://shadcn-svelte.com/schema.json",
    "style": "default",
    "tailwind": {
        "config": "tailwind.config.js",
        "css": "src/app.pcss",
        "baseColor": "slate"
    },
    "aliases": {
        "components": "src/lib/components",
        "utils": "src/lib/utils"
    },
    "typescript": true
}

 
{
    "$schema": "https://shadcn-svelte.com/schema.json",
    "style": "default",
    "tailwind": {
        "config": "tailwind.config.js",
        "css": "src/app.pcss",
        "baseColor": "slate"
    },
    "aliases": {
        "components": "src/lib/components",
        "utils": "src/lib/utils"
    },
    "typescript": true
}

svelte.config.mjs (I am trying to just use regular svelete not svelte kit. Do I need this?)

import preprocess from "svelte-preprocess"

/**
 * This will add autocompletion if you're working with SvelteKit
 * https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md
 * @type {import('@sveltejs/kit').Config}
 */
const config = {
  preprocess: preprocess({
    // ...svelte-preprocess options
  }),
  compilerOptions: {
    css: "injected" // this is the default mode
  },
  kit: {
    alias: {
      $lib: "src/lib"
    }
  }
  // ...other svelte options
}

export default config

import preprocess from "svelte-preprocess"

/**
 * This will add autocompletion if you're working with SvelteKit
 * https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md
 * @type {import('@sveltejs/kit').Config}
 */
const config = {
  preprocess: preprocess({
    // ...svelte-preprocess options
  }),
  compilerOptions: {
    css: "injected" // this is the default mode
  },
  kit: {
    alias: {
      $lib: "src/lib"
    }
  }
  // ...other svelte options
}

export default config

Update like 3 hours later still got it working sort of still issues does anyone have any experince using Plasmo with svelte shadcn UI Thinking about just dropping svelte and going back to react

Arcane•2mo ago

@Hex has reached level 1. GG!

Gaming

Programming

Svelte imports not working