Next.js Module not found: Can't resolve 'tls'

Question

I am trying to add instagram feed to my next.js app, so I installed instagram-web-api, but when I do import Instagram from "instagram-web-api", it gives me a lot of errors(Can't resolve 'tls', Can't resolve 'fs', etc).

I can use other library just fine with npm install & import, but I am not sure why "instagram-web-api" giving me all this errors.

So I searched on internet for solution and saw feedback to add the below code to the next.config.js.

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

    return config;
  },
};

So, I replaced module.exports = nextConfig; with this code, deleted and reinstalled the library again, then it gives me another bunch of errors (Can't resolve 'stream', Can't resolve 'buffer', Can't resolve 'process', Can't resolve 'cypto', etc).

I don't have a lot of knowledge on webpack, I'm used to using just the default setting of next.js, so I am not sure what's going on :(

Answer 1

Instagram-web-api is a node js module and you are trying to use it on the frontend. You should move all your instagram-web-api code to the getStaticProps like this

export async function getStaticProps(context) {
    const client = new Instagram({ username: 'INSTAGRAM_USERNAME', password: 'INSTAGRAM_PASSWORD' });
    await client.login();

    const response = await client.getPhotosByUsername({
        username: 'INSTAGRAM_USERNAME',
    });

    return {
        props: {
            posts: response.user.edge_owner_to_timeline_media.edges,
        }, // will be passed to the page component as props
    };
}

Answer 2

{
  "dependencies": {},
  "devDependencies": {},

  // 👇️ add this to package.json 
  "browser": {
    "fs": false,
    "path": false, // optional I had this error so I added
    "os": false, // optional I had this error so I added
    "net": false, // optional I had this error so I added
    "tls": false
  }
}

The error "Module not found: Error: Can't resolve 'tls'" occurs because there has been a breaking change in Webpack version 5.

To solve the error, set the browser.tls property to false in your package.json file.

tls is a Node.js core module and should most likely not be bundled with your client-side code.

By setting tls to false, we use an empty module instead of including a polyfill for the tls module.

If the error persists, try to install the net module.

# 👇️ with NPM
npm install net

# 👇️ with YARN
yarn add net

If the error persists, try to edit your webpack.config.js file.

module.exports = function (webpackEnv) {
  // ...
  return {
   // ...
    resolve: {
      // ...
      fallback: {
        // 👇️ add this 👇️
        "tls": false,
        "net": false,
      }
    }
  }
}