Solid: Support for SolidStart?

Question

Solid: Support for SolidStart?

devinrhode2 opened this issue 10 months ago · comments

I was just curious if the solid plugin supports SolidStart.

This is my vite.config.ts so far:

import solid from 'solid-start/vite';
import { defineConfig } from 'vite';
import suidPlugin from '@suid/vite-plugin';

export default defineConfig({
  plugins: [
    solid({
      // Without this, it'll be stuck on "loading..."
      ssr: false,
    }),
    suidPlugin(),
  ],
});

Devin Rhode · Answer 1 · Tue Aug 01 2023 05:58:26 GMT+0800 (China Standard Time)

I had a SolidStart-based app before introducing nx.

I setup an project-based nx monorepo, generated few things I need.

Then, copied in the SolidStart based app into the nx/solid generated folder.

Notably, SolidStart has a root.tsx, whereas the nx/solid generated app had a traditional index.html. One is a pure CSR, reminiscent of CRA, and has a plain index.html file. The other is a full-stack solution (SolidStart) which has ssr/islands capability.

Anyway, I tried my best to merge the two.

At first I got this error when running the SolidStart-based app inside nx:
_{mf-core is what I have named my SolidStart app in this monorepo, as it will be the core of a micro-frontend}

npx nx run mf-core:serve --configuration=development

> nx run mf-core:serve:development

