Astro SSR client:load Error: Cannot use import statement outside a module

[AndreiTelteu]

Hi. I have a astro project with my page written in solid-js and i want to use a simple TextInput.
Here is a demo of that i'm trying to do: https://stackblitz.com/edit/github-xmtfif?file=src/pages/index.astro

Error is:

Cannot use import statement outside a module
/home/projects/github-xmtfif/node_modules/@suid/base/createComponentFactory.js:1
import composeClasses from "./composeClasses";

Astro troubleshooting for this error: https://docs.astro.build/en/guides/troubleshooting/#cannot-use-import-statement-outside-a-module

• I tried installing @suid/vite-plugin. Does not help.
• Tried excluding @suid/material and @suid/base from vite ssr process like here: https://docs.astro.build/en/reference/configuration-reference/#vite (vite: { ssr: { external: ['@suid/material', '@suid/base'] )

I tried using noExternal instead: https://vitejs.dev/config/ssr-options.html#ssr-noexternal

      noExternal: [
        '@suid/material',
        '@suid/base',
        '@suid/system',
        '@suid/css',
        '@suid/utils',
        '@suid/styled-engine',
      ],

And now the error is:

ReferenceError: document is not defined
    at Module.findStyleElement [as default] (/node_modules/@suid/css/dom/findStyleElement.js:2:5)
    at /node_modules/@suid/styled-engine/createStyle.js:31:44
    at Proxy.createComputed (/home/projects/github-xmtfif/node_modules/solid-js/dist/server.cjs:56:5)
    at Module.createStyle (/node_modules/@suid/styled-engine/createStyle.js:22:4)
    at Box2 (Box.jsx:30:28)
    at Proxy.createComponent (/home/projects/github-xmtfif/node_modules/solid-js/dist/server.cjs:283:15)
    at createStyled.jsx:50:10
    at Proxy.createComponent (/home/projects/github-xmtfif/node_modules/solid-js/dist/server.cjs:283:15)
    at get children [as children] (FormControl.jsx:97:2)
    at eval (/home/projects/github-xmtfif/node_modules/solid-js/dist/server.cjs:187:35

The only way to make it work is to load my page component with client:only="solid-js", but this means i don't have any ssr on the entire page.

[kedzior-io]

@AndreiTelteu I'm on the same boat. Have AstroJS beautifully working with SolidJs + SSR but the moment I introduce this library or solid-bootstrap, stuff doesn't work anymore.

[awojciak]

I'm having the same issue when using vite-plugin-ssr

[kedzior-io]

@awojciak yeah I really wanted this to work but ... in the end went back to AstroJs + React + MUI which works flawlessly.

[juanrgm]

Closed via 89148a6.

// vite.config.ts
import suid from "@suid/vite-plugin";
import solid from "solid-start/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [suid(), solid({ ssr: false })],
});