Collapse component not open ing or closing

[chris-hinds]

I may be doing something really silly here however I cannot get the collapse component working.

I am using NextJS 13 and the app directory to make use of server components.

This is my example component using Collapse

"use client";
import { useState } from "react";
import { Button, Collapse } from "react-daisyui";

// TODO: Create menu item type
const MenuItem = ({ item }: { item: any }) => {
  const [isOpen, setIsOpen] = useState(false);

  const {
    item_data: { name, variations },
  } = item;

  const handleOpen = () => {
    setIsOpen(!isOpen);
  };

  return (
    <>
      <Button onClick={() => handleOpen()}>{isOpen ? "close" : "open"}</Button>
      <Collapse icon="arrow" open={isOpen} className="py-2">
        <Collapse.Title className="text-xl font-medium">{name}</Collapse.Title>
        <Collapse.Content>
          attribute is necessary to make the div focusable
        </Collapse.Content>
      </Collapse>
    </>
  );
};

export default MenuItem;

The component renders, but doesn't show the arrow icon and is always open, modifying the open state does nothing and even just seeing open={false} the component remains open. It's as if the JS for the component isn't running at all.

The handleOpen function is working as expected as upon clicking the open button it's text changes to close

[chris-hinds]

Perhaps I missed something. Looking at the README I found that tom configure my next.config.js like so;

const withTM = require("next-transpile-modules")(["react-daisyui"]);

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: { appDir: true },
};

module.exports = withTM({
  ...nextConfig,
});

However now next fails to run/build with the following error;

error - ./styles/globals.css
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

[benjitrosch]

Hi @chris-hinds, thanks for reporting this, I'll take a look. Haven't done much testing on Next.js 13 yet.

[benjitrosch]

@chris-hinds I'm running your code without modifications and getting this result, which looks correct:

https://user-images.githubusercontent.com/64439681/205475406-1744b697-6a6e-48ac-bf41-b049638137a2.mp4

One small observation I've found regarding Next.js 13 is that next-transpile-modules is no longer required, but will not break anything afaik.

As for your second issue Module parse failed: Unexpected character '@' (1:0), it sounds like TailwindCSS might have not been set up properly? Perhaps try uninstalling and following the steps found here: https://tailwindcss.com/docs/guides/nextjs

If all else fails, feel free to post a link to your project repo here and I'd be happy to take a look!

[chris-hinds]

hmm TW looks to be setup correctly (I did use their NextJS template).

Are you able to share the code used to create that example? I wondering if I am missing a specific wrapping component perhaps.

[benjitrosch]

@chris-hinds sure thing, pushed it up to this repo: https://github.com/benjitrosch/react-daisyui-next-13-test

[chris-hinds]

Thanks for that @benjitrosch I have been through that repo and compared the work to my own repo and weirdly cannot get the collapse in mine working still.

I think I actually have a wider problem in that it seems like none of the react-daisyui components are working for me.

I tried the button and the modal, the button doesn't come in with any of the styling like the one in your test repo and the modal is just permanently open just like the collapse.

[chris-hinds]

Ahhhhhh man! I am using a monorepo with yarn workspaces and did not correctly reference the react-daisyui js in my tailwind config.

The below config is correct for use within a mono repo.

content: [
    "../../node_modules/daisyui/dist/**/*.js",
    "../../node_modules/react-daisyui/dist/**/*.js",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

Updating this config to properly reference the root-level node modules solves the issue.

content: [
    "../../node_modules/daisyui/dist/**/*.js",
    "../../node_modules/react-daisyui/dist/**/*.js",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],

Apologies for the issue @benjitrosch !