エラー内容
➜ image-guideline git:(d3js) ✗ yarn parcel jpg_report.html yarn run v1.3.2 $ /Users/shuhei_morioka/project/dev_opt/design-guideline/image-guideline/node_modules/.bin/parcel jpg_report.html ⏳ Building... Server running at http://localhost:1234 🚨 /Users/shuhei_morioka/project/dev_opt/design-guideline/image-guideline/node_modules/xmlhttprequest/lib/XMLHttpRequest.js: Could not statically evaluate fs at evaluate (/Users/shuhei_morioka/project/dev_opt/design-guideline/image-guideline/node_modules/parcel-bundler/src/visitors/fs.js:164:11) at CallExpression.path.get.map.arg (/Users/shuhei_morioka/project/dev_opt/design-guideline/image-guideline/node_modules/parcel-bundler/src/visitors/fs.js:31:21)
原因
🐛 d3 import: Could not statically evaluate fs call · Issue #298 · parcel-bundler/parcel · GitHub
npm libraries can specify alternative main fields in their package.json, we resolve the "module" and "jsnext:main" in priority of "browser" to get the full dependency tree. libraries like d3.js specifies node.js specific files in the "main" which breaks the build
対処方法
Resolver.jsを直接書き換えて回避した。
# parcel-builder/src/Resolver.js return resolver(filename, { filename: parent, paths: this.options.paths, modules: builtins, extensions: extensions, packageFilter(pkg, pkgfile) { // Expose the path to the package.json file pkg.pkgfile = pkgfile; // npm libraries can specify alternative main fields in their package.json, // we resolve the "module" and "jsnext:main" in priority of "browser" to get the full dependency tree. // libraries like d3.js specifies node.js specific files in the "main" which breaks the build const main = pkg.module || pkg['jsnext:main'] || pkg.browser; if (main) { pkg.main = main; } return pkg; } });
追記
現在では、下記のPRがマージされ、v1.2.1 でリリースされているので、問題無く扱うことができる。
Resolve "module", "jsnext:main" and "browser" before "main" by fathyb · Pull Request #299 · parcel-bundler/parcel · GitHub Comparing v1.2.1...master · parcel-bundler/parcel · GitHub