solid-start icon indicating copy to clipboard operation
solid-start copied to clipboard

browser-only packages (e.g. plotly.js) can't work in solid-start, even when SSR disabled

Open urish opened this issue 3 years ago • 0 comments

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.

urish avatar Oct 14 '22 17:10 urish