Can't use with solid start

[Zachiah]

Reproduction: https://github.com/Zachiah/solid-headless-solid-start-integration-problems

It works in production but not in development

[lxsmnsyc]

Thanks for submitting an issue. This is a known issue when using solid-headless (and other similarly structured libraries) in Vite SSR. You can try this solution provided in Solid Start's template: https://github.com/solidjs/solid-docs-next/blob/main/vite.config.ts#L125-L131

[lxsmnsyc]

This should be fixed in 0.12

[oscartbeaumont]

This is also a problem with Astro. Maybe some clearer documentation for it would be nice.

[lxsmnsyc]

@oscartbeaumont this should be fixed on Astro now, unless you can expand more on the issue you are experiencing and possibly a repro would be much appreciated.

[oscartbeaumont]

The codebase I am using is closed source for now but I could invite you to it if you can't reproduce the issue. I got the following error when doing a production build (astro build):

Error

generating static routes 
 error   Named export 'Popover' not found. The requested module 'solid-headless' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:
  
  import pkg from 'solid-headless';
  const { Popover, PopoverButton, Transition, TransitionChild, PopoverPanel, TabGroup, TabList, Tab } = pkg;
  
file:///Users/oscar/github/oscartbeaumont/Mattrax/landing/dist/entry.mjs?time=1663903191396:4
import { Popover, PopoverButton, Transition, TransitionChild, PopoverPanel, TabGroup, TabList, Tab } from 'solid-headless';
         ^^^^^^^
SyntaxError: Named export 'Popover' not found. The requested module 'solid-headless' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'solid-headless';
const { Popover, PopoverButton, Transition, TransitionChild, PopoverPanel, TabGroup, TabList, Tab } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
    at async generatePages (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/astro@1.3.0/node_modules/astro/dist/core/build/generate.js:71:20)
    at async staticBuild (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/astro@1.3.0/node_modules/astro/dist/core/build/static-build.js:68:5)
    at async AstroBuilder.build (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/astro@1.3.0/node_modules/astro/dist/core/build/index.js:86:5)
    at async AstroBuilder.run (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/astro@1.3.0/node_modules/astro/dist/core/build/index.js:127:7)
    at async build (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/astro@1.3.0/node_modules/astro/dist/core/build/index.js:22:3)
    at async runCommand (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/astro@1.3.0/node_modules/astro/dist/cli/index.js:190:14)
    at async cli (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/astro@1.3.0/node_modules/astro/dist/cli/index.js:207:5)
 ELIFECYCLE  Command failed with exit code 1.

This codebase is a completly new Astro project I created yesterday and is using the Astro integrations for SolidJS and Tailwind CSS. I included the package.json and the component using the Popover below. This package is in a pnpm workspace

package.json

{
  "name": "@mattrax/landing",
  "type": "module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/solid-js": "^1.1.0",
    "@astrojs/tailwind": "^2.0.1",
    "@solid-primitives/event-listener": "^2.2.2",
    "astro": "^1.3.0",
    "clsx": "^1.2.1",
    "solid-headless": "^0.12.6",
    "solid-js": "^1.4.3",
    "tailwindcss": "^3.0.24"
  },
  "devDependencies": {
    "@babel/core": "^7.19.1"
  }
}

component using `Popover` - A direct conversion of a TailwindUI template to SolidJS

import {
  Popover,
  PopoverButton,
  PopoverPanel,
  Transition,
  TransitionChild,
} from "solid-headless";
import clsx from "clsx";

import { Button } from "./Button";
import { Container } from "./Container";
import { Logo } from "./Logo";
import { NavLink } from "./NavLink";

function MobileNavLink({ href, children }) {
  return (
    <PopoverButton as={Link} href={href} className="block w-full p-2">
      {children}
    </PopoverButton>
  );
}

function MobileNavIcon({ open }) {
  return (
    <svg
      aria-hidden="true"
      className="h-3.5 w-3.5 overflow-visible stroke-slate-700"
      fill="none"
      strokeWidth={2}
      strokeLinecap="round"
    >
      <path
        d="M0 1H14M0 7H14M0 13H14"
        className={clsx(
          "origin-center transition",
          open && "scale-90 opacity-0"
        )}
      />
      <path
        d="M2 2L12 12M12 2L2 12"
        className={clsx(
          "origin-center transition",
          !open && "scale-90 opacity-0"
        )}
      />
    </svg>
  );
}

function MobileNavigation() {
  return (
    <Popover>
      {({ isOpen }) => (
        <>
          <PopoverButton
            className="relative z-10 flex h-8 w-8 items-center justify-center [&:not(:focus-visible)]:focus:outline-none"
            aria-label="Toggle Navigation"
          >
            {({ open }) => <MobileNavIcon open={open} />}
          </PopoverButton>
          <Transition>
            <TransitionChild
              as={Fragment}
              enter="duration-150 ease-out"
              enterFrom="opacity-0"
              enterTo="opacity-100"
              leave="duration-150 ease-in"
              leaveFrom="opacity-100"
              leaveTo="opacity-0"
            >
              <Popover.Overlay className="fixed inset-0 bg-slate-300/50" />
            </TransitionChild>
            <TransitionChild
              as={Fragment}
              enter="duration-150 ease-out"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="duration-100 ease-in"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <PopoverPanel
                as="div"
                className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl bg-white p-4 text-lg tracking-tight text-slate-900 shadow-xl ring-1 ring-slate-900/5"
              >
                <MobileNavLink href="#features">Features</MobileNavLink>
                <MobileNavLink href="#testimonials">Testimonials</MobileNavLink>
                <MobileNavLink href="#pricing">Pricing</MobileNavLink>
                <hr className="m-2 border-slate-300/40" />
                <MobileNavLink href="/login">Sign in</MobileNavLink>
              </PopoverPanel>
            </TransitionChild>
          </Transition>
        </>
      )}
    </Popover>
  );
}

export function Header() {
  return (
    <header className="py-10">
      <Container>
        <nav className="relative z-50 flex justify-between">
          <div className="flex items-center md:gap-x-12">
            <a href="#" aria-label="Home">
              <Logo className="h-10 w-auto" />
            </a>
            <div className="hidden md:flex md:gap-x-6">
              <NavLink href="#features">Features</NavLink>
              <NavLink href="#testimonials">Testimonials</NavLink>
              <NavLink href="#pricing">Pricing</NavLink>
            </div>
          </div>
          <div className="flex items-center gap-x-5 md:gap-x-8">
            <div className="hidden md:block">
              <NavLink href="/login">Sign in</NavLink>
            </div>
            <Button href="/register" color="blue">
              <span>
                Get started <span className="hidden lg:inline">today</span>
              </span>
            </Button>
            <div className="-mr-1 md:hidden">
              <MobileNavigation />
            </div>
          </div>
        </nav>
      </Container>
    </header>
  );
}

I ended up having to add the following to make the project build successfully.

export default defineConfig({
  integrations: [solidJs(), tailwind()],
  vite: {
    ssr: {
      noExternal: ["solid-headless", "solid-use"],
    },
  },
});

[lxsmnsyc]

Okay so that's actually a different error from this issue. I'd recommend making a new issue thread, then continue our discussion there.