Next.js 11.0.0 是否支持桶（索引）文件？

Question

与 next.js 一起使用时，Barrel/index 文件似乎会产生问题。似乎还没有确定这是纯粹的 webpack 问题还是 webpack 和 next.js 的问题

根据这个问题，如果我们使用桶文件，树摇动就会停止工作。我还创建了一个小型存储库，其中索引文件有问题。不确定这是否是树摇动问题。

重现问题的步骤：

• npm install
• npm run dev
• 在浏览器中，访问 http://localhost:3000/about-pro，期望在浏览器控制台中看到包含错误或警告的空白页面
• 转到服务器的控制台（您运行的地方npm run dev）
• 看到错误“找不到模块：无法解析‘fs’ ”(1) (2) (3)

1-这来自文件await serialize内getAboutPageData。其本身仅在内部调用getStaticProps

2 - 谷歌搜索这个问题，你会找到解决方案，例如修改next.config.js文件。它仍然不起作用。请随意取消注释该next.config.js文件并亲自查看

3 - 要“解决”问题，请转到about-pro.tsx导入中，AboutPage从其自己的文件而不是从桶/索引文件导入

如果我只getAboutPageData从barrel/index文件导入，那么它工作得很好。但是一旦我AboutPage从中导入例如，它就开始抛出不相关的问题。

我可以继续将barrel/index文件与next.js一起使用吗？如果可以，是否有一种简单直观的方法可以做到这一点？

Answer 1

问题不在于桶文件本身，而在于您与桶文件结合使用的库。

如果您查看自述文件https://github.com/hashicorp/next-mdx-remote#examples您会发现一个警告：

mdx-remote重要提示：将任何代码放入单独的“实用程序”文件时要非常小心。这样做可能会导致 nextjs 的代码分割能力出现问题 - 它必须能够清楚地确定仅在服务器端使用的内容以及应留在客户端捆绑包中的内容。如果您将mdx-remote代码放入外部实用程序文件中并且某些内容已损坏，请将其删除并从上面的简单示例开始，然后再提交问题。

因此，为了使您的代码正常工作，您需要getAboutPageData从桶文件中删除 的导出，如下所示：

export { default as AboutPage } from './AboutPage';
// export { default as getAboutPageData } from './getAboutPageData';

并将使用该库的代码移至文件内about-pro.tsx。

import { AboutPage } from '../modules/about';
import { serialize } from 'next-mdx-remote/serialize';

const AboutPro = (props) => {
  return <AboutPage {...props} />;
};

export const getStaticProps = async () => {
  const serializedContent = await serialize(`# Header1`);
  const data = serializedContent;
  return { props: {} };
};

export default AboutPro;

我认为问题在于桶文件中导入的模块在客户端和服务器端都执行。也许从桶文件中删除副作用可以解决这个问题，但我对Next.js 的了解还不够，无法正确地做到这一点。