Using with Sveltekit #35

nilskj · 2022-05-03T21:40:30Z

Fantastic lib! I'm using it in my svelte-kit app (with pnpm).
First I get these worrying error messages, is there a way to only import the vanilla parts of this?

It does however run and work very nice in dev, but when building for production I face this error:

I see the package both provides a .cjs and a .js esm export, and I do try importing the esm one like this:

Any idea on how I should configure vite to be able to build this?

nilskj · 2022-05-03T21:45:59Z

When trying to follow what is purposed in the error message and import it like this instead:

Vite throws another error:

FarazzShaikh · 2022-05-04T05:05:04Z

Thanks!

I’m not too familiar with Svelte but I am guessing this is pnpm problem. Can you try installing it with Npm or Yarn to see if it works?

The way it works is that it still needs React in there but React won’t end up in your bundle if you only use Lamina/vanilla

CodyJasonBennett · 2022-05-04T05:07:06Z

R3F should be optional here alongside react.

https://github.com/FarazzShaikh/THREE-CustomShaderMaterial/blob/2696b65c381e0113ea3ad4f8091004d7280d1b0f/package.json#L75-L84

FarazzShaikh · 2022-05-04T05:08:30Z

Right, I will fix that thanks!

AlexWarnes · 2022-05-04T05:09:47Z

Ran into the same issue using lamina with SvelteKit! My workaround was to turn off ssr (I did it for my whole project, but pretty sure you could just disable it for the routes that use lamina):

Create a hooks.ts (or .js) in your src directory, and then disable ssr with:

import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
    return await resolve(event, { ssr: false });
};

I don't understand exactly how this all works, but it got me through the build. For reference: https://github.com/AlexWarnes/lamina-spatula/blob/main/src/hooks.ts

CodyJasonBennett · 2022-05-04T05:20:01Z

Yikes, prob best to let Sveltekit know of that issue with package resolution with SSR -- that can load multiple versions of libraries and cause deeper breakage.

Another issue with their bundler's interop of non-default exports, but import * as pkg from 'lamina/vanilla' should workaround for now.

FarazzShaikh · 2022-05-04T07:05:48Z

@nilskj I have updated the deps like Cody mentioned. Let me know if the error is gone or is different

nilskj · 2022-05-04T19:39:29Z

Thank you all for quick help. I see @AlexWarnes (awesome project btw), disabling SSR makes it build, but I don't want to disable SSR since my project is a website and this particular page with the 3D stuff needs some server rendering.

When upgrading lamina I see the package deps have updated:

but when doing a pnpm install I get this (even worse then before, with router-dom?)

- lamina 1.1.18
+ lamina 1.1.19

 WARN  Issues with peer dependencies found