✘ [ERROR] Failed to resolve "solid-start/vite". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]

    node_modules/vite/node_modules/esbuild/lib/main.js:1373:27:
      1373 │         let result = await callback({
           ╵                            ^

    at file:///Users/my/co/project/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66127:43
    at requestCallbacks.on-resolve (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1373:28)
    at handleRequest (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:729:19)
    at handleIncomingPacket (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:755:7)
    at Socket.readFromStdout (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:679:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:343:12)
    at readableAddChunk (node:internal/streams/readable:316:9)
    at Readable.push (node:internal/streams/readable:253:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

  This error came from the "onResolve" callback registered here:

    node_modules/vite/node_modules/esbuild/lib/main.js:1292:20:
      1292 │       let promise = setup({
           ╵                     ^

    at setup (file:///Users/my/co/project/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66104:27)
    at handlePlugins (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1292:21)
    at buildOrContextImpl (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:978:5)
    at Object.buildOrContext (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:786:5)
    at /Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:2176:15
    at new Promise (<anonymous>)
    at Object.build (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:2175:25)
    at build (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:2024:51)
    at bundleConfigFile (file:///Users/my/co/project/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66055:26)

  The plugin "externalize-deps" was triggered by this import

    packages/mf-core/vite.config.ts:3:24:
      3 │ import solidPlugin from 'solid-start/vite';
        ╵                         ~~~~~~~~~~~~~~~~~~

failed to load config from /Users/my/co/project/packages/mf-core/vite.config.ts
Error: Build failed with 1 error:
node_modules/vite/node_modules/esbuild/lib/main.js:1373:27: ERROR: [plugin: externalize-deps] Failed to resolve "solid-start/vite". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
    at failureErrorWithLog (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1649:15)
    at /Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1058:25
    at runOnEndCallbacks (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1484:45)
    at buildResponseToResult (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1056:7)
    at /Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1085:16
    at responseCallbacks.<computed> (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:703:9)
    at handleIncomingPacket (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:762:9)
    at Socket.readFromStdout (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:679:7)
    at Socket.emit (node:events:514:28)
    at addChunk (node:internal/streams/readable:343:12) {
  errors: [
    {
      detail: Error: Failed to resolve "solid-start/vite". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
          at file:///Users/my/co/project/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66127:43
          at requestCallbacks.on-resolve (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:1373:28)
          at handleRequest (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:729:19)
          at handleIncomingPacket (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:755:7)
          at Socket.readFromStdout (/Users/my/co/project/node_modules/vite/node_modules/esbuild/lib/main.js:679:7)
          at Socket.emit (node:events:514:28)
          at addChunk (node:internal/streams/readable:343:12)
          at readableAddChunk (node:internal/streams/readable:316:9)
          at Readable.push (node:internal/streams/readable:253:10)
          at Pipe.onStreamRead (node:internal/stream_base_commons:190:23),
      id: '',
      location: [Object],
      notes: [Array],
      pluginName: 'externalize-deps',
      text: 'Failed to resolve "solid-start/vite". This package is ESM only but it was tried to load by `require`. See http://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.'
    }
  ],
  warnings: []
}

That was easy to fix, in my packages/mf-core/package.json I add "type": "module",.

Presto, that is fixed! The dev server runs:

npx nx run mf-core:serve --configuration=development

> nx run mf-core:serve:development

  ➜  Local:   http://localhost:2226/
  ➜  Inspect: http://localhost:2226/__inspect/

  ➜  Page Routes:
     ┌─ http://localhost:2226/*404
     ├─ http://localhost:2226/add
     ├─ http://localhost:2226/
     └─ http://localhost:2226/manage

  ➜  API Routes:
     None! 👻

Now I go to load the app - nothing renders.

First a contextual baseline:
Before nx setup:
index.html:

<!DOCTYPE html>
<html>
    <body>
        <script type="module" src="/@vite/client"></script>
        <script type="module" async src="/@fs//Users/my/co/project/ui/src/entry-client.tsx"></script>
    </body>
</html>

First two requests were subsequently:

http://localhost:2226/@vite/client
http://localhost:2226/@fs//Users/drhode23/optum/bank_account_connector/ui/src/entry-client.tsx

entry-client.tsx returns:

import {createComponent as _$createComponent} from "/node_modules/.vite/deps/solid-js_web.js?v=72c1939c";
import {mount, StartClient} from "/node_modules/solid-start/entry-client/index.tsx?v=1140f2d2";
mount(()=>_$createComponent(StartClient, {}), document);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJtb3VudCIsIlN0YXJ0Q2xpZW50IiwiXyRjcmVhdGVDb21wb25lbnQiLCJkb2N1bWVudCJdLCJzb3VyY2VzIjpbImVudHJ5LWNsaWVudC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbW91bnQsIFN0YXJ0Q2xpZW50IH0gZnJvbSAnc29saWQtc3RhcnQvZW50cnktY2xpZW50JztcblxubW91bnQoKCkgPT4gPFN0YXJ0Q2xpZW50IC8+LCBkb2N1bWVudCk7XG4iXSwibWFwcGluZ3MiOiI7QUFBQSxTQUFTQSxLQUFLLEVBQUVDLFdBQVcsUUFBUSwwQkFBMEI7QUFFN0RELEtBQUssQ0FBQyxNQUFBRSxpQkFBQSxDQUFPRCxXQUFXLEtBQUcsRUFBRUUsUUFBUSxDQUFDIn0=

After Nx, Problem: nothing renders:

browser console logs

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
client.ts:18 [vite] connecting...
client.ts:150 [vite] connected.

index.html:

<!DOCTYPE html>
<html>
    <body>
        <script type="module" src="/@vite/client"></script>
        <script type="module" async src="/@fs/packages/mf-core/src/entry-client.tsx"></script>
    </body>
</html>

Request to entry-client.tsx returns html (fails). Full url is: http://localhost:2226/@fs/packages/mf-core/src/entry-client.tsx
It returns this html, which is actually the same as the html served from root /, but with some minor whitespace changes:

<!DOCTYPE html><html ><body ><script type="module" src="/@vite/client"></script><script type="module" async src="/@fs/packages/mf-core/src/entry-client.tsx"></script></body></html>

Ok... so, what happens if I directly request the original entry-client.tsx url under nx?

It returns the source code directly, without any transpiling:

import { mount, StartClient } from 'solid-start/entry-client';

mount(() => <StartClient />, document);

So there are multiple issues.

I think I'll need to consider:

"forking" the @nxext/solid plugin
Dropping SolidStart in favor of plain Solid (also removes need to deploy a node server)
Middle road: just hack it together?
Use npm workspaces?
Run SolidStart separately, via a shell script (!!)

Devin Rhode · Answer 2 · Tue Aug 01 2023 12:19:55 GMT+0800 (China Standard Time)

tried moving solid-start deps into my mf-core/package.json, that didn't fix the problem by itself.

But I now have these scripts in my root package.json:

    "serve": "run-p -lnc serve:*",
    "serve:mf-core": "npm run --prefix packages/mf-core dev",
    "serve:nextjs-demo": "nx run nextjs-demo:serve --configuration=development",

Someone that knows nx shall come and save me/this code one day...

i.e. I'm running SolidStart by just directly running the commands solid-start itself generates for you (i.e. solid-start dev). Probably a key issue is the the serve nx task/thingy isn't using this solid-start dev command under the hood.

Dominik Pieper · Answer 3 · Tue Aug 01 2023 14:57:11 GMT+0800 (China Standard Time)

I didn't look closely at SolidStart yet, but I'd probably put it into its own plugin rather than add it to the Solid one.

Devin Rhode · Answer 4 · Wed Aug 02 2023 02:35:59 GMT+0800 (China Standard Time)

Conclusion:
I think the underlying plugin needs to at least invoke solid-start dev instead of vite dev (or solid-start build instead of vite build, etc).

I ended up just running SolidStart via separate command npm command, albeit inside my packages/ directory. I will probably have to learn some nitty-gritty Nx stuff to get everything playing nicely, but for now, it works for my POC.