blitz-js / blitz

⚡️ The Missing Fullstack Toolkit for Next.js
https://Blitzjs.com
MIT License
13.63k stars 798 forks source link

next-ui recipe isn't working as it should #4219

Open skhashaev opened 1 year ago

skhashaev commented 1 year ago

What is the problem?

I wanted to use NextUI on my project, found the recipe, installed and got the error, probably, related to SWC compiler of NextJS

Paste all your error logs here:


wait  - compiling /_error (client and server)...
error - ./node_modules/@internationalized/date/dist/import.mjs:1:0
Module not found: Can't resolve '@swc/helpers/_/_class_private_field_init'

Import trace for requested module:
./node_modules/@react-aria/i18n/dist/real-module.mjs
./node_modules/@react-aria/i18n/dist/import.mjs
./node_modules/@nextui-org/system/dist/chunk-5DCY5R7Z.mjs
./node_modules/@nextui-org/system/dist/index.mjs
./node_modules/@nextui-org/react/dist/index.mjs
./src/pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found

Paste all relevant code snippets here:

function MyApp({ Component, pageProps }: AppProps) {
    const getLayout = Component.getLayout || ((page) => page);
    const router = useRouter();
    return (
        <Suspense fallback={'Loading'}>
            <ErrorBoundary
                FallbackComponent={RootErrorFallback}
                onError={(error) => (error.name === 'AuthenticationError' ? router.replace('/auth/login') : undefined)}
                resetKeys={[router.asPath]}
                onReset={useQueryErrorResetBoundary().reset}
            >
                <NextIntlProvider messages={pageProps.messages}>
                    <NextUIProvider>
                    {getLayout(<Component {...pageProps} />)}
                    </NextUIProvider>
                </NextIntlProvider>
            </ErrorBoundary>
            <Toasts />
        </Suspense>
    );
}

Note: doesn't matter where to place NextUIProvider - the problem in its' existence

What are detailed steps to reproduce this?

  1. blitz install next-ui
  2. Accept changes in _app.tsx
  3. Accept changes in LabeledTextField

Run blitz -v and paste the output here:

Blitz version: 2.0.0-beta.22 (global)
Blitz version: 2.0.0-beta.19 (local)
macOS Monterey | darwin-x64 | Node: v16.19.0

 Package manager: npm

  System:
    OS: macOS 12.6.2
    CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Memory: 152.68 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: Not Found
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  npmPackages:
    @blitzjs/auth: 2.0.0-beta.19 => 2.0.0-beta.19 
    @blitzjs/next: 2.0.0-beta.19 => 2.0.0-beta.19 
    @blitzjs/rpc: 2.0.0-beta.19 => 2.0.0-beta.19 
    @prisma/client: 4.7.1 => 4.7.1 
    blitz: 2.0.0-beta.19 => 2.0.0-beta.19 
    next: 12.2.5 => 12.2.5 
    prisma: 4.7.1 => 4.7.1 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.8.4 => 4.9.3 

Please include below any other applicable logs and screenshots that show your problem:

I firstly tried adding NextUI manually, because I forgot about recipies in blitz, but the error was the same. Then I found recipe, installed, but the error was the same. I re-checked, if there are any leftovers after manual installation, but there is no possible way, because I git reset --hard the branch and the installed recipe. Did git reset --hard again and installed recipe again - nothing changed. I also tried installing @internationalized/date, which are appears in the log (https://www.npmjs.com/package/@internationalized/date/v/3.0.0-nightly.2967), but the error is the same. My personal assumption - nextjs compiler (https://nextjs.org/docs/architecture/nextjs-compiler), which is now SWC (this also appears in the log, you can see it). Halp!

cassilup commented 8 months ago

I'm also having trouble installing the next-ui recipe:

❯ blitz install next-ui
Loaded env from /<local path>/.env.local
Loaded env from /<local path>/.env
recipe-install/index.ts:11:10 - error TS7006: Parameter 'b' implicitly has an 'any' type.

11         (b) => b.type === "ReturnStatement",
            ~

Has anyone found a fix to this?