extraction-plugin: support for appDir in NextJS 13 #266

Dwlad90 · 2022-10-27T19:43:07Z

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

The text was updated successfully, but these errors were encountered:

layershifter · 2022-10-31T10:25:00Z

Hey, looks pretty strange TBH as __css is exported:

I will look into it in upcoming weeks.

Dwlad90 · 2022-11-01T10:13:43Z

Hey, looks pretty strange TBH as __css is exported:

I will look into it in upcoming weeks.

@layershifter,
Yes, I checked, these lines are present in the built code, as well as the createDOMRenderer export. This is a very strange bug.

Thank you!

iammathew · 2022-11-02T13:50:31Z

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

layershifter · 2022-11-23T12:44:58Z

@Dwlad90 it seems that I traced the problem, looks that it's happening in webpack loader from webpack-extraction-plugin.

Looks like Next.js (or its Webpack part) does not like how we emit imports there:

griffel/packages/webpack-extraction-plugin/src/webpackLoader.ts

Lines 107 to 114 in ebd004e

    
                 const request = `import ${JSON.stringify( 
        
                   this.utils.contextify( 
        
                     this.context || this.rootContext, 
        
                     `griffel.css!=!${virtualLoaderPath}!${resourcePath}?style=${toURIComponent(css)}`, 
        
                   ), 
        
                 )};`; 
        
                 this.callback(null, `${result.code}\n\n${request};`, result.sourceMap);

If imports for CSS are not there - then it works 😳 I did following change and then build is passing:

            const request = `import ${JSON.stringify(this.utils.contextify(this.context || this.rootContext, `griffel.css!=!${virtualLoaderPath}!${resourcePath}?style=${toURIComponent(result.cssRules.join('\n'))}`))};`;
-            this.callback(null, `${result.code}\n\n${request};`, result.sourceMap);
+            this.callback(null, `${result.code}`, result.sourceMap);
            return;

I will look more to understand why it happens and how to fix it later this/next week.

layershifter · 2022-11-23T12:47:46Z

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.

Dwlad90 · 2022-11-24T19:44:38Z

@Dwlad90 it seems that I traced the problem, looks that it's happening in webpack loader from webpack-extraction-plugin.

Looks like Next.js (or its Webpack part) does not like how we emit imports there:

griffel/packages/webpack-extraction-plugin/src/webpackLoader.ts

Lines 107 to 114 in ebd004e

const request = `import ${JSON.stringify(

this.utils.contextify(

this.context || this.rootContext,

`griffel.css!=!${virtualLoaderPath}!${resourcePath}?style=${toURIComponent(css)}`,

),

)};`;

this.callback(null, `${result.code}\n\n${request};`, result.sourceMap);

If imports for CSS are not there - then it works 😳 I did following change and then build is passing:
            const request = `import ${JSON.stringify(this.utils.contextify(this.context || this.rootContext, `griffel.css!=!${virtualLoaderPath}!${resourcePath}?style=${toURIComponent(result.cssRules.join('\n'))}`))};`;
-            this.callback(null, `${result.code}\n\n${request};`, result.sourceMap);
+            this.callback(null, `${result.code}`, result.sourceMap);
            return;
I will look more to understand why it happens and how to fix it later this/next week.

Thanks for the answer! Good to know.
I'll be waiting for the fix.

layershifter · 2022-12-07T13:23:21Z

* my face when I found the reason *

we run a loader that creates CSS imports only for files that contain __styles/__resetStyles

griffel/packages/webpack-extraction-plugin/src/webpackLoader.ts

