Broken build when using canvas

[stoic geode]

npm run dev - works
npm run build - fails

I don't need to use canvas on SSR - so if there is any way to make the build work without the canvas package that will be even better.

The error I'm getting:

Error [RollupError]: Unexpected character '' (Note that you need plugins to import files that are not JavaScript)

Demo repo to reproduce problem - https://github.com/gmadar/solid-start-failed-build

• I've also tried to use https://github.com/danielgindi/rollup-plugin-natives from https://github.com/Automattic/node-canvas/issues/1504 but that didn't work, maybe I'm using Vite wrong...
  [repost of #1069203504490631280 message with better explanation]

🙏

[proven fern]

Did you try to use the built-in unstable_clientOnly instead of the custom? Yours solution is eagerly importing the component

[stoic geode]

no I haven't. new to Solid... how do I use it?

you mean this - https://github.com/solidjs/solid-start/blob/f2910b9ad8e69960037ee11511c77e5db66b12db/packages/start/index.tsx#L27 ?

[proven fern]

Yup, I'll send you an example usage in a few minutes

https://github.com/pawelblaszczyk5/planotes/blob/5a55cbd8b48158d6845b264725e003c43a7a1a5b/src/components/NoteForm.tsx#L36

It should properly treeshake the component out of the server bundle

[stoic geode]

@proven fern just tried it - https://github.com/gmadar/solid-start-failed-build/blob/master/src/routes/index.tsx#L7
build is still failing 😞

[proven fern]

Give me 20 minutes and I'll try to fork it and play with it

[proven fern]

Okay, I've got it, feel free to take a look: https://github.com/pawelblaszczyk5/solid-start-failed-build

Basically - konva has some nasty side effects when importing which is causing the canvas package to be bundled into SSR result (which we don't even need in this case). I moved it to dynamic import inside onMount callback, but it can be also solved with some env variable/isServer check to prevent a waterfall. The clientOnly wasn't needed anymore so I deleted it also

[stoic geode]

ohh got it. nice! thank you!
Any idea why the clientOnly didn't work? since Konva was behind Stage I expected it to behave the same

[proven fern]

Tbh, I have no idea xD I'm surprised because of this as well. Maybe it's just because of the treeshaking stuff and Konva not being marked as a side-effect free 🤔

Maybe turning on more aggressive tree shaking would do the thing? I can check it later, because the dynamic import always complicates stuff

[stoic geode]

ok. Thanks that really helped

[stoic geode]

@proven fern - I think I found a bug.
unstable_clientOnly is now working for me - I've just removed canvas it from the package.json file
(updated the repo with the fix)

[proven fern]

That's strange, I checked it also 😂

Don't you get error in runtime after build?

[stoic geode]

yeah... there's a runtime error😵‍💫

[proven fern]

Okay, I found the problem with ClientOnly

It looks like vite isn't statically replacing the isServer variable that it's used inside, so it can't properly treeshake based on it.

Take a look at the new commit in my repo, the clientOnly is exact same version as in solid-start but I changed condition from isServer to import.meta.env.SSR

I'll try to tackle this issue upstream also