Problems building using Lamina package

[nilskj]

Describe the bug

Lamina is a package that provides a way of composing custom webgl shaders in layers. For some reason the module import does not work for the package lamina, see bug I opened here. Sveltekit does not seem to find named exports from the lamina/vanilla package. While it works without problems in dev it fails when building.

SyntaxError: Named export 'LayerMaterial' not found. The requested module 'lamina/vanilla' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'lamina/vanilla';
const { LayerMaterial } = pkg;

Following the example in the error message yields no better result and this instead:

> svelte-kit build

vite v2.9.8 building for production...
✓ 47 modules transformed.
'default' is not exported by node_modules/lamina/vanilla.js, imported by src/routes/index.svelte
file: /Users/nilskjellman/Dev/svelte-kit-app/src/routes/index.svelte:2:9
1: <script lang="ts">
2:   import pkg from 'lamina/vanilla';
            ^
3:   const { LayerMaterial } = pkg;
4:   const testMaterial = new LayerMaterial({});
> 'default' is not exported by node_modules/lamina/vanilla.js, imported by src/routes/index.svelte
    at error (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:12537:16)
    at Module.traceVariable (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:12896:29)
    at ModuleScope.findVariable (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:11525:39)
    at FunctionScope.findVariable (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:6492:38)
    at ChildScope.findVariable (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:6492:38)
    at Identifier.bind (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:7784:40)
    at VariableDeclarator.bind (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:5357:23)
    at VariableDeclaration.bind (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:5353:31)
    at BlockStatement.bind (/Users/nilskjellman/Dev/svelte-kit-app/node_modules/rollup/dist/shared/rollup.js:5353:31)
 ELIFECYCLE  Command failed with exit code 1.

Process finished with exit code 1

*Workaround *
Only way I found to make this build is turning off SSR, like in this other app lamina-spatula hooks.ts
This builds, but I need SSR.

Reproduction

• Create a new svelte-kit app with npm init svelte app-name
• Install package Lamina. npm install lamina
• Import one of the named exports of the library like so:

<script lang="ts">
    import {LayerMaterial} from 'lamina/vanilla'
    const testMaterial = new LayerMaterial({});
    console.log(testMaterial);
</script>

• run npm run dev and it works without problem as expected
• run npm run build fails build with this error

import { LayerMaterial } from "lamina/vanilla";
         ^^^^^^^^^^^^^
SyntaxError: Named export 'LayerMaterial' not found. The requested module 'lamina/vanilla' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'lamina/vanilla';
const { LayerMaterial } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async Promise.all (index 1)
    at async respond$1 (file:///Users/nilskjellman/Dev/svelte-kit-app/.svelte-kit/output/server/index.js:1809:13)
    at async resolve (file:///Users/nilskjellman/Dev/svelte-kit-app/.svelte-kit/output/server/index.js:2182:105)
    at async respond (file:///Users/nilskjellman/Dev/svelte-kit-app/.svelte-kit/output/server/index.js:2139:22)
    at async visit (file:///Users/nilskjellman/Dev/svelte-kit-app/node_modules/@sveltejs/kit/dist/chunks/index2.js:1085:20)
> 500 /
    at file:///Users/nilskjellman/Dev/svelte-kit-app/node_modules/@sveltejs/kit/dist/chunks/index2.js:984:11
    at save (file:///Users/nilskjellman/Dev/svelte-kit-app/node_modules/@sveltejs/kit/dist/chunks/index2.js:1204:4)
    at visit (file:///Users/nilskjellman/Dev/svelte-kit-app/node_modules/@sveltejs/kit/dist/chunks/index2.js:1095:3)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Another quick way to reproduce is to clone this repo: lamina-spatula and remove the disabling of ssr in the hooks.

Logs

import { LayerMaterial } from "lamina/vanilla";
         ^^^^^^^^^^^^^
SyntaxError: Named export 'LayerMaterial' not found. The requested module 'lamina/vanilla' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'lamina/vanilla';
const { LayerMaterial } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async Promise.all (index 1)
    at async respond$1 (file:///Users/nilskjellman/Dev/svelte-kit-app/.svelte-kit/output/server/index.js:1809:13)
    at async resolve (file:///Users/nilskjellman/Dev/svelte-kit-app/.svelte-kit/output/server/index.js:2182:105)
    at async respond (file:///Users/nilskjellman/Dev/svelte-kit-app/.svelte-kit/output/server/index.js:2139:22)
    at async visit (file:///Users/nilskjellman/Dev/svelte-kit-app/node_modules/@sveltejs/kit/dist/chunks/index2.js:1085:20)
> 500 /
    at file:///Users/nilskjellman/Dev/svelte-kit-app/node_modules/@sveltejs/kit/dist/chunks/index2.js:984:11
    at save (file:///Users/nilskjellman/Dev/svelte-kit-app/node_modules/@sveltejs/kit/dist/chunks/index2.js:1204:4)
    at visit (file:///Users/nilskjellman/Dev/svelte-kit-app/node_modules/@sveltejs/kit/dist/chunks/index2.js:1095:3)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

System Info

System:
    OS: macOS 11.6.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 243.12 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.volta/tools/image/node/16.14.2/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 8.5.0 - ~/.volta/tools/image/node/16.14.2/bin/npm
    Watchman: 2022.01.24.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 98.0.1
    Safari: 15.2
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.40 
    @sveltejs/adapter-node: ^1.0.0-next.73 => 1.0.0-next.73 
    @sveltejs/kit: next => 1.0.0-next.325 
    svelte: ^3.44.0 => 3.48.0

Severity

serious, but I can work around it

Additional Information

No response

[benmccann]

When I try to build your lamina-spatula repo it fails first on svelte-fuse-rx. I can fix that by adding "svelte": "./index.js", to the package.json file of svelte-fuse-rx. The weird thing about that is it looks like that package is built using svelte-kit package, so I'd expect it to happen automatically, but it also looks like that package isn't distributing any .svelte components, so maybe that's part of it?

The main issue you're reporting is coming from that package: pmndrs/lamina#35 (comment)

[bluwy]

For lamina-spatula, the svelte-fuse-rx dependency fails because it's index.js file relatively import ./rx instead of ./rx.js, which doesn't work in node. I'd suggest the author to update that, and it's possible to import TS files with .js too in dev.

As the error comes from other library packaging error (same for lamina), I'll close this.

[benmccann]

The longer-term fix to stop people from running into these issues is sveltejs/cli#205