reactjs - Next.js 模块未找到 : Can't resolve 'tls'

Question

我正在尝试将 instagram 提要添加到我的 next.js 应用程序中，所以我安装了 instagram-web-api，但是当我执行 import Instagram from "instagram-web-api" 时，它给出了我有很多错误(无法解析“tls”，无法解析“fs”等)。

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

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

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

    return config;
  },
};

所以，我用这段代码替换了 module.exports = nextConfig;，删除并再次重新安装了库，然后它又给了我一堆错误(无法解析'stream'，可以'无法解析“缓冲区”、无法解析“进程”、无法解析“cypto”等)。

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

Answer 1

Instagram-web-api 是一个节点 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
    };
}