reactjs - 来自共享库的 Nextjs 样式在初始加载时未加载

Question

我有一个 Nextjs 应用程序和一个共享 UI 库，它不仅用于 Nextjs 应用程序，还用于其他应用程序 (SPA)。有点像 Material-ui / semantic-ui，它有一个可用于我的应用程序的 UI 列表。这个共享库应用程序最初是为 SPA 构建的，但现在我想添加一个 Nextjs 应用程序，我确定它需要一些修改。

Nextjs 应用程序上的样式在初始加载时会正确呈现，因为我在其 repo 上使用了带有 React-jss 的 Next 示例。（我所有的应用程序都在使用 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>
        </>
      )
    };
  }
}

但是，一旦我在我的 Nextjs 应用程序上加载了这个共享库应用程序，共享库中的样式在初始加载时根本不会应用。就像我在_document.js中所做的一样，我确定我需要进行一些更改以适应这种情况，即我在_document.js或webpack中加载另一个具有自己样式的库。

我收到的错误消息看起来像这样

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" 

我将下一个应用程序连接到这个共享库应用程序的方式是使用 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;
  }
};

有人可以帮我如何在 Nextjs 应用程序上从这个共享库中呈现样式吗？

先感谢您

标签： reactjswebpacknext.js