themesberg
Cannot generate file .flowbite-react/class-list.json when deploying on Vercel
- [X] I have searched the Issues to see if this bug has already been reported
- [X] I have tested the latest version
Steps to reproduce
Deploy nextjs app with flowbite-react on Vercel
Current behavior
In build logs I have the following error:
Failed to generate .flowbite-react/class-list.json: TypeError: this.checkedMap.values(...).find is not a function
at get showWarning [as showWarning] (file:///vercel/path0/node_modules/flowbite-react/dist/cli/utils/create-init-logger.js:13:39)
at Object.log (file:///vercel/path0/node_modules/flowbite-react/dist/cli/utils/create-init-logger.js:30:39)
at build (file:///vercel/path0/node_modules/flowbite-react/dist/cli/commands/build.js:44:16)
And some styles for components like Modal, Button and Dropdown are not working properly.
Expected behavior
No error and right styles
Context
Issue appeared after updating from V0.11.7 to V0.12.7
NextJS: 14.2.26 Tailwind: 3.4.1
Hey there, thanks for reporting!
Did u try to run a clean deploy? (eg: no Vercel cache)
Hey there, thanks for reporting!
Did u try to run a clean deploy? (eg: no Vercel cache)
yes, I tried it
That is weird. Our docs https://flowbite-react.com/ run on same major versions, absolutely no issues.
Will dig more.
if this helps, this is what I have in config.tsx after migrating:
/* eslint-disable */
// @ts-nocheck
// biome-ignore-all lint: auto-generated file
// This file is auto-generated by the flowbite-react CLI.
// Do not edit this file directly.
// Instead, edit the .flowbite-react/config.json file.
import { StoreInit } from "flowbite-react/store/init";
import React from "react";
export const CONFIG = {
dark: true,
prefix: "",
version: 3,
};
export function ThemeInit() {
return <StoreInit {...CONFIG} />;
}
ThemeInit.displayName = "ThemeInit";
and this is config.json
{
"$schema": "https://unpkg.com/flowbite-react/schema.json",
"components": [],
"dark": true,
"path": "src/components",
"prefix": "",
"rsc": true,
"tsx": true,
"version": 3
}
Component <ThemeInit /> is rendered in 'head' tag in app/layout.tsx,
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<PublicEnvScript />
<ThemeInit />
<ThemeModeScript />
</head>
<App>{children}</App>
</html>
);
}
maybe I render it wrong? since error seems to be related to showing a warning for this component.
Also I noticed, builds in docker are working fine as they were before
Config files look fine, usage of <ThemeInit /> looks fine.
Whats the vercel config looking like?
Eg:
- node version
- using root directory or not
- etc
on vercel website i have this settings:
node: 20.x no root directory others are default or disabled
in repository in vercel.json file only headers are defined
next.config.mjs:
import withFlowbiteReact from "flowbite-react/plugin/nextjs";
/** @type {import('next').NextConfig} */
const NextConfig = {
output: "standalone",
reactStrictMode: false,
images: {
unoptimized: true,
},
}
export default withFlowbiteReact(NextConfig);
I just now set the node version to 22.x and seems like it fixed this issue
my bad for not checking it sooner, but I didn't see a required node version bump in releases changelogs
I suggest we keep this issue open, because there is no node 22.x minimum version requirement.
I still need to investigate this further.
Thanks for all the info!
I get the the same error on Vercel, node 20, but it does not crash the build, my app builds without styles. But I get a crash in a github action, where I build storybook: https://github.com/MiroslavPetrik/gnt-starter/actions/runs/18034417890/job/51318022741#step:8:18
