tulupinc / flowbite-next-starter Goto Github PK

I am following this
https://www.flowbite-react.com/docs/components/table#default-table
But unable to run on server component

This is the error that i am getting on console : Attempted import error: 'TableCell' is not exported from 'flowbite-react' (imported as 'TableCell').

"flowbite": "^2.2.0",
"flowbite-react": "^0.6.4",

Is your feature request related to a problem? Please describe.
Browser refreshes on clicking Navbar.Link.

Describe the solution you'd like
Add Next Link support

When I add flowbite react to my nextjs project with strict CSP the styles, that are automatically inserted into the head part are blocked.

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem 'self' 'nonce-YjE2ZDgxOWEtNzNmNi00NzQ1LTljZWMtNGM5MTU3YjExMDFk'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

<style type="text/css">.indiana-scroll-container {
  overflow: auto; }
  .indiana-scroll-container--dragging {
    scroll-behavior: auto !important; }
    .indiana-scroll-container--dragging > * {
      pointer-events: none;
      cursor: -webkit-grab;
      cursor: grab; }
  .indiana-scroll-container--hide-scrollbars {
    overflow: hidden;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none; }
    .indiana-scroll-container--hide-scrollbars::-webkit-scrollbar {
      display: none !important;
      height: 0 !important;
      width: 0 !important;
      background: transparent !important;
      -webkit-appearance: none !important; }
  .indiana-scroll-container--native-scroll {
    overflow: auto; }

.indiana-dragging {
  cursor: -webkit-grab;
  cursor: grab; }
</style>

It seems this is coming from the dependency react-indiana-drag-scroll/dist.
Is there a way to add the nonce which is generated in the nextjs middleware to the style tag?
The nonce I could get like:

const nonce = headers().get('x-nonce')

It would be big help, if we all work on same page and what's the point of working on older version, if newer version can solve many older problems.

Thank you and i would love to contribute in any way i can. Please do let me know, how can we boost this repo, because it's really really important to all front-end devs.

1. On the local I just simply pull this source code and run npm i and npm run dev

2. The issue even happened on the Live Version at https://flowbite-next-starter.vercel.app/

3. I tried to create a new NextApp by following this tutorial https://www.flowbite-react.com/docs/guides/next-js
   The issue is the same

The root cause could come from the FlowBite React

Hello,

I noticed that any pages that use the Sidebar component have to use "use client". I was hoping to use the Sidebar in my default layout for every page. Does this mean that none of my pages can be rendered server-side?

Pardon me if this isn't an issue (or isn't specific to this repo).

Hi
Followed the installation instructions but I got for the NavBar and DropDown same errors:
Error: Could not find the module "C:\dev\cms\flowbite\flowbite\node_modules\flowbite-react\dist\esm\components\Navbar\Navbar.mjs#Navbar#Brand" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

Those are the project deps:
"dependencies": { "flowbite": "^2.3.0", "flowbite-react": "^0.8.0", "next": "14.1.4", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.4.19", "eslint": "^8", "eslint-config-next": "14.1.4", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", "typescript": "^5" }