Open lfades opened 1 year ago
Hey @lfades , Would be glad to look into this!
@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
.
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)
}
Hey @lfades! I managed adding a new gatsby-app
to the apps/
directory. Following is the output:
gatsby-app
Hey @lfades! I managed adding a new
gatsby-app
to theapps/
directory. Following is the output:
Observations:
- The browser logs show preload warnings:
- 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.
@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 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.
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.
In the process of trying out if
next-tweet
(soon to be renamed toreact-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/44Here are the issues I've found so far:
CSS Modules
CSS Modules in Next.js, Vite, CRA, Remix and similars import the
default
export:In Gatsby the above does not work unless it's changed to:
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: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: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 thegatsby-plugin-pnpm
plugin installed.