Help trying to upgrade

[magick93]

Hello

I've been putting off upgrading to Svelte 5, but decided to bite to bullet.

As part of this I wanted to test each component in Storybook.

I'm not sure where I'm going wrong but so far I'm unable to get storybook to work without an error. I don think this is bug - more likely I'm misconfiguring something.

I'm getting this error:

> ui@0.0.1 storybook /homejohn/git/myco/freedom/packages/ui
> storybook  dev -p 6006 --ci

@storybook/core v8.6.14

info => Serving static files from ././static at /
info => Starting manager..
info => Starting preview..
9:11:17 pm [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

radix-icons-svelte@1.2.1
svelte-search@2.1.0
svelte-fragment-component@1.2.0

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.
9:11:17 pm [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

radix-icons-svelte@1.2.1
svelte-search@2.1.0
svelte-fragment-component@1.2.0

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.
The following Vite config options will be overridden by SvelteKit:
  - base
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
9:11:19 pm [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

radix-icons-svelte@1.2.1
svelte-search@2.1.0
svelte-fragment-component@1.2.0

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.
9:11:19 pm [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

radix-icons-svelte@1.2.1
svelte-search@2.1.0
svelte-fragment-component@1.2.0

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 8.6.14 for sveltekit started           │
│   2.97 s for manager and 2.65 s for preview        │
│                                                    │
│    Local:            http://localhost:6006/        │
│    On your network:  http://192.168.1.110:6006/    │
│                                                    │
╰────────────────────────────────────────────────────╯
error TS5102: Option 'importsNotUsedAsValues' has been removed. Please remove it from your configuration.
  Use 'verbatimModuleSyntax' instead.
error TS5102: Option 'preserveValueImports' has been removed. Please remove it from your configuration.
  Use 'verbatimModuleSyntax' instead.

9:12:12 pm [vite] Internal server error: [svelte-preprocess] Encountered type error
  Plugin: storybook:svelte-docgen-plugin
  File: /homejohn/git/myco/freedom/packages/ui/src/lib/components/auction/table/data-table-actions.stories.svelte
      at throwError (/homejohn/git/myco/freedom/node_modules/.pnpm/svelte-preprocess@5.1.4_@babel+core@7.25.2_postcss-load-config@6.0.1_jiti@1.21.6_postcs_0f2acffbb4efacc31079e70ab8bbc09b/node_modules/svelte-preprocess/dist/modules/errors.js:5:11)
      at throwTypescriptError (/homejohn/git/myco/freedom/node_modules/.pnpm/svelte-preprocess@5.1.4_@babel+core@7.25.2_postcss-load-config@6.0.1_jiti@1.21.6_postcs_0f2acffbb4efacc31079e70ab8bbc09b/node_modules/svelte-preprocess/dist/modules/errors.js:9:28)
      at transpileTs (/homejohn/git/myco/freedom/node_modules/.pnpm/svelte-preprocess@5.1.4_@babel+core@7.25.2_postcss-load-config@6.0.1_jiti@1.21.6_postcs_0f2acffbb4efacc31079e70ab8bbc09b/node_modules/svelte-preprocess/dist/transformers/typescript.js:215:47)
      at simpleTranspiler (/homejohn/git/myco/freedom/node_modules/.pnpm/svelte-preprocess@5.1.4_@babel+core@7.25.2_postcss-load-config@6.0.1_jiti@1.21.6_postcs_0f2acffbb4efacc31079e70ab8bbc09b/node_modules/svelte-preprocess/dist/transformers/typescript.js:306:60)
      at transformer (/homejohn/git/myco/freedom/node_modules/.pnpm/svelte-preprocess@5.1.4_@babel+core@7.25.2_postcss-load-config@6.0.1_jiti@1.21.6_postcs_0f2acffbb4efacc31079e70ab8bbc09b/node_modules/svelte-preprocess/dist/transformers/typescript.js:353:11)
      at script (/homejohn/git/myco/freedom/node_modules/.pnpm/svelte-preprocess@5.1.4_@babel+core@7.25.2_postcss-load-config@6.0.1_jiti@1.21.6_postcs_0f2acffbb4efacc31079e70ab8bbc09b/node_modules/svelte-preprocess/dist/processors/typescript.js:37:35)
      at async /homejohn/git/myco/freedom/node_modules/.pnpm/svelte@5.33.1/node_modules/svelte/compiler/index.js:1:743690
      at async Promise.all (index 0)
      at async JS (/homejohn/git/myco/freedom/node_modules/.pnpm/svelte@5.33.1/node_modules/svelte/compiler/index.js:1:739561)
      at async iP (/homejohn/git/myco/freedom/node_modules/.pnpm/svelte@5.33.1/node_modules/svelte/compiler/index.js:1:743581)

Some of the odd things are both importsNotUsedAsValues and preserveValueImports are not used anywhere.

The story mentioned in the error is:

<script module lang="ts">
  import { defineMeta, type StoryContext } from '@storybook/addon-svelte-csf';
  import DataTableActions from './data-table-actions.svelte';
  import { fn } from '@storybook/test';

  const onclickFn = fn().mockName('onclick');

  /**
   * Stories for the DataTableActions component.
   * Provides action buttons for items in data tables.
   */
  const { Story } = defineMeta({
    component: DataTableActions,
    tags: ['autodocs'],
    args: {
      onclick: onclickFn,
      children: 'Click me' as any
    },
    argTypes: {
      backgroundColor: { control: 'color' },
      size: {
        control: { type: 'select' },
        options: ['small', 'medium', 'large']
      },
      children: { control: 'text' }
    },
    render: template
  });
</script>

{#snippet template(args)}
  <DataTableActions {...args} />
{/snippet}

<Story name="DefaultStory" />

<Story name="Long ID" args={{ id: 'item-456-789-012-345' }} />

Any help is appreciated

[xeho91]

Are you using svelte-preprocess?
If my suspicions are correct, then it's likely one the cause of this error, but not a direct culprit.

Consider using @sveltejs/vite-plugin-svelte preprocessor. From my observations it covers the needs from majority of users.
And it doesn't throw errors, which we've been seeing in issues such as: #274

[magick93]

Hi @xeho91

I am already using the vite-plugin-svelte preprocessor.

Here is my svelte config:

import { preprocessMeltUI } from '@melt-ui/pp';
import sequence from 'svelte-sequential-preprocessor';
import adapter from '@sveltejs/adapter-auto';
// import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';


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

  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessorsc
  preprocess: [
    sequence([
      // mdsvex({ extensions: ['.svx', '.md'] }),
      vitePreprocess({}),

      preprocessMeltUI()
      // imagePreprocessor({
      //   inputDir: 'static',
      //   outputDir: 'static/g',
      //   webp: true,
      //   avif: true
      // })
    ]),
    vitePreprocess({})
  ],
  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter(),
    alias: {
      $utils: 'src/lib/utils.ts',
      $public: 'src/routes/(public)'
    }
  }
};
export default config;

[JReinhold]

@magick93

1. Why do you have vitePreprocess({}) running twice? Is that maybe the problem?
2. Maybe using the sequence function from melt-ui directly instead of from svelte-sequential-preprocessor is more compatible? https://www.melt-ui.com/docs/installation