Gatsby Partial Hydration

[lfades]

In the process of trying out if next-tweet (soon to be renamed to react-tweet) could work with Gatsby's Partial Hydration (the feature that implements React Server Components), multiple issues were found and the on progress app was removed in https://github.com/vercel-labs/next-tweet/pull/44

Here are the issues I've found so far:

CSS Modules

CSS Modules in Next.js, Vite, CRA, Remix and similars import the default export:

import styles from './app.module.css'

In Gatsby the above does not work unless it's changed to:

import * as styles from './app.module.css'

Changing the imports to support Gatsby can break other libraries so instead I went with this change to its webpack config: apps/gatsby-app/gatsby-node.js

Global CSS

react-tweet has an import for a global CSS file that implements all the CSS variables that the tweet uses. This worked well elsewhere but in Gatsby those styles were not being included, so the following had to be done in order to use the tweet components:

import s from 'next-tweet/theme.css'
console.log(s) // This line can't be removed

It's a workaround for this issue: https://github.com/gatsbyjs/gatsby/issues/19446

React Server Components (RSC)

After the CSS issues are handled with the workarounds, react-tweet has can be used client-side in Gatsby, just like in Vite and CRA. However, after enabling Gatsby's Partial Hydration with the following flag:

flags: {
  PARTIAL_HYDRATION: true,
},

All I could see was a blank screen and the following error in the browser console:

The react version was set to experimental and pnpm was used with the gatsby-plugin-pnpm plugin installed.

[rielAsh24]

Hey @lfades , Would be glad to look into this!

[rielAsh24]

@lfades can you share the gatsby-node.js files for the gatsby-app? I'm facing the same issue with CSS Modules while setting up the test app for gatsby in react-tweets/apps.

[lfades]

It's this one: https://github.com/vercel-labs/react-tweet/pull/44/files#diff-3c08e5022c3c58b6f607c199b3cdccd2d22584e5e51b20f983102b3d4b2547a2

const path = require(`path`)

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  const config = getConfig()

  config.module.rules.forEach((rule) => {
    rule.oneOf?.forEach((rule) => {
      rule.use?.forEach((plugin) => {
        if (
          plugin.loader.includes('/css-loader') ||
          plugin.loader.includes('/mini-css-extract-plugin')
        ) {
          if (plugin.options.modules?.namedExport) {
            plugin.options.modules.namedExport = false
          }
        }
      })
    })
  })
  actions.replaceWebpackConfig(config)
}

[rielAsh24]

Hey @lfades! I managed adding a new gatsby-app to the apps/ directory. Following is the output:

Observations:

1. The browser logs show preload warnings:

2. The styles applied in other test apps are not functioning in gatsby-app

[rielAsh24]

Hey @lfades! I managed adding a new gatsby-app to the apps/ directory. Following is the output:

Observations:

1. The browser logs show preload warnings:

2. The styles applied in other test apps are not functioning in gatsby-app

Hey @lfades, requesting a confirmation on this, and if I can open a PR for the same.

[lfades]

@rielAsh24 If the CSS is not working then that means CSS Modules are still an issue for the package to be used in Gatsby and we would need a fix for that before a PR.

[rielAsh24]

@rielAsh24 If the CSS is not working then that means CSS Modules are still an issue for the package to be used in Gatsby and we would need a fix for that before a PR.

Got you; I'll try working on it and post updates.

[rielAsh24]

Hey @lfades ! Apologies it took so long but I finally made it work :)

Note: Except Safari, all browsers give a perfect output when react is set to experimental or canary. Stable releases of react work wonderfuly on all browsers.