[vercel/next.js]使用 next/动态导入时 CSS 模块有时不会加载

嘿，想知道这方面是否有任何见解或线索！它影响了我们的生产，并且我们没有任何已知的解决方法 - 需要 next/dynamic 以避免出现与 SSR 不兼容的有问题的库导入。谢谢！

遇到类似的缺少 css 文件的问题！

碰撞，nextjs 12.1.5 上有同样的问题

这看起来类似于https://github.com/vercel/next.js/issues/17464，这是关于 nextJs 删除预加载的 CSS 的。

有一些解决方案可以解决这个问题，但是有点hacky。

https://github.com/vercel/next.js/issues/17464#issuecomment-796430107

在 NextJS 12.2.2 上也看到了这一点。可以确认如果不使用动态导入，问题就会消失。

#17464 中提到的修复作为临时解决方法对我有用：

// In _app.tsx
const router = useRouter();

useEffect(() => {
  const handleRouteChange = () => {
    const styleElements = document.querySelectorAll('style[media="x"]');
    styleElements.forEach(styleTag => {
      styleTag.removeAttribute('media');
    });
  };

  router.events.on('routeChangeComplete', handleRouteChange);
  router.events.on('routeChangeStart', handleRouteChange);
}, [router]);

这个问题在接下来的12.2.4上仍然存在，并且已经不是很长一段时间了，突然出现了。

NextJS 13 的 AppDir beta 版本中也出现此问题。

现在使用 NextJS 13 遇到同样的问题。这里有什么消息吗？

Next.js 13 也存在同样的问题，当从主页导航到任何其他页面时，CSS 不起作用。

到目前为止有任何线索，或者有任何解决方法吗？看来它只发生在我部署后的生产中。

就我而言，我使用来自 CMS 的数据构建一个网站。所以我想使用 Next/dynamic 将所需的组件加载到当前活动的站点。

我尝试了各种方法，但最终通过开关解决了问题。我想我们必须等待未来的版本才能通过动态修复问题。目前我只建议将它与不加载额外 CSS 的小组件一起使用。

下面是我是如何做到的，就像这样，组件将以正常方式返回，并且 CSS 模块将被加载：

          `{components.map((component: any, k: any) => {
              if (componentsProps[k].componentregion === regionNum) {

                switch (component) {
                  case "Example_component1":
                    return (
                      <Example_component1
                        componenttype={componentsProps[k].componenttype}
                        componentid={componentsProps[k].componentid}
                        key={k}
                      />
                    )
                  break;
                  case "Example_component2":
                    return (
                      <Example_component2
                        componenttype={componentsProps[k].componenttype}
                        componentid={componentsProps[k].componentid}
                        key={k}
                      />
                    )
                  break;
                  case "Example_component3":
                    return (
                      <Example_component3
                        componenttype={componentsProps[k].componenttype}
                        componentid={componentsProps[k].componentid}
                        key={k}
                      />
                    )
                  break;
                  case "Example_component4":
                    return (
                      <Example_component4
                        componenttype={componentsProps[k].componenttype}
                        componentid={componentsProps[k].componentid}
                        key={k}
                      />
                    )
                  break;
                }
              }
            })}`

同样的问题在这里:( v.13.4.3

13.4.4中同样的问题

在这里打开重现场景https://github.com/vercel/next.js/issues/50300

next.js 13.4.7 存在同样的问题

此问题的一种可能的解决方法是将所有异步块移至一组。

next.config.mjs:

export default {
  webpack(config, context) {
    const { isServer, dev } = context
    if(!isServer && !dev) {
       config.optimization.splitChunks.cacheGroups.asyncChunks = {
         enforce: true,
         type: "css/mini-extract",
         chunks: 'async',
       }
    }
   return config
  }
}

这里有同样的问题 next.js v 13.4.19