## 事象
[[🦉Various Complements]]のプロジェクトで[[esbuild]]を0.15.12から0.20.0にアップグレードし、`node esbuild.config.mjs`コマンドを実行したら以下のエラー。
```error
✘ [ERROR] Invalid option in build() call: "watch"
/home/tadashi-aikawa/git/github.com/tadashi-aikawa/obsidian-various-complements-plugin/node_modules/esbuild/lib/main.js:256:12:
256 │ throw new Error(`Invalid option ${where}: ${quote(key)}`);
```
`esbuild.config.mjs`
```ts
import esbuild from "esbuild";
import process from "process";
import builtins from 'builtin-modules'
import esbuildSvelte from "esbuild-svelte";
import sveltePreprocess from "svelte-preprocess";
const banner =
`/*
THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
if you want to view the source, please visit the github repository of this plugin
*/
`;
const prod = (process.argv[2] === 'production');
esbuild.build({
plugins: [
esbuildSvelte({
compilerOptions: { css: true },
preprocess: sveltePreprocess(),
}),
],
banner: {
js: banner,
},
entryPoints: ['src/main.ts'],
bundle: true,
external: [
'obsidian',
'electron',
'@codemirror/autocomplete',
'@codemirror/collab',
'@codemirror/commands',
'@codemirror/language',
'@codemirror/lint',
'@codemirror/search',
'@codemirror/state',
'@codemirror/view',
'@lezer/common',
'@lezer/highlight',
'@lezer/lr',
...builtins],
format: 'cjs',
watch: !prod,
target: 'es2018',
logLevel: "info",
sourcemap: prod ? false : 'inline',
treeShaking: true,
outfile: 'main.js',
}).catch(() => process.exit(1));
```
## 原因
[[esbuild]]のv0.17で破壊的変更が発生し、`watch`オプションが削除されたから。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">Release v0.17.0 · evanw/esbuild</p>
<p class="link-card-description">This release deliberately contains backwards-incompatible changes. To avoid automatically picking up releases like this, you should either be pinning the exact version of esbuild in your ... </p>
</div>
<img src="https://opengraph.githubassets.com/a28744181ebf3dc91224f5e7cb71abbb050d29ecaa3a5b90deedf66183dd9049/evanw/esbuild/releases/tag/v0.17.0" class="link-card-image" />
</div>
<a href="https://github.com/evanw/esbuild/releases/tag/v0.17.0"></a>
</div>
> This change removes the incremental and watch options as well as the serve() method, and introduces a new context() method.
## 解決方法
`watch`オプションを外し、代替の設定を実装する。
```diff
- esbuild.build({
+ const context = await esbuild.context({
plugins: [
esbuildSvelte({
compilerOptions: { css: true },
preprocess: sveltePreprocess(),
}),
],
banner: {
js: banner,
},
entryPoints: ['src/main.ts'],
bundle: true,
external: [
'obsidian',
'electron',
'@codemirror/autocomplete',
'@codemirror/collab',
'@codemirror/commands',
'@codemirror/language',
'@codemirror/lint',
'@codemirror/search',
'@codemirror/state',
'@codemirror/view',
'@lezer/common',
'@lezer/highlight',
'@lezer/lr',
...builtins],
format: 'cjs',
- watch: !prod,
target: 'es2018',
logLevel: "info",
sourcemap: prod ? false : 'inline',
treeShaking: true,
outfile: 'main.js',
- }).catch(() => process.exit(1));
+ });
+ if (prod) {
+ await context.rebuild();
+ process.exit(0);
+ } else {
+ await context.watch();
+ }
```
## 参考
- [Invalid option in build\(\) call: "watch" · Issue \#2841 · evanw/esbuild](https://github.com/evanw/esbuild/issues/2841)
- [obsidian\-sample\-plugin/esbuild\.config\.mjs at master · obsidianmd/obsidian\-sample\-plugin](https://github.com/obsidianmd/obsidian-sample-plugin/blob/master/esbuild.config.mjs)