共享库中的Nextjs样式不会在初次加载时加载

2022-01-30 11:26:32 标签 reactjswebpacknext.js

我有一个Nextjs应用程序和一个共享的UI库,不仅用于Nextjs应用程序,也用于其他应用程序(spa)。有点像Material-ui / semantic-ui,它有一个ui列表,可以用于我的应用。

这个共享库应用程序最初只是为SPA创建的,但现在我想添加一个Nextjs应用程序,我确定它需要一些修改。

Nextjs应用程序的样式在初始加载时正确呈现,因为我遵循了Next的例子与React-jss在他们的回购。(我所有的应用程序都使用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应用程序的风格?

先谢谢你

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码