serverless fails with 'Cannot find module './fetch.node'' using IPFS

[tmaus]

Issue Summary

Executing 'serverless' command fails with 'Error: Cannot find module './fetch.node' for webpack when using IPFS module.

Actual behavior

Created new repo via 'npx create-next-app@latest'
Imported ipfs-http-client
Added 'serverless.yml'
setup simple connection to an ipfs provider in index.js

executed npm run build => no issues
executed serverless => error

Expected behavior

Steps to reproduce

https://github.com/tmaus/serverless-nextjs-ipfs

Screenshots/Code/Configuration/Logs

Versions

MacOS (12.4)

• OS/Environment:
• @sls-next/serverless-component version:
• Next.js version:
  node: 16.1.0
  npm 8.15.0
  next: 12.2.8
  react: 18.2.0

Additional context

Stumbled upon it on a bigger project. Assume its webpack related but was not able to overcome it after a couple of days trying.

Checklist

• You have reviewed the README and FAQs, which answers several common questions.
• You have reviewed our DEBUGGING wiki and have tried your best to include complete information and reproduction steps (including your configuration) as is possible. As there is only one maintainer (who maintains this in his free time) and thus very limited resources, if you have time, please try to debug the issue a bit yourself if possible.
• You have first tried using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

thanks for your help

[jhoan2]

Did you ever find a fix for this? I'm also having this error.

[xyd945]

anyone fixed this issue. I can build locally without any issue. but when I try to deploy it to vercel or was amplify, the node-fetch module is missing during deployment....

[JTZ18]

anyone fixed this issue. I can build locally without any issue. but when I try to deploy it to vercel or was amplify, the node-fetch module is missing during deployment....

Hey i wanted to ask how you managed to run locally? do i have to configure my nextjs webpack or something? i seem to get the error even on my dev server in localhost

[xlassix]

I found a way out, use Page router(/pages/../index.tsx) for the pages where you use the ipfs client.
There seems to be an issue using the package on a page in the App router(/app/../pages.tsx)

[dang1412]

I put it in a component (use the IPFS module), then use the dynamic loading technique with ssr=false in the page file

const TestConnectLoad = () => import('../components/TestConnect/TestConnect')
const TestConnect = dynamic(TestConnectLoad, {ssr: false})

export default function Page() {

  return (
      <TestConnect />
  )
}

The error gone.