tulupinc / flowbite-next-starter Goto Github PK
View Code? Open in Web Editor NEWHome Page: flowbite-next-starter.vercel.app
Home Page: flowbite-next-starter.vercel.app
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.
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
npm i
and npm run dev
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).
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",
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" }
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')
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.