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

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 => (
<JssProvider registry={registry} generateId={generateId}>
<App {...props} />
</JssProvider>
)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style id="server-side-styles">{registry.toString()}</style>
</>
)
};
}
}
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