Cannot get it to work in SvelteKit... about vite-plugin-dynamic-import HOT 9 OPEN

@caoxiemeihao Here you will find the minimal repo: https://github.com/raphael-devel/raphael-devel-demo-sveltekit-repo-4-vite-plugin-dynamic-import

But it is really just a matter of:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

details about the SETUP you will find in README.md

Hope that helps..

For me this issue now is not crucial... but maybe it will help others...

from vite-plugin-dynamic-import.

vite.config.js

 export default {
   resolve: {
+    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json', '.svelte'],
   },
 }

https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/v1.2.7/src/index.ts#L77

from vite-plugin-dynamic-import.

Is @library an alias in your vite.config.js?

from vite-plugin-dynamic-import.

in sveltekit the aliases are defined in the svelte.config.js like so:

import adapter from '@sveltejs/adapter-auto';
import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';
import sveltePreprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */

const config = {
  extensions: [
    '.svelte',
    ...mdsvexConfig.extensions
  ],
  preprocess: [
    mdsvex(mdsvexConfig),
    sveltePreprocess()
  ],
  kit: {
    adapter: adapter({ edge: true }),
    alias: {
      $library: 'src/library',
      $content: 'src/content',
      $images: 'src/images',
      $music: 'src/music',
      $themes: 'src/themes'
    }
  }
};

export default config;

...and sveltekit itself is a vite plugin, like so:

import { sveltekit } from '@sveltejs/kit/vite';
import autoImport from 'sveltekit-autoimport';
import dynamicImport from 'vite-plugin-dynamic-import';
import { imagetools } from 'vite-imagetools';
import mkcert from 'vite-plugin-mkcert';

/** @type {import('vite').UserConfig} */

const supportedExtensions = ['webp', 'jpg', 'jpeg', 'png'];

const config = {
  ssr: {
    noExternal: [
      'svelte-stripe-js',
      'style-value-types',
      'popmotion',
      'framesync'
    ]
  },
  plugins: [
    autoImport({
      components: ['./src/library'],
    }),
    sveltekit(),
    dynamicImport(),
    imagetools(
      {
        defaultDirectives: (url) => {
          const extension = url.pathname.substring(
            url.pathname.lastIndexOf('.') + 1
          );
          if (supportedExtensions.includes(extension)) {
            return new URLSearchParams({
              format: `webp;jpg`,
              width: `200;300;400;500;800;1000;2000`,
              picture: true
            });
          }
          return new URLSearchParams();
        }
      },
    ),
    mkcert({hosts: ['localhost', 'app.local']})
  ]
};

export default config;

...and those aliases defined in the `svelte.config.js file are used in the generated tsconfig.json, like so:

{
  "compilerOptions": {
    "baseUrl": "..",
    "paths": {
      "$library": [
        "src/library"
      ],
      "$library/*": [
        "src/library/*"
      ],
      "$content": [
        "src/content"
      ],
      "$content/*": [
        "src/content/*"
      ],
      "$images": [
        "src/images"
      ],
      "$images/*": [
        "src/images/*"
      ],
      "$music": [
        "src/music"
      ],
      "$music/*": [
        "src/music/*"
      ],
      "$themes": [
        "src/themes"
      ],
      "$themes/*": [
        "src/themes/*"
      ]
    },
    "rootDirs": [
      "..",
      "./types"
    ],
    "importsNotUsedAsValues": "error",
    "isolatedModules": true,
    "preserveValueImports": true,
    "lib": [
      "esnext",
      "DOM",
      "DOM.Iterable"
    ],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "esnext"
  },
  "include": [
    "ambient.d.ts",
    "./types/**/$types.d.ts",
    "../vite.config.ts",
    "../src/**/*.js",
    "../src/**/*.ts",
    "../src/**/*.svelte",
    "../src/**/*.js",
    "../src/**/*.ts",
    "../src/**/*.svelte",
    "../tests/**/*.js",
    "../tests/**/*.ts",
    "../tests/**/*.svelte"
  ],
  "exclude": [
    "../node_modules/**",
    "./[!ambient.d.ts]**"
  ]
}

...but beyond these files i don't know what's going on between Vite and Svelte Kit.

from vite-plugin-dynamic-import.

You may need to define the corresponding alias in vite.config.js.

Not sure how work Vite and Svelte Kit. Can you provide a minimal reproduction Demo?

from vite-plugin-dynamic-import.

oh geeez…totally forgot to make a minrep, apologies…does it work now?

from vite-plugin-dynamic-import.

Still need to reproduce the Demo 😅

from vite-plugin-dynamic-import.

@idleberg is talking in this post:
https://stackoverflow.com/questions/69295473/svelte-sveltekit-dynamic-import-of-components-with-variable

about how he did get a similar plugin => The Rollup plugin @rollup/plugin-dynamic-import-vars to work with Svelte and Vite. So while the concept of this vite plugin seems to work, this does not yet work with sveltekit and vite.

Still Error Output from svelte:

Error while preprocessing /home/user/projects/exampleapp/src/routes/example/switchmepage/+page.svelte - Transform failed with 1 error:
/home/user/projects/exampleapp/src/routes/example/switchmepage/+page.svelte:29:28: ERROR: Expected string but found "`./src/${"

Any chance you get this done @caoxiemeihao ? Otherwise maybe a hint: This is known to not work with xyz would be nice.
How did you solve your issue until now @rchrdnsh ?

from vite-plugin-dynamic-import.

Anyone provide a minimal reproduction of the repo? Because I haven't used SvelteKit yet. :(

from vite-plugin-dynamic-import.