browser-only packages (e.g. plotly.js) can't work in solid-start, even when SSR disabled
First of all, Solid is awesome! I have been using it for two days now and I love it.
I created a repo that reproduces the issue: https://github.com/urish/solid-start-plotly-ssr-issue
The first commit (urish/solid-start-plotly-ssr-issue@26e5b11a4c68313b094c41fb309622b96ec7a6da) is just the clean state after running npm create solid, selecting bare, ssr disabled, and typescript enabled.
The second commit (urish/solid-start-plotly-ssr-issue@45a79fb2566cd23d98f9a07e3f0780ad1044dfe4) adds plotly.js and a simple <Graph> component that loads plotly and create a simple plot with it.
When you run npm run dev, you get the following error message:
ReferenceError: self is not defined
at 11 (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:6961:9)
at o (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:631)
at C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:682
at 244.../constants/numerical (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:46649:10)
at o (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:631)
at C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:682
at 1.../src/lib (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:10:11)
at o (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:631)
at C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:682
at 226.../build/plotcss (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:44035:1)
at o (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:631)
at C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:682
at 5.../src/core (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:90:18)
at o (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:631)
at C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:682
at 8../aggregate (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:105:14)
at o (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:631)
at r (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:797)
at C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:826
at C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:88
at Object.<anonymous> (C:\p\solid-start-plotly-ssr-issue\node_modules\plotly.js-basic-dist\plotly-basic.js:7:322)
at Module._compile (node:internal/modules/cjs/loader:1149:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
at Module.load (node:internal/modules/cjs/loader:1027:32)
at Module._load (node:internal/modules/cjs/loader:868:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:526:24)
at async nodeImport (file:///C:/p/solid-start-plotly-ssr-issue/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:53516:21)
at async eval (/src/components/Graph.tsx:8:31)
at async instantiateModule (file:///C:/p/solid-start-plotly-ssr-issue/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:53445:9)
As far as I understand, the issue is that solid-start/vite tries to load the package in node.js, and this package was only meant for the browser.
I also tried loading the <Graph> component as lazy, but the problem persist.
Happy to provide any other information you find helpful.