Unstyled PT mode with nextJs issue

[Erzalt]

Hello, I'm currently working on an application using next and react. However, it's impossible to integrate the use of unstyled mode with the use of Pass through Bootstrap.
To make my case easier, I've used the following next application: npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
And I applied the example from the primereact doc.

But i'm having this issue :

Does anyone know how to fix this? I don't have much experience with Next. And is it possible to apply all bootstrap styles to primereact elements?

Thanks in advance

[habubey]

Have you checked out this page, https://primereact.org/bootstrap/#example

[Erzalt]

Yes, this is the example I tried to integrate into my nextJs app. But I got a document error anyway

[habubey]

You need to migrate this demo from React JS to NextJS. The stackblitz code was built in CRA, not in Create Next App, and your error appears to be a CRA error.

[Erzalt]

I've already done it, but I still have the error...
I put my code in this repository: https://github.com/Erzalt/testUnstyledPt

[habubey]

The repository you shared appears inadequate for implementing the Tailwind project since it lacks key files such as _app.js, document.js, index.js, tailwind.config.js, and next.config.js. This approach differs from the usual Create Next App migration from Create React App.

I suggest creating a new Next.js project using the command "npx create-next-app@latest" and selecting the option to configure Tailwind during setup.

_app.js should be wrapped with
such as:

    <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
      <Component {...pageProps} />
    </PrimeReactProvider> 

Also, don't forget to import in _app.js

import { PrimeReactProvider } from "primereact/api".
import Tailwind from "primereact/passthrough/tailwind";

I started a Next.js project from scratch and was able to achieve the same result shown below in just 2-3 steps in a 3 minute.

[Erzalt]

I'd like to use bootstrap instead of tailwind, but is the process the same? Thank you for your reply.

[habubey]

I made a basic Bootstrap reproducer for you

https://stackblitz.com/edit/stackblitz-starters-nxcpvz?file=app%2Fpage.tsx,service%2FProductService.js,app%2Flayout.tsx,passthrough%2Fbootstrap.js