sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
78.04k stars 4.08k forks source link

svelte cannot use $$props in runes mode #9580

Closed mmailaender closed 9 months ago

mmailaender commented 9 months ago

Describe the bug

We've updated to svelte 5.0.0-next.9 and haven't opt-in runes mode like described here

Based on the docs

Current Svelte code will continue to work without any adjustments. Components using the Svelte 4 syntax can use components using runes and vice versa.

I'm expecting Svelte 4 code like $$props is still working. But we're getting the error: svelte cannot use $$props in runes mode image

The affected svelte file: https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/components/Stepper/Stepper.svelte#L137

Our svelte.config.js file

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    extensions: ['.svelte'],
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: [ vitePreprocess()],

    vitePlugin: {
        inspector: true,
    },
    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()
    }
};
export default config;

Reproduction

https://github.com/mmailaender/svelte5

Run

pnpm i
pnpm dev

Logs

No response

System Info

System:
    OS: Linux 6.1 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7B13
    Memory: 53.62 GB / 62.79 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.10.5 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
  npmPackages:
    svelte: 5.0.0-next.9 => 5.0.0-next.9

Severity

blocking an upgrade

7nik commented 9 months ago

The bug is that the compiler sees $state (store) and switches into rune mode: REPL.

Edit: as a hotfix, you can add <svelte:options runes={false} />.