Nextjs styles from a shared library are not loaded on initial loading

Question

I have a Nextjs app and a shared UI library that is being used not only for Nextjs app but also other apps (SPAs). kinda like Material-ui / semantic-ui that has a list of UIs that can be used for my apps. This shared library app was built only for SPA initially but now that I'd like to add a Nextjs app, I'm sure it needs some modification.

The styles on Nextjs app are rendered correctly on initial load since I followed the Next's example with React-jss on their repo. (all of my apps are using react-jss) https://github.com/vercel/next.js/blob/canary/examples/with-react-jss/pages/_document.js

_document.js

import Document from "next/document";
import { SheetsRegistry, JssProvider, createGenerateId } from "react-jss";

export default class JssDocument extends Document {
  static async getInitialProps(ctx) {
    const registry = new SheetsRegistry();
    const generateId = createGenerateId();
    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: App => props => (
          
            
          
        )
      });

    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          
        
      )
    };
  }
}

But once I load this shared library app on my Nextjs app, the styles from the shared library are not applied at all on initial load. like I did in _document.js, I'm sure I need to make some changes to accommodate this case where I load another library that has its own styles in either _document.js or webpack.

The error message I got looks something like this

Warning: Prop `className` did not match. Server: "wrapper-0-2-7 wrapper-d0-0-2-25 size_2-0-2-11" Client: "wrapper-0-2-7 wrapper-d2-0-2-27 size_2-0-2-11"

The way I connect my next app to this shared library app is to use webpack. nextapp/config/aliases.js

const path = require("path");

module.exports = {
  react: path.join(__dirname, "../node_modules/react"),
  "react-jss": path.join(__dirname, "../node_modules/react-jss"),
};

nextapp/next.config.js

module.exports = {
  reactStrictMode: true,
  webpack: config => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      ...aliases
    };

    config.resolve.modules = [
      "node_modules",
      resolveApp("node_modules"),
      "../sharedLibrary/node_modules"      <------- 
    ];

    config.module.rules.push({
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: [resolveApp("../b/src"), resolveApp("./")], <-------
      // include: [paths.appSrc],
      loader: require.resolve("babel-loader"),
      options: {
        customize: require.resolve("babel-preset-react-app/webpack-overrides"),
        configFile: resolveApp("./.babelrc"),
        plugins: [
          [
            require.resolve("babel-plugin-named-asset-import"),
            {
              loaderMap: {
                svg: {
                  ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]"
                }
              }
            }
          ]
        ],
        // This is a feature of `babel-loader` for webpack (not Babel itself).
        // It enables caching results in ./node_modules/.cache/babel-loader/
        // directory for faster rebuilds.
        cacheDirectory: true,
        // See #6846 for context on why cacheCompression is disabled
        cacheCompression: false,
        compact: false // TODO
      }
    });
    config.resolve.plugins.push(
      PnpWebpackPlugin,
      new ModuleScopePlugin(
        [resolveApp("./"), resolveApp("../sharedLibrary/src")],
        [
          resolveApp("package.json"),
          resolveApp("../sharedLibrary/package.json")
        ]
      )
    );

    return config;
  }
};

Could someone please help me how to render styles from this shared library on Nextjs app?

Thank you in advance

Nextjs styles from a shared library are not loaded on initial loading

0 Answers