Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

extraction-plugin: support for appDir in NextJS 13

See original GitHub issue

Hi, I was trying to use NextJS v13 appDir mode with @griffel and I get the following errors:

Attempted import error: '__css' is not exported from '@griffel/react' (imported as '__css').

and

TypeError: core.createDOMRenderer is not a function
    at 4415 (/home/projects/nextjs-ltekvi/.next/server/chunks/792.js:3446:88)
    at __webpack_require__ (/home/projects/nextjs-ltekvi/.next/server/webpack-runtime.js:25:43)
    at 5933 (/home/projects/nextjs-ltekvi/.next/server/chunks/792.js:3829:23)
    at __webpack_require__ (/home/projects/nextjs-ltekvi/.next/server/webpack-runtime.js:25:43)
    at 9692 (/home/projects/nextjs-ltekvi/.next/server/chunks/792.js:3710:18)
    at __webpack_require__ (/home/projects/nextjs-ltekvi/.next/server/webpack-runtime.js:25:43)
    at 4312 (/home/projects/nextjs-ltekvi/.next/server/app/page.js:99:72)
    at __webpack_require__ (/home/projects/nextjs-ltekvi/.next/server/webpack-runtime.js:25:43)
    at eval (/home/projects/nextjs-ltekvi/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:918:337)

There are errors only when using the ‘@griffel/next-extraction-plugin’ package.

To reproduce these errors g to the Sandbox and run the command:

npm install && npx next build

Issue Analytics

State:
Created a year ago
Comments:11 (10 by maintainers)

Top GitHub Comments

1reaction

layershiftercommented, Nov 23, 2022

Linking this discussion here, since I think it may be related 🤔 microsoft/fluentui#25384 I may be mistaken though

No, it’s not related to that. This issue is purely related to CSS extraction.

0reactions

layershiftercommented, Dec 12, 2022

But I noticed that when I add the condition to process styles on the client assembly only, then Webpack successfully compiled and extract the styles. However on the page the CSS file wasn’t loaded and, accordingly, there are no styles on the page.

Yeah, it’s the same problem that I faced. Will look into it more.

Also I found another issue, when using the RendererProvider in the ./app/layout.tsx I get the following error:

Out of curiosity, why do you need it with CSS extraction? It’s not used when CSS extraction is in place.

in the ./app/layout.tsx file, so turn the component into Client Component, then the error disappears.

It’s a thing that I don’t really like. Components that use useState or useContext can be only Client Components, but makeStyles (__styles & __css) consuming a context for TextDirection…

Top Results From Across the Web

Next.js 13 appDir support · Issue #152 - GitHub

Opening an issue to track support for Next.js 13's appDir and server components. Currently, it's possible to use next-themes within appDir ...

Blog - Next.js 13

The app directory includes support for: Layouts: Easily share UI between routes while preserving state and avoiding expensive re-renders. Server ...

Next.js 13 Upgrade Guide

Update your Next.js application from version 12 to version 13 (stable). ... A step-by-step guide to help you incrementally migrate from the `pages`...

Advanced Features: Turbopack | Next.js

Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js 13. On large applications Turbopack ...

App Directory Roadmap - Next.js beta docs

Section Feature Supported React 18 Server Components ✓ Default React 18 Client Components ✓ Opt‑in React 18 Shared Components 🏗️