dynamic importを含むコードをesbuildでbundleするとエラーが出る
dynamic importを含むコードをあるversion以降のesbuildでbundleすると、
Could not resolve import("../**/**"): not implemented on js が発生する原因
v0.19.0以降で
await import(\ ./data/${kind}.json\ ) のようなdynamic import式を使うと、esbuild内でwild card化し、compile時にwild cardに一致する全てのfiles取り込む仕様に変わったこれは、run-timeにならないとimport候補を絞り込めない場合にエラーとなる
対策
buildするコードを書き換えるしかない
await import(path) のように、importの引数に変数を渡すようにする調査
問題を再現できる最小限のコードを書いて試してみる
$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/dynamic_importを含むコードをesbuildでbundleするとエラーが出る/build.ts$ deno run -A -r=https://scrapbox.io --location=https://scrapbox.io https://scrapbox.io/api/code/takker/dynamic_importを含むコードをesbuildでbundleするとエラーが出る/build.tsdeps.ts//@deno-types=https://cdn.jsdelivr.net/npm/esbuild-wasm@0.21.4/esm/browser.d.ts
import { build, initialize } from "https://cdn.jsdelivr.net/npm/esbuild-wasm@0.21.4/esm/browser.js";
// prepare esbuild
await initialize({
wasmURL: "https://cdn.jsdelivr.net/npm/esbuild-wasm@0.21.4/esbuild.wasm",
worker: false,
});
export { build };build.tsimport { build } from "./deps.ts";
// bundle & minify app.css
const { outputFiles } = await build({
entryPoints: ["https://scrapbox.io/api/code/takker/scrapbox-icon-button/script.js"],
bundle: true,
minify: true,
write: false,
plugins: [{
name: "http",
setup: ({ onLoad, onResolve }) => {
onResolve({ filter: /.*/ }, ({ path, importer}) => {
return {
path: new URL(path, importer || path).href,
namespace: "http",
};
});
onLoad({ filter: /.*/, namespace: name }, async ({ path }) => ({
contents: await (await fetch(path)).text(),
loader: "js",
}));
},
}],
});
console.log(outputFiles[0].text);
でないver.
v0.18.20
v0.18.10
v0.14.10
v0.13.11
2024-06-11時点のscrapbox-bundlerで使っているver.
問題が発生したscrapbox-icon-buttonのコードをbundleしてもエラーが出ない
でるver.
v0.19.0以降
結果
v0.19.0以降でエラーが出る
> This release introduces wildcards in import paths in two places:
> Entry points
> You can now pass a string containing glob-style wildcards such as ./src/*.ts as an entry point and esbuild will search the file system for files that match the pattern. This can be used to easily pass esbuild all files with a certain extension on the command line in a cross-platform way. Previously you had to rely on the shell to perform glob expansion, but that is obviously shell-dependent and didn't work at all on Windows. Note that to use this feature on the command line you will have to quote the pattern so it's passed verbatim to esbuild without any expansion by the shell. Here's an example:$ esbuild --minify "./src/*.ts" --outdir=out> Specifically the*character will match any character except for the/character, and the/**/character sequence will match a path separator followed by zero or more path elements. Other wildcard operators found in glob patterns such as?and[...]are not supported.
> Run-time import paths
> Import paths that are evaluated at run-time can now be bundled in certain limited situations. The import path expression must be a form of string concatenation and must start with either./or../. Each non-string expression in the string concatenation chain becomes a wildcard. The*wildcard is chosen unless the previous character is a/, in which case the/**/*character sequence is used. Some examples:
こいつかあ
js// These two forms are equivalent
const json1 = await import('./data/' + kind + '.json')
const json2 = await import(`./data/${kind}.json`)> This feature works withrequire(...)andimport(...)because these can all accept run-time expressions. It does not work withimportandexportstatements because these cannot accept run-time expressions. If you want to prevent esbuild from trying to bundle these imports, you should move the string concatenation expression outside of therequire(...)orimport(...). For example:
js// This will be bundled
const json1 = await import('./data/' + kind + '.json')
// This will not be bundled
const path = './data/' + kind + '.json'
const json2 = await import(path)コードを書き換えるしか対処法がないということか
> Note that using this feature means esbuild will potentially do a lot of file system I/O to find all possible files that might match the pattern. This is by design, and is not a bug. If this is a concern, I recommend either avoiding the/**/pattern (e.g. by not putting a/before a wildcard) or using this feature only in directory subtrees which do not have many files that don't match the pattern (e.g. making a subdirectory for your JSON files and explicitly including that subdirectory in the pattern).
#2024-06-13 10:39:25
#2024-06-11 09:34:32