SvelteKitの1.0Nextバージョンで出るエラーの解決方法

2022-9-13

meko

config.kit.target is no longer required, and should be removed

1.0.0-next300に移行する時に出たエラー

対処法

設定ファイルのtargetを消す

...

const config = {
...
    kit: {
		...
		target: '#svelte', // remove this 消す
		...
	},
};

...

request in handle has been replaced with event.

request in handle has been replaced with event. See https://github.com/sveltejs/kit/pull/3384 for details

Github Issue

1.0.0-next233から1.0.0-next234に移行する時に出たエラー
パラメータ名がresuestからeventに変わったので書き換えする

export async function handle({ event, resolve }) {
  const response = await resolve(event, {
	  	ssr: !event.url.pathname.startsWith('/posts')
  });

  ...
}

Cannot read property 'rimraf' of undefined

@sveltejs/adapter-staticのバージョンを1.0.0-next.26にアップデートすれば直る

config.kit.ssr has been removed — use the handle hook instead: https://kit.svelte.dev/docs#hooks-handle

1.0.0-next221から1.0.0-next222に移行する時に出たエラー

SSRの設定がsrc/hook.js(src/hook.ts)に移ったから変更して欲しいという修正が入った
svelte.config.jsのkit.ssr:trueを削除して、
src/hook.tsに以下のように加えればOK

Unrecognized option 'enableSourcemap'

1.0.0-next156から1.0.0-next186に移行する時に出たエラー

Svelte本体のバージョンが上がっていたようなので、[email protected]から[email protected]にアップデートした
ついでに[slug].json.tsで読み込んでいるファイルに.DS_Storeが含まれていたので、読み込む際にif分で弾いた

prerender

1.0.0-next137から1.0.0-next138に移行する時にビルド時にprerenderの使い方でエラーがでた

config.kit.prerender.force has been removed in favor of `onError`. In your case, set `onError` to "continue" to get the same behavior as you would with `force: true`

svelte.config.jsのkitでprerenderを強制設定できるが、それが無くなったので代わりにonErrorをcontinueに入れてくれって書いてある

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

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

    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: [
		preprocess({
			preserve: ['ld+json', 'json']
		}), 
	],

    kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte',
		adapter: adapter({ 
			pages: "build",
			assets: "build",
			fallback: "index.html"
		}),
		prerender: {
            enabled: true,
            ~~force: true,~~
		},
		ssr: true,
		vite: {
			plugins: [],
		}
	},
};

export default config;

hooks

minifyを入れようとしてhookを公式通りに設定しようとしたら出たエラー

render2 is not a function

公式のサイトの例

import { minify } from 'html-minifier';
import { prerendering } from '$app/env';

const minification_options = {
	collapseBooleanAttributes: true,
	collapseWhitespace: true,
	conservativeCollapse: true,
	decodeEntities: true,
	html5: true,
	ignoreCustomComments: [/^#/],
	minifyCSS: true,
	minifyJS: false,
	removeAttributeQuotes: true,
	removeComments: true,
	removeOptionaltag: true,
	removeRedundantAttributes: true,
	removeScriptTypeAttributes: true,
	removeStyleLinkTypeAttributes: true,
	sortAttributes: true,
	sortClassName: true
};

export async function handle({ request, render }) {
  const response = await render(request);

  if (prerendering && response.headers['content-type'] === 'text/html') {
    response.body = minify(response.body, minification_options);
  }

  return response;
}

import { minify } from 'html-minifier';
import { prerendering } from '$app/env';

const minification_options = {
	collapseBooleanAttributes: true,
	collapseWhitespace: true,
	conservativeCollapse: true,
	decodeEntities: true,
	html5: true,
	ignoreCustomComments: [/^#/],
	minifyCSS: true,
	minifyJS: false,
	removeAttributeQuotes: true,
	removeComments: true,
	removeOptionaltag: true,
	removeRedundantAttributes: true,
	removeScriptTypeAttributes: true,
	removeStyleLinkTypeAttributes: true,
	sortAttributes: true,
	sortClassName: true
};

export async function handle({ request, resolve }) {
  const response = await resolve(request);

  if (prerendering && response.headers['content-type'] === 'text/html') {
    response.body = minify(response.body, minification_options);
  }

  return response;
}

handle関数の中の引数renderがresolveに変更になってるのでリネームしたら正常に動いた

Mekogma