JSX element type 'Tabs' does not have any construct or call signatures.

[dimaslanjaka]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

1. yarn add flowbite-react@^0.5.0
2. create Tabs element in typescript tsx

import { FlowbiteToastContext } from '@root/src/components/FlowbiteLayout';
import { Button, Label, Tabs, TextInput } from 'flowbite-react';
import React from 'react';
import { HiUserCircle } from 'react-icons/hi';
import { useOutletContext } from 'react-router-dom';

export default function Login() {
  return (
    <main className="space-y-4">
      <Tabs aria-label="Tabs with underline" style="underline">
        <Tabs.Item active title="Profile" icon={HiUserCircle}>
          This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </Tabs.Item>
        <Tabs.Item title="Dashboard" icon={HiUserCircle}>
          This is <span className="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</span>.
          Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
          control the content visibility and styling.
        </Tabs.Item>
      </Tabs>
      <form className="flex max-w-md flex-col gap-4 mx-auto">
        <div>
          <div className="mb-2 block">
            <Label htmlFor="email1" value="Your email" />
          </div>
          <TextInput id="email1" type="email" placeholder="name@flowbite.com" required />
        </div>
        <div>
          <div className="mb-2 block">
            <Label htmlFor="password1" value="Your password" />
          </div>
          <TextInput id="password1" type="password" required />
        </div>
        <Button type="submit">Submit</Button>
      </form>
    </main>
  );
}

Current behavior

{ 
    "flowbite": "^2.2.1",
    "flowbite-react": "^0.5.0",
    "tailwindcss": "^3.4.1",
    "sass-loader": "^12.6.0",
}

• I just read tutorial on https://www.flowbite-react.com/docs/components/tabs but Tabs is not default export
  
  

• because of issue Complex selectors in '.peer:focus ~ :is(.dark .peer-focus\:dark\:text-blue-500)' can not be transformed to an equivalent selector without ':is()'. #1065 I cant update flowbite-react

Expected behavior

Need working Tabs element in typescript

[SutuSebastian]

can u please use the latest flowbite-react version? which is currently 0.7.2 and then report back

[SutuSebastian]

The tutorial on https://www.flowbite-react.com/docs/components/tabs is for the latest version of flowbite-react, since 0.5.0 lot of things changed and it would be a massive slowdown if we start debugging old unstable versions.

I suggest we try to replicate ur local dev env using the latest version of flowbite-react and dig from there down. I believe this is solvable at the webpack/postcss level rather than at the library level, since the library works on all available React platforms (i tested this myself when i wrote the tutorials in the docs).

[dimaslanjaka]

@SutuSebastian can you give me an example working postcss webpack config which working for latest react-flowbite ?

because no documentation for config postcss for flowbite-react

[SutuSebastian]

Can u go a bit more in details regarding ur local development server? (eg: CRA / ejected CRA / Vite / Webpack / Parcel / ...etc), what parsers/plugins/extentions/etc did u use 🤔

[dimaslanjaka]

Can u go a bit more in details regarding ur local development server? (eg: CRA / ejected CRA / Vite / Webpack / Parcel / ...etc), what parsers/plugins/extentions/etc did u use 🤔

• https://github.com/dimaslanjaka/webpack-boilerplate/tree/master/config
• Complex selectors in '.peer:focus ~ :is(.dark .peer-focus\:dark\:text-blue-500)' can not be transformed to an equivalent selector without ':is()'. #1065

[Franck-Junior]

I had the same issue on 0.6.4, upgraded to 0.7.2 and the issue is resolved on my end

[dimaslanjaka]

I had the same issue on 0.6.4, upgraded to 0.7.2 and the issue is resolved on my end

is in your project working using webpack ? can you show me configuration of your PostCSS and other stylesheet process webpack ?
because no documentation to setting it, i think this the major problem of this problem #1065

[Franck-Junior]

May need some cleanup but here is what we have

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwind.config.js

