#[astro-island] Error hydrating SyntaxError: The requested module does not provide an export

6 messages · Page 1 of 1 (latest)

modern tinsel
#

[astro-island] Error hydrating /src/components/s/AiwbDropDownButton.jsx SyntaxError: The requested module '/packages/starlight/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/postcss.js?v=ba5af048' does not provide an export named 'default' (at postcss.mjs?v=ba5af048:1:8)

astro info:
Astro v5.1.6
Node v20.9.0
System Windows (x64)
Package Manager unknown
Output static
Adapter none
Integrations none

astro.config.mjs:

// @ts-ignore
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
// @ts-ignore
import UnoCSS from 'unocss/astro'
// @ts-ignore
import solidJs from '@astrojs/solid-js';
import path from "path";
import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// https://astro.build/config
export default defineConfig({
    markdown: {
        syntaxHighlight: 'prism',
        gfm: true,
    },
    vite: {
        server: {
            watch: {
                ignored: ["./starlight/*"], // HERE
            },
        },
        resolve: {
            alias: {
                "~": path.resolve(__dirname, "./src")
            }
        }
    },
    integrations: [UnoCSS(), starlight({}), solidJs()],
});

no tailwind, but used a unocss integration.

image.png
#

im using starligt+solid astro integration

#

/src/components/s/AiwbDropDownButton.jsx is a simple solidjs component:

import {createEffect, createSignal} from "solid-js";
//import { DropdownMenu } from "@kobalte/core/dropdown-menu";
//import {Icon} from "@astrojs/starlight/components";

export function AiwbDropDownButton(props) {
    const [open, setOpen] = createSignal(true);

    createEffect(() => {
        console.log("The count is now", open());
    });

    return (<>
            {/*<DropdownMenu open={open()} onOpenChange={setOpen}>*/}
            {/*    <DropdownMenu.Trigger class="button">*/}
            {/*        122123*/}
            {/*    </DropdownMenu.Trigger>*/}
            {/*    <DropdownMenu.Portal>*/}
            {/*        <DropdownMenu.Content>*/}
            {/*            <div class="absolute top-0 left-0 w-12 h-12 bg-red-500"></div>*/}
            {/*        </DropdownMenu.Content>*/}
            {/*    </DropdownMenu.Portal>*/}
            {/*</DropdownMenu>*/}
            <button onClick={()=>{setOpen(!open())}}></button>
    </>

    );
}
rancid solar
#

What client directive are you using?

modern tinsel
#

client：only=“solidjs” @rancid solar

woven inlet
#

@modern tinsel did you find a solution to this?