Cannot build SvelteKit app that uses webgl-plot in component
jamesb93 opened this issue · 9 comments
Describe the bug
I can import webgl-plot constructors in my svelte component just fine, but at build time the compiler complains that there is an unexpected token 'export'.
(node:82208) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/james/dev/flucoma/learn/node_modules/.pnpm/webgl-plot@0.6.4/node_modules/webgl-plot/dist/webglplot.esm.js:619
export { ColorRGBA, WebglLine, WebglPlot, WebglPolar, WebglSquare, WebglStep };
^^^^^^
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1025:15)
at Module._compile (node:internal/modules/cjs/loader:1059:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
[SyntaxError: Unexpected token 'export']
Node.js v17.0.1
ELIFECYCLE Command failed with exit code 1.
To Reproduce
git clone --branch content/ampslice https://github.com/jamesb93/learn
cd learn
npm/pnpm/yarn i
npm/pnpm/yarn run build
Expected behavior
It works when I npm run dev
but not when npm run build
. I'd expect that it working in development should be able to build the site.
Desktop (please complete the following information):
- OS: macOS 12.0.1
- Node: 17.0.1
- webgl-plot: 0.6.4
@jamesb93 Thanks. This is related to your toolchain not being able to detect the cjs from the ES6 modules. Every toolchain is set up differently. I have to check this manually. Where is the webgl-plot
dependency? I can't find it in https://github.com/jamesb93/learn
.
It should be installed to node_modules
after running some form of npm/yarn/pbpm install
.
It is defined in the package.json
, however, this is only pushed to a specific branch called content/ampslice
which can be found here:
https://github.com/jamesb93/learn/blob/content/ampslice/package.json
I am getting this error during the build. No error from webgl-plot so far.
Run npm run preview to preview your production build locally.
> Using @sveltejs/adapter-static
{
routes: {
guides: [ [Object], [Object], [Object], [Object], [Object] ],
installation: [ [Object], [Object], [Object] ],
'made-with-flucoma': [
[Object], [Object],
[Object], [Object],
[Object], [Object],
[Object], [Object]
],
overviews: [ [Object] ],
reference: [
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object], [Object], [Object], [Object],
[Object]
]
}
}
> 404 /mailto:info@flucoma.org (linked from /made-with-flucoma)
Error: 404 /mailto:info@flucoma.org (linked from /made-with-flucoma)
at file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.200_sass@1.43.5+svelte@3.44.2/node_modules/@sveltejs/kit/dist/chunks/index4.js:86:11
at visit (file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.200_sass@1.43.5+svelte@3.44.2/node_modules/@sveltejs/kit/dist/chunks/index4.js:222:5)
at async visit (file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.200_sass@1.43.5+svelte@3.44.2/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
at async visit (file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.200_sass@1.43.5+svelte@3.44.2/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
at async visit (file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.200_sass@1.43.5+svelte@3.44.2/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
at async visit (file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.200_sass@1.43.5+svelte@3.44.2/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
at async visit (file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.200_sass@1.43.5+svelte@3.44.2/node_modules/@sveltejs/kit/dist/chunks/index4.js:293:6)
at async prerender (file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.200_sass@1.43.5+svelte@3.44.2/node_modules/@sveltejs/kit/dist/chunks/index4.js:303:6)
at async Object.prerender (file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+kit@1.0.0-next.200_sass@1.43.5+svelte@3.44.2/node_modules/@sveltejs/kit/dist/chunks/index4.js:368:4)
at async adapt (file:///mnt/e/Code/learn/node_modules/.pnpm/@sveltejs+adapter-static@1.0.0-next.21/node_modules/@sveltejs/adapter-static/index.js:13:4)
ELIFECYCLE Command failed with exit code 1.
Sorry about this. Seems there is some additional cruft in the specific build process.
I created a minimal example here that follows roughly the same build steps if not exactly:
Thanks, I managed to reproduce the error. Working on it...
Great, I'm glad that helped :)
Please update to webgl-plot to version 0.6.5
. Hopefully, this should work. This might be a bug in Svelte build tools. It seems that it is not respecting the import
field in package.json
according to the official specification below:
https://nodejs.org/api/packages.html#conditional-exports
I tested the app, cool project 👍
Thanks for the kind words :) This seems to be working perfectly now. I appreciate you taking the time to dig into this and find the issue. Would it be worth me filing a bug with Svelte?
I applied further corrections to the package.json
. If you encounter any problems please reopen this issue.