import flowbite from "flowbite/plugin";
// import flowbiteTypography from "flowbite-typography";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./node_modules/flowbite/**/*.js",
    "./node_modules/flowbite-react/lib/**/*.js",
    "./app/**/*.{js,ts,jsx,tsx,mdx}", // Note the addition of the `app` directory.
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // Tremor module

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    fontFamily: {
      lobster: ["Lobster", "cursive"],
      roboto: ["Roboto", "sans-serif"],
      inter: [
        "Inter",
        "ui-sans-serif",
        "system-ui",
        "-apple-system",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "Noto Sans",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji",
      ],
      charts: [
        "Inter",
        "ui-sans-serif",
        "system-ui",
        "-apple-system",
        "system-ui",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "Noto Sans",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji",
      ],
      // sans: [
      //   "Inter",
      //   "ui-sans-serif",
      //   "system-ui",
      //   "-apple-system",
      //   "system-ui",
      //   "Segoe UI",
      //   "Roboto",
      //   "Helvetica Neue",
      //   "Arial",
      //   "Noto Sans",
      //   "sans-serif",
      //   "Apple Color Emoji",
      //   "Segoe UI Emoji",
      //   "Segoe UI Symbol",
      //   "Noto Color Emoji",
      // ],
    },
    transparent: "transparent",
    current: "currentColor",
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          100: "#dbeafe",
          200: "#bfdbfe",
          300: "#93c5fd",
          400: "#60a5fa",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
          800: "#1e40af",
          900: "#1e3a8a",
          950: "#172554",
        },
        // light mode
        tremor: {
          brand: {
            faint: "#eff6ff", // blue-50
            muted: "#bfdbfe", // blue-200
            subtle: "#60a5fa", // blue-400
            DEFAULT: "#3b82f6", // blue-500
            emphasis: "#1d4ed8", // blue-700
            inverted: "#ffffff", // white
          },
          background: {
            muted: "#f9fafb", // gray-50
            subtle: "#f3f4f6", // gray-100
            DEFAULT: "#ffffff", // white
            emphasis: "#374151", // gray-700
          },
          border: {
            DEFAULT: "#e5e7eb", // gray-200
          },
          ring: {
            DEFAULT: "#e5e7eb", // gray-200
          },
          content: {
            subtle: "#9ca3af", // gray-400
            DEFAULT: "#6b7280", // gray-500
            emphasis: "#374151", // gray-700
            strong: "#111827", // gray-900
            inverted: "#ffffff", // white
          },
        },
        // dark mode
        "dark-tremor": {
          brand: {
            faint: "#0B1229", // custom
            muted: "#172554", // blue-950
            subtle: "#1e40af", // blue-800
            DEFAULT: "#3b82f6", // blue-500
            emphasis: "#60a5fa", // blue-400
            inverted: "#030712", // gray-950
          },
          background: {
            muted: "#131A2B", // custom
            subtle: "#1f2937", // gray-800
            DEFAULT: "#111827", // gray-900
            emphasis: "#d1d5db", // gray-300
          },
          border: {
            DEFAULT: "#1f2937", // gray-800
          },
          ring: {
            DEFAULT: "#1f2937", // gray-800
          },
          content: {
            subtle: "#4b5563", // gray-600
            DEFAULT: "#6b7280", // gray-500
            emphasis: "#e5e7eb", // gray-200
            strong: "#f9fafb", // gray-50
            inverted: "#000000", // black
          },
        },
      },
      boxShadow: {
        // light
        "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
        "tremor-card":
          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
        "tremor-dropdown":
          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
        // dark
        "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
        "dark-tremor-card":
          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
        "dark-tremor-dropdown":
          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
      },
      borderRadius: {
        "tremor-small": "0.375rem",
        "tremor-default": "0.5rem",
        "tremor-full": "9999px",
      },
      fontSize: {
        "tremor-label": ["0.75rem"],
        "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
        "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
        "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
      },
    },
  },
  plugins: [
    // flowbiteTypography,
    flowbite,
  ],
  darkMode: "class",
};

webpack config in nextjs

webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },

[dimaslanjaka]

after update 0.7.x got new error

ERROR in ./node_modules/flowbite-react/lib/esm/index.js 52:0-55
Module not found: Error: Can't resolve './theme-store' in 'E:\Repositories\android-blog\release-repo\node_modules\flowbite-react\lib\esm'
Did you mean 'index.js'?
BREAKING CHANGE: The request './theme-store' failed to resolve only because it was resolved as fully specified(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.