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

Question

我正在尝试将 instagram feed 添加到我的 next.js 应用程序中，因此我安装了 instagram-web-api，但是当我这样做时

import Instagram from "instagram-web-api"

，它给了我很多错误（无法解析 'tls'，Can'不解析“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;

，删除并重新安装了库，然后它给了我另一堆错误（无法解析“流”，无法解析“缓冲区”，无法解析“进程” '，无法解析'cypto'等）。

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

Answer 1

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

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

出现错误“找不到模块：错误：无法解析'tls'”，因为 Webpack 版本 5 中发生了重大更改。

要解决该错误，请将 package.json 文件中的 browser.tls 属性设置为 false。

tls 是 Node.js 核心模块，很可能不应该与客户端代码捆绑在一起。

通过将 tls 设置为 false，我们使用一个空模块，而不是为 tls 模块包含一个 polyfill。

如果错误仍然存在，请尝试安装网络模块。

# 👇️ with NPM
npm install net

# 👇️ with YARN
yarn add net

如果错误仍然存在，请尝试编辑您的 webpack.config.js 文件。

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

Answer 3

就我而言，如果您使用 Next.js 应用程序目录和服务器操作，如果在文件顶部您忘记了

"use server"

，则会出现此错误。

以我为例，展示

module not found tls

和

can't resolve perf_hooks

，我希望它可以帮助别人。