Why does getServerSideProps work on index.js but not on [id].js using NextJS

Question

I am trying to learn NextJS and React, by creating an e-commerce site. As it will be connecting to an external db to retrieve stock, that can be updated at any time, getStaticProps is unsuitable. I have tried to implement using getServerSideProps and it works on my index page which just pulls in all the stock from the database, but I am getting a 'module not found error' when using exactly the same function inside the individual product page (apart from adding a filter to find a specific item).

Module not found: Can't resolve 'fs'

According to the documentation I can only export getServerSideProps from pages. index.js and [id].js are both pages but only index.js works.

Here is my index.js (minus the imports)

// 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>
)

And here is [id].js minus the imports

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>
    )
}

Any help appreciated as always :-)

EDIT: added the entire error message

./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

But the point is that it works on index.js, so I am unsure why it works on one pager and not the other. Is it because [id].js is for dynamically generated routes?

I think I have found a better solution, I have just discovered (from the documentation) that I can use a parameter 'revalidate: 10,' which would regenerate the page at most once every ten seconds. I hope I am correct in believing this means I can still use getStaticProps, please advise if this is not the case! — HubertBlu, Aug 23 '21 at 01:41
are you importing `fs` in `[id].js` page ? if so you are not using it anywhere in the code. also, post complete code and error so that it could make others understand the problem better. — kiranr, Aug 23 '21 at 04:16
I am not directly importing fs anywhere. It seems to be imported with webpack when i use getServerSideProps. It seems to be a common error when getServerSideProps is misused but as far as i can see from the documentation I am using it correctly! There really is no more relevant code to show, but I can add the entire error,. — HubertBlu, Aug 23 '21 at 14:54

score 1 · Answer 1 · answered Aug 23 '21 at 10:22

1

As you see Here You may need to modify next.config.js file as you see in the following :

if you are using webpack4 :

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

    return config
  }
}

and for webpack5 :

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

    return config;
  },
};

answered Aug 23 '21 at 10:22

shahryar ab

71
1
2
7

1

Didn't work, I got a new error, module not found 'stream' :-( – HubertBlu Aug 23 '21 at 14:55
I have updated the code to include the entire error – HubertBlu Aug 23 '21 at 15:11

score 0 · Accepted Answer · answered Aug 23 '21 at 17:42

Well it seems it was unused imports causing me problems, so maybe I should have included the imports in my code above! I initially created a function getItemData in a 'lib' folder which connected to mongo, and this was imported by [id].js. it didnt work, so i implemented the function directly inside getServerSideProps, but I clearly forgot to delete the import of the old function. So I know now that all the logic should be implemented within getServerSideProps

Why does getServerSideProps work on index.js but not on [id].js using NextJS

2 Answers2