Lines 46 to 47 in 735cbfd

    
           // Early return to handle cases when __styles() calls are not present, allows skipping expensive invocation of Babel 
        
           if (sourceCode.indexOf('__styles') === -1 && sourceCode.indexOf('__resetStyles') === -1) {

(we don't analyze AST at that point as invoking Babel is significantly more expensive than just .indexOf)
(it means that a string that contains "__styles" is enough to invoke Babel processing)
once a Babel plugin will process file - we have a nice condition to emit imports that will trigger css-loader

griffel/packages/webpack-extraction-plugin/src/webpackLoader.ts

Line 68 in 735cbfd

if (result.cssRulesByBucket) {
it does not work both in current and older versions as .cssRules/.cssRulesByBucket will always empty array/empty object 💥
as a result plugin emit invalid imports and everything goes wild 🔥

@Dwlad90 For older version you just need a following patch in node_modules/@griffel/webpack-extraction-plugin/src/webpackLoader.js:

if (result) {
-       if (result.cssRules) {
+       if (result.cssRules.length > 0) {

For newer, I have a fix already in #289.

layershifter · 2022-12-09T11:40:42Z

#289 fixed the problem, but #291 added an another one. For unknown reason React wants to execute our import:

layershifter · 2022-12-09T11:48:40Z

Build is passing if it will not be execute for server i.e. the whole condition will be wrapped into !isServer:

griffel/packages/next-extraction-plugin/src/lib/next-extraction-plugin.ts

Lines 71 to 79 in d144cde

    
           config?.module?.rules?.unshift({ 
        
             ...webpackLoaderRules, 
        
             test: /\.(tsx|ts|js|jsx)$/, 
        
             use: [ 
        
               { 
        
                 loader: GriffelCSSExtractionPlugin.loader, 
        
               }, 
        
             ], 
        
           });

The problem is that then CSS does not load while it's generated:

Need to check what happens there. Will look into it next week.

Dwlad90 · 2022-12-11T00:18:17Z

@layershifter, Thanks for the solution of the problem.

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.

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

npm install && npx next build && npm next start

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

info  - Collecting page data .TypeError: React__namespace.createContext is not a function
    at 4947 (file:///home/projects/nextjs-ikosio/.next/server/chunks/854.js:6871:60)
    at __webpack_require__ (file:///home/projects/nextjs-ikosio/.next/server/webpack-runtime.js:25:43)
    at 2562 (file:///home/projects/nextjs-ikosio/.next/server/chunks/854.js:7197:23)
    at __webpack_require__ (file:///home/projects/nextjs-ikosio/.next/server/webpack-runtime.js:25:43)
    at 3294 (file:///home/projects/nextjs-ikosio/.next/server/chunks/854.js:7089:18)
    at __webpack_require__ (file:///home/projects/nextjs-ikosio/.next/server/webpack-runtime.js:25:43)
    at 8748 (file:///home/projects/nextjs-ikosio/.next/server/app/page.js:140:72)
    at Function.__webpack_require__ (file:///home/projects/nextjs-ikosio/.next/server/webpack-runtime.js:25:43)
    at async collectGenerateParams (file:///home/projects/nextjs-ikosio/node_modules/next/dist/build/utils.js:713:17)
    at async eval (file:///home/projects/nextjs-ikosio/node_modules/next/dist/build/utils.js:853:36)

To reproduce these errors go to the Sandbox and run following command:

npm install && npx next build

Maybe it happens because of the limitations of the Server Components, currently the use of CSS-in-JS
is not supported, proof.

If you uncomment the line

'use client'

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

layershifter · 2022-12-12T09:13:06Z

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...

taishinaritomi · 2023-01-05T08:52:01Z

#303

I cloned the code and checked it out a bit, but I have never used nx, etc. and it seemed to take me a while to understand it, so I will share about the next-extraction-plugin here.

The first thing I did was to tell getGlobalCssLoader that it is app-dir.
This way the client component should be able to extract the CSS.

griffel/packages/next-extraction-plugin/src/lib/next-extraction-plugin.ts

Lines 81 to 96 in 16250ce

    
           cssRules.unshift({ 
        
             test: /griffel\.css$/i, 
        
             sideEffects: true, 
        
             use: getGlobalCssLoader( 
        
               { 
        
                 assetPrefix: config.assetPrefix, 
        
                 isClient: !isServer, 
        
                 isServer, 
        
                 isDevelopment: dev, 
        
                 future: nextConfig.future || {}, 
        
                 experimental: nextConfig.experimental || {}, 
        
               } as ConfigurationContext, 
        
               () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined), 
        
               [], 
        
             ), 
        
           });

const isAppDir = nextConfig.experimental?.appDir === true;
const appDirOptions = isAppDir
  ? {
      hasAppDir: true,
      experimental: { appDir: true },
    }
  : {};

  cssRules.unshift({
    test: /griffel\.css$/i,
    sideEffects: true,
    use: getGlobalCssLoader(
      {
        assetPrefix: config.assetPrefix,
        isClient: !isServer,
        isServer,
        isDevelopment: dev,
        future: nextConfig.future || {},
        experimental: nextConfig.experimental || {},
        ...appDirOptions,
      } as ConfigurationContext,
      () => lazyPostCSS(dir, getSupportedBrowsers(dir, dev), undefined),
      [],
    ),
  });

For the react server components, since hooks are not available You will need to rethink your design in order to get it to work.
If griffel can be designed without using hooks, the css for "nextjs13 react server components" cannot be extracted by the virtualLoader, so it can be written out to a file once and it will work.(example)

Dwlad90 · 2023-02-20T07:25:47Z

Hi @layershifter,
Maybe it will be helpful,
a new webpack plugin of style9 now supports this feature.
This is a link to a discussion about NextJS appDir and CSS-in-JS support.
Can you check if this is relevant to @Griffel?

layershifter · 2023-02-22T13:29:56Z

@Dwlad90 yes, this looks relevant and explains what current thing does work. I will look into it in upcoming weeks, but feel free to do the same if you are interested 😉

SukkaW · 2023-02-24T18:41:54Z

@Dwlad90 yes, this looks relevant and explains what current thing does work. I will look into it in upcoming weeks, but feel free to do the same if you are interested 😉

FYI, I have described the Next.js issue here: SukkaW/style9-webpack#1 (comment), and I quote:

https://github.com/vercel/next.js/blob/3a9bfe60d228fc2fd8fe65b76d49a0d21df4ecc7/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L425-L429
const modRequest: string | undefined =
  mod.resourceResolveData?.path + mod.resourceResolveData?.query
Here, only path and query are passed down, and all loaders are ignored.

And you can find my workaround here: SukkaW/style9-webpack@f468bf8...696f4e0

In short, you can't use resource match query (!=!) and inline loader (!virtual-file-loader.js?{}!), as they will be dropped by Next.js Server Component CSS Extraction. You should pass the virtual CSS information directly to the noop.css (The actual file existing on the disk, required by the webpack) like this:

import 'noop.css?{ filename, source }'

Then you will need to create a loader to extract { filename, source } from the noop.css request.

layershifter · 2023-08-28T14:21:06Z

@Dwlad90 can you please re-test with the latest Next.js? I was able to compile your example without any issues:

Dwlad90 · 2023-08-30T20:16:40Z

@layershifter, Thank you.
I confirm, sandbox of the comment have been compiled successful with latest versions of next and @griffel/* packages when I added 'use client' to layout.tsx.

layershifter · 2023-08-31T07:36:21Z

@Dwlad90 thanks for confirmation, closing.

layershifter added the 🐞 bug Something isn't working label Oct 31, 2022

layershifter changed the title ~~Support for NextJS 13 appDir~~ extraction-plugin: support for appDir in NextJS 13 Oct 31, 2022

layershifter mentioned this issue Dec 7, 2022

fix: avoid empty CSS imports #289

Merged

layershifter closed this as completed in #289 Dec 9, 2022

layershifter reopened this Dec 9, 2022

layershifter mentioned this issue Jan 4, 2023

Next.js13 & React Server Components #303

Closed

karlhorky mentioned this issue Feb 28, 2023

Emotion in React Server Components? emotion-js/emotion#2978

Open

layershifter mentioned this issue Mar 22, 2023

[Feature]: add support to React 18 server component microsoft/fluentui#27227

Closed

1 task

layershifter closed this as completed Aug 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

extraction-plugin: support for appDir in NextJS 13 #266

extraction-plugin: support for appDir in NextJS 13 #266

Dwlad90 commented Oct 27, 2022 •

edited

Loading

layershifter commented Oct 31, 2022

Dwlad90 commented Nov 1, 2022

iammathew commented Nov 2, 2022

layershifter commented Nov 23, 2022

layershifter commented Nov 23, 2022

Dwlad90 commented Nov 24, 2022

layershifter commented Dec 7, 2022

layershifter commented Dec 9, 2022

layershifter commented Dec 9, 2022

Dwlad90 commented Dec 11, 2022

layershifter commented Dec 12, 2022

taishinaritomi commented Jan 5, 2023

Dwlad90 commented Feb 20, 2023

layershifter commented Feb 22, 2023

SukkaW commented Feb 24, 2023

layershifter commented Aug 28, 2023

Dwlad90 commented Aug 30, 2023

layershifter commented Aug 31, 2023

extraction-plugin: support for appDir in NextJS 13 #266

extraction-plugin: support for appDir in NextJS 13 #266

Comments

Dwlad90 commented Oct 27, 2022 • edited Loading

layershifter commented Oct 31, 2022

Dwlad90 commented Nov 1, 2022

iammathew commented Nov 2, 2022

layershifter commented Nov 23, 2022

layershifter commented Nov 23, 2022

Dwlad90 commented Nov 24, 2022

layershifter commented Dec 7, 2022

layershifter commented Dec 9, 2022

layershifter commented Dec 9, 2022

Dwlad90 commented Dec 11, 2022

layershifter commented Dec 12, 2022

taishinaritomi commented Jan 5, 2023

Dwlad90 commented Feb 20, 2023

layershifter commented Feb 22, 2023

SukkaW commented Feb 24, 2023

layershifter commented Aug 28, 2023

Dwlad90 commented Aug 30, 2023

layershifter commented Aug 31, 2023

Dwlad90 commented Oct 27, 2022 •

edited

Loading