terracotta
terracotta copied to clipboard
Published
20 hours ago •
lxsmnsyc
lxsmnsyc
Issue when using solid-headless with Astro
This message is copied from issue #6 as it was deemed to be a different issue
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/[email protected]/node_modules/astro/dist/core/build/generate.js:71:20)
at async staticBuild (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/static-build.js:68:5)
at async AstroBuilder.build (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/index.js:86:5)
at async AstroBuilder.run (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/index.js:127:7)
at async build (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/index.js:22:3)
at async runCommand (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/[email protected]/node_modules/astro/dist/cli/index.js:190:14)
at async cli (file:///Users/oscar/github/oscartbeaumont/Mattrax/node_modules/.pnpm/[email protected]/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 the astro.config.mjs to make the project build successfully.
export default defineConfig({
integrations: [solidJs(), tailwind()],
vite: {
ssr: {
noExternal: ["solid-headless", "solid-use"],
},
},
});
Released 0.13.0 to address this issue. Please let me know if this still persists.