Error related to fetch.js and Webpack

[ottpeter]

I'm getting an error in Next.js, which is using ipfs-utils at some point. ipfs-utisl is imported by co2-storage.
I tried changing the line const fetch = require(implName) to const fetch = require('./fetch.node'), but it didn't help.

Import trace for requested module:
./node_modules/ipfs-utils/src/http/fetch.js
./node_modules/ipfs-utils/src/http.js
./node_modules/ipfs-http-client/src/files/rm.js
./node_modules/ipfs-http-client/src/files/index.js
./node_modules/ipfs-http-client/src/index.js
./node_modules/@co2-storage/js-api/src/js/storage/FGStorage.js
./node_modules/@co2-storage/js-api/src/js/index.js
./app/api/create-action-plan/route.ts

• error Error: Cannot find module './fetch.node'
  at webpackEmptyContext (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:22:10)
  at eval (webpack-internal:///(rsc)/./node_modules/ipfs-utils/src/http/fetch.js:14:118)
  at (rsc)/./node_modules/ipfs-utils/src/http/fetch.js (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:2173:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/ipfs-utils/src/http.js:2:37)
  at (rsc)/./node_modules/ipfs-utils/src/http.js (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:2151:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/ipfs-http-client/src/lib/core.js:11:80)
  at (rsc)/./node_modules/ipfs-http-client/src/lib/core.js (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:8012:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/ipfs-http-client/src/lib/configure.js:5:66)
  at (rsc)/./node_modules/ipfs-http-client/src/lib/configure.js (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:8001:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/ipfs-http-client/src/bitswap/wantlist.js:6:75)
  at (rsc)/./node_modules/ipfs-http-client/src/bitswap/wantlist.js (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:7253:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/ipfs-http-client/src/bitswap/index.js:5:70)
  at (rsc)/./node_modules/ipfs-http-client/src/bitswap/index.js (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:7209:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/ipfs-http-client/src/index.js:18:75)
  at (rsc)/./node_modules/ipfs-http-client/src/index.js (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:7880:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/@co2-storage/js-api/src/js/storage/FGStorage.js:5:74)
  at (rsc)/./node_modules/@co2-storage/js-api/src/js/storage/FGStorage.js (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:4250:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/@co2-storage/js-api/src/js/index.js:7:79)
  at (rsc)/./node_modules/@co2-storage/js-api/src/js/index.js (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:4239:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./app/api/create-action-plan/route.ts:8:77)
  at (rsc)/./app/api/create-action-plan/route.ts (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:282:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fcreate-action-plan%2Froute&page=%2Fapi%2Fcreate-action-plan%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fcreate-action-plan%2Froute.ts&appDir=%2Fhome%2Fwebdev%2Fnftreesbrasil%2Fnextjs%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2Fhome%2Fwebdev%2Fnftreesbrasil%2Fnextjs&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!:16:127)
  at (rsc)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fcreate-action-plan%2Froute&page=%2Fapi%2Fcreate-action-plan%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fcreate-action-plan%2Froute.ts&appDir=%2Fhome%2Fwebdev%2Fnftreesbrasil%2Fnextjs%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2Fhome%2Fwebdev%2Fnftreesbrasil%2Fnextjs&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D! (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:260:1)
  at webpack_require (/home/webdev/nftreesbrasil/nextjs/.next/server/webpack-runtime.js:33:43)
  at webpack_exec (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:12059:39)
  at /home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:12060:28
  at Object. (/home/webdev/nftreesbrasil/nextjs/.next/server/app/api/create-action-plan/route.js:12063:3)
  at Module._compile (node:internal/modules/cjs/loader:1233:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
  at Module.load (node:internal/modules/cjs/loader:1091:32)
  at Module._load (node:internal/modules/cjs/loader:938:12)
  at Module.require (node:internal/modules/cjs/loader:1115:19)
  at require (node:internal/modules/helpers:130:18)
  at requirePage (/home/webdev/nftreesbrasil/nextjs/node_modules/next/dist/server/require.js:112:75)
  at /home/webdev/nftreesbrasil/nextjs/node_modules/next/dist/server/load-components.js:80:84
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async loadComponentsImpl (/home/webdev/nftreesbrasil/nextjs/node_modules/next/dist/server/load-components.js:80:26)
  at async DevServer.findPageComponentsImpl (/home/webdev/nftreesbrasil/nextjs/node_modules/next/dist/server/next-server.js:434:36) {
  digest: undefined
  }

[welcome]

Thank you for submitting your first issue to this repository! A maintainer will be here shortly to triage and review.
In the meantime, please double-check that you have provided all the necessary information to make this process easy! Any information that can help save additional round trips is useful! We currently aim to give initial feedback within two business days. If this does not happen, feel free to leave a comment.
Please keep an eye on how this issue will be labeled, as labels give an overview of priorities, assignments and additional actions requested by the maintainers:

• "Priority" labels will show how urgent this is for the team.
• "Status" labels will show if this is ready to be worked on, blocked, or in progress.
• "Need" labels will indicate if additional input or analysis is required.

Finally, remember to use https://discuss.ipfs.io if you just need general support.

[sleepersubject13]

Hello there, @ottpeter,

Were you able to find a fix for this?

[niteshagnihotri]

I am facing the same error while using the latest version of ipfs-http-client in my nextjs application as it is using ipfs-utils. My application is running but with errors in the terminal that fails the build process so I ain't able to deploy my application. Please resolve it as soon as possible

Here is my github project link that's using ipfs-utils.

https://github.com/niteshagnihotri/Fund-Allocation-System

[ottpeter]

No, but it turned out it's just a warning, not an error.

[niteshagnihotri]

But i am unable to deploy the application on vercel because yarn build fails every time.

…

On Thu, 2 Nov 2023, 14:24 Peter Ott, ***@***.***> wrote: No, but it turned out it's just a warning, not an error. — Reply to this email directly, view it on GitHub <#277 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATKDLMIXWD5B5VASEOD36L3YCNNS5AVCNFSM6AAAAAA3XEVVAKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJQGMYTCNZTGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[Honour-d-dev]

any fix???

[hasparus]

Hey, so this could be solved in Node.js 18 and 20, where fetch global is already supported, right?

[JTZ18]

im facing the same issue, am on Node v21 and nextjs 14. is there no fix for this?

[Honour-d-dev]

Here's the fix that worked for me in Next.js
https://github.com/web3-storage/w3up/issues/1183#issuecomment-1836526101

[JTZ18]

Here's the fix that worked for me in Next.js

https://github.com/web3-storage/w3up/issues/1183#issuecomment-1836526101

hey thanks for the reply and suggestion. it worked for me on localhost now. seems like quite a janky fix to manually overwrite the fetch.js files in the node_modules ipfs-utils library. While this works on localhost, it would fail during any deployment as during build time on any platform would npm install the dependencies without doing the manual overwrite. Did you manage to find a fix for deployment?

[Honour-d-dev]

Here's the fix that worked for me in Next.js
https://github.com/web3-storage/w3up/issues/1183#issuecomment-1836526101

hey thanks for the reply and suggestion. it worked for me on localhost now. seems like quite a janky fix to manually overwrite the fetch.js files in the node_modules ipfs-utils library. While this works on localhost, it would fail during any deployment as during build time on any platform would npm install the dependencies without doing the manual overwrite. Did you manage to find a fix for deployment?

did you try the next.config fix??

[franzos]

I'm facing a similar issue with a project that depends on js-kubo-rpc-client, which depends on js-ipfs-utils. I'm using eslint to bundle, in hope to get jest to work.

Cannot find module './fetch.node' from 'dist/index.js'

       9 | };
      10 | var __commonJS = (cb, mod2) => function __require() {
    > 11 |   return mod2 || (0, cb[__getOwnPropNames(cb)[0]])((mod2 = { exports: {} }).exports, mod2), mod2.exports;
         |                                                   ^
      12 | };
      13 | var __export = (target, all2) => {
      14 |   for (var name10 in all2)

      at Resolver._throwModNotFoundError (node_modules/.pnpm/jest-resolve@29.7.0/node_modules/jest-resolve/build/resolver.js:427:11)
      at node_modules/.pnpm/ipfs-utils@9.0.14/node_modules/ipfs-utils/src/http/fetch.js (dist/index.js:47063:17)
      at __require (dist/index.js:11:51)
      at node_modules/.pnpm/ipfs-utils@9.0.14/node_modules/ipfs-utils/src/http.js (dist/index.js:47374:39)
      at __require (dist/index.js:11:51)
      at node_modules/.pnpm/kubo-rpc-client@3.0.2/node_modules/kubo-rpc-client/src/lib/core.js (dist/index.js:50414:28)
      at __init (dist/index.js:8:56)
      at node_modules/.pnpm/kubo-rpc-client@3.0.2/node_modules/kubo-rpc-client/src/lib/configure.js (dist/index.js:50556:5)
      at __init (dist/index.js:8:56)
      at node_modules/.pnpm/kubo-rpc-client@3.0.2/node_modules/kubo-rpc-client/src/bitswap/wantlist.js (dist/index.js:50670:5)
      at __init (dist/index.js:8:56)
      at node_modules/.pnpm/kubo-rpc-client@3.0.2/node_modules/kubo-rpc-client/src/bitswap/index.js (dist/index.js:50934:5)
      at __init (dist/index.js:8:56)
      at node_modules/.pnpm/kubo-rpc-client@3.0.2/node_modules/kubo-rpc-client/src/index.js (dist/index.js:58526:5)
      at __init (dist/index.js:8:56)
      at dist/index.js:58719:69
      at IpfsHttpService.init (dist/index.js:58719:33)
      at Object.<anonymous> (test/e2e/ipfs.spec.ts:20:9

The depreciation of the original IPFS libraries is a real shame. js-kubo-rpc-client is a disaster.

[0x62]

I'm facing this exact error when trying to use a package that depends on ipfs-utils (via ipfs-http-client).

Error: Cannot find module './fetch.node'
Require stack:
- /Users/**/build/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Function.Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at ../sdk-js/node_modules/ipfs-utils/src/http/fetch.js (/Users/**/node_modules/ipfs-utils/src/http/fetch.js:20:15)

I've tried adding ipfs-utils and ipfs-http-client to serverDependenciesToBundle, but this doesn't work as fetch.node is not included within the bundle.