.
└─┬ lamina
  ├── ✕ missing peer react@>=18.0
  ├── ✕ missing peer react-dom@>=18.0
  ├── ✕ missing peer @react-three/fiber@>=8.0
  ├─┬ leva
  │ ├── ✕ missing peer react@>=16.8.0
  │ ├── ✕ missing peer react-dom@>=16.8.0
  │ ├─┬ @radix-ui/react-portal
  │ │ ├── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ ├── ✕ missing peer react-dom@"^16.8 || ^17.0"
  │ │ ├─┬ @radix-ui/react-primitive
  │ │ │ ├── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ │ └─┬ @radix-ui/react-slot
  │ │ │   ├── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ │   └─┬ @radix-ui/react-compose-refs
  │ │ │     └── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ └─┬ @radix-ui/react-use-layout-effect
  │ │   └── ✕ missing peer react@"^16.8 || ^17.0"
  │ ├─┬ @radix-ui/react-tooltip
  │ │ ├── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ ├── ✕ missing peer react-dom@"^16.8 || ^17.0"
  │ │ ├─┬ @radix-ui/react-context
  │ │ │ └── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ ├─┬ @radix-ui/react-id
  │ │ │ └── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ ├─┬ @radix-ui/react-popper
  │ │ │ ├── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ │ ├─┬ @radix-ui/react-arrow
  │ │ │ │ ├── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ │ │ └─┬ @radix-ui/react-primitive
  │ │ │ │   └── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ │ ├─┬ @radix-ui/react-use-rect
  │ │ │ │ └── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ │ └─┬ @radix-ui/react-use-size
  │ │ │   └── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ ├─┬ @radix-ui/react-portal
  │ │ │ ├── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ │ └── ✕ missing peer react-dom@"^16.8 || ^17.0"
  │ │ ├─┬ @radix-ui/react-presence
  │ │ │ └── ✕ missing peer react@>=16.8
  │ │ ├─┬ @radix-ui/react-use-controllable-state
  │ │ │ ├── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ │ └─┬ @radix-ui/react-use-callback-ref
  │ │ │   └── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ ├─┬ @radix-ui/react-use-escape-keydown
  │ │ │ └── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ ├─┬ @radix-ui/react-use-previous
  │ │ │ └── ✕ missing peer react@"^16.8 || ^17.0"
  │ │ └─┬ @radix-ui/react-visually-hidden
  │ │   └── ✕ missing peer react@"^16.8 || ^17.0"
  │ ├─┬ @stitches/react
  │ │ └── ✕ missing peer react@">= 16.3.0"
  │ ├─┬ @use-gesture/react
  │ │ └── ✕ missing peer react@">= 16.8.0"
  │ ├─┬ @welldone-software/why-did-you-render
  │ │ └── ✕ missing peer react@"^16 || ^17"
  │ ├─┬ react-colorful
  │ │ ├── ✕ missing peer react@>=16.8.0
  │ │ └── ✕ missing peer react-dom@>=16.8.0
  │ ├─┬ react-dropzone
  │ │ └── ✕ missing peer react@">= 16.8"
  │ └─┬ zustand
  │   └── ✕ missing peer react@>=16.8
  └─┬ three-custom-shader-material
    ├── ✕ missing peer react@>=18.0
    └── ✕ missing peer @react-three/fiber@>=8.0
✕ Conflicting peer dependencies:
  react      react-dom  
Peer dependencies that should be installed:
  @react-three/fiber@>=8.0.0

I made a new svelte-kit app and used normal npm instead of pnpm and then I don't get these errors so I don't know if they are about pnpm.

If I tried changing to your workaround @CodyJasonBennett, like this:

I get another error, this time with the three import:

/Users/nilskjellman/Dev/svelte-kit-app/node_modules/.pnpm/[email protected][email protected]/node_modules/lamina/vanilla.js:1
import * as THREE from 'three';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
[SyntaxError: Cannot use import statement outside a module]

All here above reproduced in an empty sveltekit app. npm init svelte app-name

CodyJasonBennett · 2022-05-04T19:43:55Z

I think these are clearly pnpm and svelte issues, if you could forward these to their respective repositories.

benmccann · 2022-05-04T23:02:45Z

That error message is coming from Node.js. It looks to me like the problem is that this library is using file extensions that are not valid with Node. The ESM version needs to end with .mjs unless you have "type": "module". If I rename vanilla.js to vanilla.mjs then I make it further. It looks like that change would need to be made throughout the project.

CodyJasonBennett · 2022-05-05T00:17:24Z

That is also an issue with three (they go halfway with three.cjs and three.module.js), but I don't think it's reasonable to expect everyone to follow Node's conventions for ESM in web-only libraries. In any case, there are still issues evident with interop since CJS on the server-side should merely be an implementation detail to users that are otherwise writing with ES6 syntax.

benmccann · 2022-05-05T00:26:09Z

You only ever need to go halfway. If you have "type": "module" you need the .cjs ending and if you don't then you need the .mjs ending.

This really isn't anything Svelte or pnpm can change as neither are responsible for this. The page is being rendered during SSR and so the libraries get loaded. The user could load the libraries only on the client, but it's harder / uglier to set that up and it'd be much nicer if it just used file endings that work. It's all hidden to the user, so there's no real downside to changing the extensions

CodyJasonBennett · 2022-05-05T00:44:58Z

I see, you mean in regards to Node resolution -- three has resolved this already (via type="module" and .cjs), and we still need to do the same here in Lamina.

