webpack + Svelte3 → Svelte4 にバージョンを上げてビルドエラーが出た時の対応

Svelte3 から Svelte4 にバージョンを上げたらというか、
全体的にバージョンを上げたので、ビルド環境含めのエラーに対しての対応。

環境

旧 package.json　抜粋

"devDependencies": {
    "@babel/plugin-proposal-private-methods": "^7.17.12",
    "@babel/preset-env": "^7.18.2",
    "babel-loader": "^8.2.5",
    "css-loader": "^5.2.1",
	"json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^1.4.1",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "svelte": "^3.37.0",
    "svelte-loader": "^3.1.0",
    "svelte-preprocess": "^4.7.0",
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0"
}

新 package.json 抜粋

• 全パッケージ最新バージョンに変更
• @babel/plugin-proposal-private-methods 削除
• @babel/plugin-transform-private-methods 追加
• sass 追加

"devDependencies": {
	"@babel/plugin-transform-private-methods": "^7.24.7",
    "@babel/preset-env": "^7.24.7",
    "babel-loader": "^9.1.3",
    "css-loader": "^7.1.2",
	"json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^1.4.1",
	"node-sass": "^9.0.0",
    "sass": "^1.77.7",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "svelte": "^4.2.18",
    "svelte-loader": "^3.2.3",
    "svelte-preprocess": "^6.0.2",
    "webpack": "^5.92.1",
    "webpack-cli": "^5.1.4"
}

エラーの対応

ビルドできなくなった

$ webpack --mode=production

Module not found: Error: Can't resolve 'svelte/internal'

下記、変更点。

svelte: path.dirname(require.resolve('svelte/package.json'))
↓
svelte: path.resolve('node_modules', 'svelte/src/runtime')

webpack.config.js 抜粋

module.exports = {
	entry: './main.js',
	resolve: {
		alias: {
			svelte: path.resolve('node_modules', 'svelte/src/runtime'),
		},
	},
}

Svelte ファイル内で sass が使えなくなった

$ webpack --mode=production

Module build failed (from ./node_modules/svelte-loader/index.js):
Error: Cannot find module 'sass'

Svelte4 から sass が必要になった。

$ npm install sass --save-dev