[Create React App] Rendering White Page

[Dhananjay-JSR]

The Issue begins with react-scripts v5 breaking NextUI Render Components

Temporal Solution :- Downgrade react-script to v4 from the package.json

[Samsonroyal]

@Dhananjay-JSR I've experienced something similar with a Create React App; the app executes successfully however a white screen is rendered. what solutions have you tried to implement?

[Dhananjay-JSR]

@Dhananjay-JSR I've experienced something similar with a Create React App; the app executes successfully however a white screen is rendered. what solutions have you tried to implement?

The Only temporal solution to this is to manually change react-script version to 4.0.0 in package.json file in your root directory and then execute command npm install

[Samsonroyal]

Thanks let me try that. 🤝

[aryamitra06]

I renamed from "react-scripts": "5.0.0" to "react-scripts": "4.0.0" in package.json and executed npm install and it worked!!

[nckblu]

hmm I'm using CRA with Typescript and the manual change to 4.0.0 caused me to get other errors. Instead I used npm install react-scripts@4 and that seems to have fixed it... for now.

[notmedia]

@jrgarciadev Hi! Do you have any news?

[Keyruu]

Hello, this is a much needed fix. TailwindCSS doesn't work with react-scripts@4 and I want use NextUI with Tailwind. I currently can't.

[jrgarciadev]

Hey guys, we are doing our best to fix this as soon as possible, thanks for the patience 🙏🏻

[kaichaosun]

I'm at main branch and got this error,

./node_modules/@nextui-org/react/node_modules/@react-aria/utils/dist/module.js 144:211
Module parse failed: Unexpected token (144:211)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   let filteredProps = {};
|
>   for (const prop in props) if (Object.prototype.hasOwnProperty.call(props, prop) && ($7efcb978e02fb174$var$DOMPropNames.has(prop) || labelable && $7efcb978e02fb174$var$labelablePropNames.has(prop) || propNames?.has(prop) || $7efcb978e02fb174$var$propRe.test(prop))) filteredProps[prop] = props[prop];
|
|   return filteredProps;

[nalinbhardwaj]

I'm having the same issue as @kaichaosun with version 1.0.6-beta.5

EDIT: It appears downgrading to version 1.0.2-beta.4 and nuking & reinstalling node_modules resolves this, FYI.

[lightify97]

I'm using 1.0.6-beta.5 with tailwind and having the same issue. However if you exclude @tailwind/base from your build it works fine.

[stale[bot]]

Hello 👋, to help manage issues we automatically close stale issues. This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention? > This issue will be closed in 10 days if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

[MobileAppVault]

Any update on this?

[jrgarciadev]

Hey guys 🙌🏼, could you try this again using the latest version (v10) and react 17?