Error: %svelte.assets% in src/app.html should be replaced with %sveltekit.assets% 的なエラーが出たら？

エラーの内容の通り, 最新のバージョンから %svelte.*% 系はすべて %sveltekit.*% に変更されたので app.html の svelte の部分を sveltekit にリネームしましょう!

phi@rabee

svelte-kit dev is no longer available — use vite dev instead って出たら？

2022/07/09

エラー内容

> svelte-kit dev is no longer available — use vite dev instead
  1. Install vite as a devDependency with npm/pnpm/etc
  2. Create a vite.config.js with the @sveltejs/kit/vite plugin (see below)
  3. Update your package.json scripts to reference `vite dev` instead of `svelte-kit dev`

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
        plugins: [sveltekit()]
};

export default config;

対応方法

vite をインストールします

$ yarn add vite --dev

エラーの内容の通り vite.config.js を作ります

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()]
};

export default config;

svelte.config.js で vite 用に書いてたコードも一緒に引っ越しします

例)

svelte.config.js

    vite: {
      mode: process.env.NODE_ENV,
      define: {
        'process.env': process.env,
      },
      resolve: {
        alias: {
          $components: path.resolve('./src/components')
        }
      }
    }

vite.config.js

import path from 'path';
import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  mode: process.env.NODE_ENV,
  define: {
    'process.env': process.env,
  },
  resolve: {
    alias: {
      $components: path.resolve('./src/components')
    }
  }
};

export default config;

あとは package.json のコマンドを sveltekit から vite に変更します

package.json

    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",

phi@rabee

endpoint の定義方法が変わりました

以下のエラーが出たら

Endpoint method "get" has changed to "GET". See https://github.com/sveltejs/kit/discussions/5359 for more information.

大文字に変更すれば OK

export function get({ params }) {...}

↓

export function GET({ params }) {...}

該当 issue

phi@rabee

routes の命名規則も変わりました

% npx svelte-migrate routes

phi@rabee

svelte.config.js で定義していた methodOverride が廃止されました

phi@rabee

Error: Rename your server hook file from src/hooks.js to src/hooks.server.js って出たら？

hooks.js が hooks.server.js にリネームしましょう!

phi@rabee

The sveltekit:prefetch attribute has been replaced with data-sveltekit-prefetch って出たら？

sveltekit:prefetch は data-sveltekit-prefetch に変わりました。