Solid signal is not working when Accordion is added.

seongs1024 commented 8 months ago

With latest solidjs template, components are not working with signals when the accordion is added to the Counter

Counts of the button doesn't increase when it is clicked.

And the accordion is still collapsed.

The error like:

Unhandled Promise Rejection: SyntaxError: Importing binding name 'default' cannot be resolved by star export entries.

Reproducible steps

npx create solid@latest

√ Where do you want to create the app? ... my-app
√ Which template do you want to use? » with-tailwindcss
√ Server Side Rendering? ... yes
√ Use TypeScript? ... yes

npx solidui-cli@latest init

Would you like to use TypeScript? (recommended) yes
Where is your global CSS file? src/root.css
Where is your tailwind.config.js located? tailwind.config.cjs
Configure the import alias for src director: ~/*

npx solidui-cli@latest add accordion

`src/components/Counter.tsx`

import { createSignal } from "solid-js";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger
} from "~/components/ui/accordion"

export default function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <div>
    <button
      class="w-[200px] rounded-full bg-gray-100 border-2 border-gray-300 focus:border-gray-400 active:border-gray-400 px-[2rem] py-[1rem]"
      onClick={() => setCount(count() + 1)}
    >
      Clicks: {count()}
    </button>
    <Accordion multiple={false} collapsible class="w-full">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that matches the other components' aesthetic.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It's animated by default, but you can disable it if you prefer.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
    </div>
  );
}

sek-consulting commented 8 months ago

Could you try pinning intl-messageformat to 10.5.4? "intl-messageformat": "10.5.4"

seongs1024 commented 8 months ago

After added intl-messageformat to dependencies:

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/intl-messageformat@10.5.5/node_modules/intl-messageformat/lib/index.js?v=8e39c928' does not provide an export named 'default' (at import.mjs?v=8e39c928:1:8)

Do I give you correctly what you look for?

sek-consulting commented 8 months ago

That's weird since pinning to 10.5.4 shouldn't cause a 10.5.5 error to occur. Could you show me the current package.json?

This is the one I created using your instructions and my proposed fix:

{
  "name": "solid-dashboard",
  "scripts": {
    "dev": "solid-start dev",
    "build": "solid-start build",
    "start": "solid-start start",
    "lint": "eslint --fix \"**/*.{ts,tsx,js,jsx}\""
  },
  "type": "module",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.53.0",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-tailwindcss": "^3.13.0",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "solid-start-node": "^0.3.10",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.2.2",
    "vite": "^4.5.0"
  },
  "dependencies": {
    "@kobalte/core": "^0.11.2",
    "@solidjs/meta": "^0.29.1",
    "@solidjs/router": "^0.8.3",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "solid-icons": "^1.1.0",
    "solid-js": "^1.8.5",
    "solid-start": "^0.3.10",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7",
    "intl-messageformat": "10.5.4"
  },
  "engines": {
    "node": "18"
  }
}