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

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 :(

2 Answers

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

{ "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, } } } }