Typescript and build issues

👋 Hello my friends. We are testing lamina, which looks amazing.

Sadly we are having several issues:

Typings:

Argument of type '{ color: string; shading: string; transmission: number; layers: Depth[]; }' is not assignable to parameter of type '(LayerMaterialParameters & AllMaterialParams) | undefined'.
  Object literal may only specify known properties, and 'shading' does not exist in type 'LayerMaterialParameters & AllMaterialParams'.

via

const material = new LayerMaterial({
    color: "#f00",
    shading: "physical", // <-- Typing does not match @types/three
    transmission: 1,
    /* ...*/
})

Screenshot 2022-03-16 at 07 53 53

Build fails: (using next.js on Vercel)

During development everything works. The issue occurs when running next build

> Build error occurred
--
07:08:40.409 | TypeError: THREE.MathUtils.generateUUID(...).replaceAll is not a function
07:08:40.409 | at new Abstract (/vercel/path0/node_modules/lamina/vanilla.cjs.js:124:48)
07:08:40.410 | at new Depth (/vercel/path0/node_modules/lamina/vanilla.cjs.js:372:5)
07:08:40.410 | at /vercel/path0/.next/server/pages/poop.js:53:12 {
07:08:40.410 | type: 'TypeError'
07:08:40.410 | }

Screenshot 2022-03-16 at 07 54 44

Reproduction:

Sadly our sandbox repository is currently private so hopefully the Codesandbox helps.

https://codesandbox.io/s/fast-violet-3ikixi?file=/src/App.tsx:315-379

Versions:

{
  "lamina": "^1.1.3",
   "three": "^0.138.3",
  "@react-three/fiber": "^7.0.26"
}

Help is highly appreciated.
If you need a better example, we can create a full reproduction of our setup (it's really just wrapped in a basic next.js page).
Our original example uses Suspense which does not change the behavior and is not required for this example to run.

pmndrs / lamina