S
SolidJS•3y ago
Vincent Udén

`unstable_clientOnly` doesn't solve SSR issues when importing a dependency

I'm running SolidStart and have had some issues throughout with certain deps that do not play well on the server side. Usually this has been resolved using unstable_clientOnly to ignore the dependency on the server side. This time it's not working though. This works fine in my component using npm run dev, but not using npm run build. 
const HexColorPicker = unstable_clientOnly(async () => (await import("solid-colorful")).HexColorPicker);
const HexColorPicker = unstable_clientOnly(async () => (await import("solid-colorful")).HexColorPicker);
I have tried 
export default defineConfig({
  plugins: [solid({ adapter: vercel({ edge: false })})],
  optimizeDeps: {
    include: [],
    exclude: ["solid-colorful"],
  },
  ssr: {
    noExternal: ["solid-colorful"],
  },
});
export default defineConfig({
  plugins: [solid({ adapter: vercel({ edge: false })})],
  optimizeDeps: {
    include: [],
    exclude: ["solid-colorful"],
  },
  ssr: {
    noExternal: ["solid-colorful"],
  },
});
to no success. The component itself is also wrapped in a unstable_clientOnly so it's content shouldn't even be loaded on the server at all. I can't fathom why npm run build is even trying to go over the file at all. ANY help or pointers would be much appreciated as I have been struggling for hours at this point
1 Reply
Vincent Udén
Vincent UdénOP•3y ago
I ended up switching color picker library, but I still would love to know what the actual problem was

Did you find this page helpful?