Cannot find module '~icons/ri/moon-clear-fill' imported from ...@svelteness/kit-docs/client/components/base/ColorSchemeMenu.svelte'

[stephane-klein]

Hello,

I followed Manual Installation and when I execute npm run dev, I have this error on http://localhost:3000/docs/first-category/hello-world page:

Cannot find module '~icons/ri/moon-clear-fill' imported from '/home/stephane/git/github.com/stephane-klein/kit-docs-playground3/mydocs/node_modules/@svelteness/kit-docs/client/components/base/ColorSchemeMenu.svelte'

Here is the content of my package.json file:

{
    "name": "mydocs",
    "version": "0.0.1",
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "package": "svelte-kit package",
        "preview": "vite preview",
        "prepare": "svelte-kit sync"
    },
    "devDependencies": {
        "@iconify-json/ri": "1.1.3",
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "next",
        "@svelteness/kit-docs": "0.22.12",
        "clsx": "1.2.1",
        "shiki": "0.10.1",
        "svelte": "3.44.0",
        "unplugin-icons": "0.14.7",
        "vite": "2.9.13"
    },
    "type": "module"
}

Best regards,
Stéphane

[stephane-klein]

Fixed, my mistake:

I forget to put vite in kit object:

import adapter from '@sveltejs/adapter-auto';
import { kitDocsPlugin } from '@svelteness/kit-docs/node';
import Icons from 'unplugin-icons/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: ['.svelte', '.md'],

  kit: {
    adapter: adapter(),

    prerender: {
      default: true,
      entries: ['*'],
    },
  }
  vite: {
      plugins: [
        Icons({ compiler: 'svelte' }),
        kitDocsPlugin({
          shiki: {
            theme: 'material-ocean',
          },
        }),
      ],
    },
  },
};

export default config;

Now, the good configuration is:

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: ['.svelte', '.md'],

  kit: {
    adapter: adapter(),

    prerender: {
      default: true,
      entries: ['*'],
    },
  },
};

export default config;

and

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { kitDocsPlugin } from '@svelteness/kit-docs/node';
import Icons from 'unplugin-icons/vite';

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [
        Icons({ compiler: 'svelte' }),
        kitDocsPlugin({
          shiki: {
            theme: 'material-ocean',
          }
        }),
        sveltekit()
    ]
};

export default config;

See also https://github.com/svelteness/kit-docs/issues/48