[Feature Request] Support for turbo pack

[rharkor]

Is your feature request related to a problem? Please describe.

When you want to use turbopack you always get the error "Error: createContext only works in Client Components."

Describe the solution you'd like

Find a solution to use turbopack

Describe alternatives you've considered

Not using it

Screenshots or Videos

No response

[linear[bot]]

ENG-482 [Feature Request] Support for turbo pack

[cmedina-dev]

Hi @rharkor, can you elaborate on the issue a bit more? I've been using Turbopack just fine in multiple projects without error (Next 14.1.0). Can you post what version of Next.js / Turbopack you're using?

These projects utilize server actions as well, so something reproducible would help a lot.

[rharkor]

Finally I found how to reproduce, @cmedina-dev The problem occurs when you use @nextui-org/react instead of individual packages like @nextui-org/button.

How to reproduce:

1. Get the boilerplate: npx create-next-app -e https://github.com/nextui-org/next-app-template
2. Add --turbo to the dev script in package.json. So it looks like this "dev": "next dev --turbo", Please not that at this point if you run the dev script everything work
3. Install @nextui-org/react
4. Replace any import of the main page with the global library Example: import { Link } from "@nextui-org/link"; to import { Link } from "@nextui-org/react";

[cmedina-dev]

Ah, this isn't an issue with Turbopack. NextUI does use client-side hooks (createContext) and by default Next.js pages are server components which will cause this error. You need to add 'use client' at the top of your page.tsx (or wherever client-side hooks are used) for pages to render properly.

There are other workarounds such as creating an import to allow the rest of page.tsx to remain a server component, see: https://stackoverflow.com/a/76181667

[rharkor]

Thank's that is a workaround but can't nextui do this by default ?

[cmedina-dev]

The maintainers could mark the specific components that utilize the client-side hooks with 'use client' but I'm not sure if there's reasoning for leaving them as server components so I think they'd better be able to answer.

[connorblack]

I'm also experiencing some turbo-related issues, specifically with compilation of the tailwind plugin:

./src/styles/globals.css:850:30
Parsing css source code failed
  848 |   --background: ({ opacityVariable, opacityValue }) => {
  849 |           if (!isNaN(+opacityValue)) {
> 850 |             return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
      |                              ^
  851 |           }
  852 |           if (opacityVariable) {
  853 |             return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;

Unexpected token Delim('$') at [project]/src/styles/globals.css:849:29

• "tailwindcss": "^3.4.3"
• "next": "14.3.0-canary.28"
• "@nextui-org/react": "^2.3.6"

It works with the default/babel next dev command.

[Elmosh]

I'm also experiencing some turbo-related issues, specifically with compilation of the tailwind plugin:

./src/styles/globals.css:850:30
Parsing css source code failed
  848 |   --background: ({ opacityVariable, opacityValue }) => {
  849 |           if (!isNaN(+opacityValue)) {
> 850 |             return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
      |                              ^
  851 |           }
  852 |           if (opacityVariable) {
  853 |             return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;

Unexpected token Delim('$') at [project]/src/styles/globals.css:849:29

• "tailwindcss": "^3.4.3"
• "next": "14.3.0-canary.28"
• "@nextui-org/react": "^2.3.6"

It works with the default/babel next dev command.

i'm facing the same exact error with turbo, everything works with [email protected], any newer versions causes this error.

[Forsect]

Next 14.2.3 - issue still here, as others said.

[Elmosh]

It turned out this issue wasn't cased by nextui but by a custom tailwind plugin:

function addVariablesForColors({ addBase, theme }) {
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
  );

  addBase({
    ":root": newVars,
  });
}

Once removed then all worked out fine with turbo & latest Next & nextui