Cannot build SvelteKit app that uses webgl-plot in component

[jamesb93]

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

[danchitnis]

@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.

[jamesb93]

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

[danchitnis]

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.

[jamesb93]

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:

https://github.com/jamesb93/minimal-example

[danchitnis]

Thanks, I managed to reproduce the error. Working on it...

[jamesb93]

Great, I'm glad that helped :)

[danchitnis]

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 👍

[jamesb93]

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?

[danchitnis]

I applied further corrections to the package.json. If you encounter any problems please reopen this issue.