If I'm understanding you correctly, we'd need type="module" in addition to the rest of this config?

lamina/package.json

Lines 2 to 8 in 7c6ad54

    
           "name": "lamina", 
        
           "private": true, 
        
           "version": "1.1.19", 
        
           "description": "🍰 An extensable, layer based shader material for ThreeJS.", 
        
           "main": "./index.cjs", 
        
           "module": "./index.js", 
        
           "types": "./index.d.ts",

benmccann · 2022-05-05T04:36:01Z

You don't necessarily have to add "type": "module" - you could rename the ESM file to have an .mjs ending. But the version you posted looks like it would work as well

AlexWarnes · 2022-12-08T16:14:53Z

Wanted to expand on the previous solution for future reference as some things have changed with SvelteKit and, like you mentioned @nilskj, disabling SSR is not at all ideal! (and I've had this issue with other dependencies as well)

Option 1
In your vite.config.js include lamina and three-custom-shader-material in the ssr.noExternal array like:

const config = {
	ssr: {
		noExternal: [
			'three', 
			'lamina',
			'three-custom-shader-material',
		]
	},
	plugins: [sveltekit()],
};

Option 2
You can of course still disable SSR if you want (with or without the vite config changes). And now you can do it at the page level by export const ssr = false in your route level +page.server.js

Disclaimer
And to reiterate, this is not my area of expertise, but option 1 above feels like a better solution so I thought I'd share. For reference I'm using it here for lamina and postprocessing: https://github.com/AlexWarnes/photon/blob/main/vite.config.js

Edit 20221208: added three-custom-shader-material because it is a dep of lamina and can cause the same issue

shot-codes · 2023-01-11T13:40:56Z

Hm, I'm having issues using lamina in a sveltekit project. I see the missing dependencies message, and my imports from lamina/vanilla all resolve to undefined at runtime (in my editor typescript is happy). If I make the suggested changed to vite.config.ts I get a different error when trying to import lamina: require is not defined

FarazzShaikh added the bug Something isn't working label May 4, 2022

nilskj mentioned this issue May 4, 2022

Problems building using Lamina package sveltejs/kit#4821

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using with Sveltekit #35

Using with Sveltekit #35

nilskj commented May 3, 2022

nilskj commented May 3, 2022

FarazzShaikh commented May 4, 2022 •

edited

Loading

CodyJasonBennett commented May 4, 2022

FarazzShaikh commented May 4, 2022

AlexWarnes commented May 4, 2022

CodyJasonBennett commented May 4, 2022

FarazzShaikh commented May 4, 2022

nilskj commented May 4, 2022

CodyJasonBennett commented May 4, 2022

benmccann commented May 4, 2022

CodyJasonBennett commented May 5, 2022 •

edited

Loading

benmccann commented May 5, 2022

CodyJasonBennett commented May 5, 2022 •

edited

Loading

benmccann commented May 5, 2022

AlexWarnes commented Dec 8, 2022 •

edited

Loading

shot-codes commented Jan 11, 2023

Using with Sveltekit #35

Using with Sveltekit #35

Comments

nilskj commented May 3, 2022

nilskj commented May 3, 2022

FarazzShaikh commented May 4, 2022 • edited Loading

CodyJasonBennett commented May 4, 2022

FarazzShaikh commented May 4, 2022

AlexWarnes commented May 4, 2022

CodyJasonBennett commented May 4, 2022

FarazzShaikh commented May 4, 2022

nilskj commented May 4, 2022

CodyJasonBennett commented May 4, 2022

benmccann commented May 4, 2022

CodyJasonBennett commented May 5, 2022 • edited Loading

benmccann commented May 5, 2022

CodyJasonBennett commented May 5, 2022 • edited Loading

benmccann commented May 5, 2022

AlexWarnes commented Dec 8, 2022 • edited Loading

shot-codes commented Jan 11, 2023

FarazzShaikh commented May 4, 2022 •

edited

Loading

CodyJasonBennett commented May 5, 2022 •

edited

Loading

CodyJasonBennett commented May 5, 2022 •

edited

Loading

AlexWarnes commented Dec 8, 2022 •

edited

Loading