为什么 getServerSideProps 可以在 index.js 上工作，但不能在 [id].js 上使用 NextJS答案

【问题标题】：Why does getServerSideProps work on index.js but not on [id].js using NextJS为什么 getServerSideProps 可以在 index.js 上工作，但不能在 [id].js 上使用 NextJS
【发布时间】：2021-10-23 10:09:38
【问题描述】：

我正在尝试通过创建一个电子商务网站来学习 NextJS 和 React。由于它将连接到外部数据库以检索可以随时更新的库存，因此 getStaticProps 不适合。我尝试使用 getServerSideProps 来实现它，它适用于我的索引页面，它只是从数据库中提取所有库存，但是当在单个产品页面中使用完全相同的功能时，我得到一个“未找到模块错误”（除了添加过滤器以查找特定项目）。

Module not found: Can't resolve 'fs'

根据文档，我只能从页面导出 getServerSideProps。 index.js 和 [id].js 都是页面，但只有 index.js 有效。

这是我的 index.js（减去导入）

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const { db } = await connectToDatabase();
  var stock = []
  const response = await db
    .collection("stock")
    .find({})
    .forEach(function(item){stock.push(convertFromMongoJSON(item))})

  // Pass data to the page via props
  return { props: { stock } }
}
export default function Home({ stock }) {
 return (
  <Layout home>
    <Head>
      <title>{siteTitle}</title>
    </Head>
    <LandingScreen/>
    <Store stock={stock}/>
  </Layout>
)

这里是 [id].js 减去导入

export async function getServerSideProps({params}) {
  var item = null
  const { db } = await connectToDatabase();
  var stock = []
  const response = await db
   .collection("stock")
   .find({})
   .forEach(function(i){stock.push(convertFromMongoJSON(i))})
  stock.forEach(function (i) {
    if (params.id == item.id){
      item = i
    }
  })
  
  return {
    props: {
      item
    }
  }
}



export default function Item({ item }) {
  return (
    <Layout>
      <Head>
        <title>{item.name}</title>
      </Head>
      <div className="row">
        ....... Lots of HTML ....
      </div>

      </Layout>
    )
}

一如既往地感谢任何帮助:-)

编辑：添加了整个错误消息

./node_modules/mongodb/lib/connection_string.js:5:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules\mongodb\lib\mongo_client.js
./node_modules\mongodb\lib\index.js
./lib\mongodb.js
./lib\items.js
./pages\items\[id].js

https://nextjs.org/docs/messages/module-not-found

但关键是它适用于 index.js，所以我不确定为什么它适用于一个寻呼机而不是另一个寻呼机。是不是因为 [id].js 是动态生成的路由？

【问题讨论】：

我想我找到了一个更好的解决方案，我刚刚发现（从文档中）我可以使用一个参数'revalidate: 10'，它最多每十秒重新生成一次页面。我希望我相信这意味着我仍然可以使用 getStaticProps 是正确的，如果不是这样，请告知！
您是在[id].js 页面中导入fs 吗？如果是这样，您就没有在代码中的任何地方使用它。另外，发布完整的代码和错误，以便其他人更好地理解问题。
我没有在任何地方直接导入 fs。当我使用 getServerSideProps 时，它似乎是用 webpack 导入的。当 getServerSideProps 被误用时，这似乎是一个常见错误，但据我从文档中可以看出，我正在正确使用它！确实没有更多相关代码可显示，但我可以添加整个错误。

标签： javascript reactjs next.js

【解决方案1】：

看来是未使用的导入导致了我的问题，所以也许我应该在上面的代码中包含导入！我最初在连接到 mongo 的“lib”文件夹中创建了一个函数 getItemData，这是由 [id].js 导入的。它不起作用，所以我直接在getServerSideProps中实现了该功能，但我显然忘记删除旧功能的导入。所以我现在知道所有的逻辑都应该在 getServerSideProps 中实现

【讨论】：

【解决方案2】：

如您所见 Here 您可能需要修改 next.config.js 文件，如下所示：

如果你使用的是 webpack4：

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}

对于 webpack5：

module.exports = {
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};

【讨论】：

没用，我收到一个新错误，找不到模块'stream' :-(
我已更新代码以包含整个错误