Canonical react-daisyui example

[ChrisCates]

When attempting to use react-daisyui with: https://github.com/daisyui/daisyui-next

With the addition of:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['react-daisyui'],
  reactStrictMode: true,
}

module.exports = nextConfig

It will not apply styles.

I noticed that you need to use the 'use client' directive when using react-daisyui components. This shouldn't be necessary. Given that the react-daisyui library should be applying purely class names at static runtime, therefore, should fully support SSR rendering.

Certain elements that require DOM should require the client directive. But, only those specific elements (ie: the Theme Provider etc)

Just reopening issue seen here: https://github.com/daisyui/daisyui-next/issues/1

[ChrisCates]

Okay, this is my bad. But, fortunately it adds more clarity.

You need this in content.

    'node_modules/daisyui/dist/**/*.js',
    'node_modules/react-daisyui/dist/**/*.js',

Bad of me to assume the existing config was okay. Should be as follows;

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

Hopefully this helps future people debugging.