Next.js 模块未找到：无法解析“tls”

发布于 2025-01-13 01:05:37 字数 636 浏览 5 评论 0原文

我正在尝试将 instagram feed 添加到我的 next.js 应用程序中，因此我安装了 instagram-web-api，但是当我从“instagram-web-api”导入 Instagram 时，它给了我很多东西错误（无法解析“tls”、无法解析“fs”等）。

我可以通过 npm install & 使用其他库。导入，但我不确定为什么“instagram-web-api”给我所有这些错误。

因此，我在互联网上搜索解决方案并看到反馈，将以下代码添加到 next.config.js 中。

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

    return config;
  },
};

因此，我用此代码替换了 module.exports = nextConfig;，删除并再次重新安装了库，然后它给了我另一堆错误（无法解析“流”，无法解析“ buffer'、无法解析“process”、无法解析“cypto”等）。

我对 webpack 没有太多了解，我习惯于只使用 next.js 的默认设置，所以我不确定发生了什么:(

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

峩卟喜欢 2025-01-20 01:05:37

Instagram-web-api 是一个 Node js 模块，您正在尝试在前端使用它。您应该将所有 instagram-web-api 代码移至 getStaticProps，如下所示

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

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

回复收藏 0 原文

月牙弯弯 2025-01-20 01:05:37

{

  "dependencies": {},

  "devDependencies": {},
  //

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

回复收藏 0 原文