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 #48