Gun not working with next.js 14.0.4

[retrouser955]

I am currently trying out Gun with next.js and I came across a problem. Next.js is throwing an error which states

./node_modules/gun/gun.js:5:16
Module not found
  3 |   /* UNBUILD */
  4 |   function USE(arg, req){
> 5 |     return req? require(arg) : arg.slice? USE[R(arg)] : function(mod, path){
    |                 ^^^^^^^^^^^^
  6 |       arg(mod = {exports: {}});
  7 |       USE[R(path)] = mod.exports;
  8 |     }

https://nextjs.org/docs/messages/module-not-found

My gun version is 0.2020.1239

Here is my code for context.

import GUN from "gun/gun"
import "gun/sea"
import "gun/axe"

export const db = GUN()

I am importing the db variable to multiple components

[bmatusiak]

can you try this?

npm install github:bmatusiak/gun-rebuild github:bmatusiak/gun-rebuild-sea

import Gun from "gun"
import "gun/sea"

export const db = Gun({ peers: [] })

*dont use axe. you will run into unexpected issues sometimes

[retrouser955]

Alright, I will give it a try soon

[retrouser955]

Now it is giving the error

Error: Cannot find module './lib/text-encoding'
Require stack:
- [project directory]\.next\server\chunks\[turbopack]_runtime.js
- [project directory]\.next\server\app\page.js
- [project directory]\node_modules\next\dist\server\require.js
- [project directory]\node_modules\next\dist\server\load-components.js
- [project directory]\node_modules\next\dist\build\utils.js
- [project directory]\node_modules\next\dist\server\dev\hot-middleware.js
- [project directory]\node_modules\next\dist\server\dev\hot-reloader-webpack.js
- [project directory]\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js
- [project directory]\node_modules\next\dist\server\lib\router-server.js
- [project directory]\node_modules\next\dist\server\lib\start-server.js

[bmatusiak]

now add import "gun/lib/mobile" and do npm install text-encoding buffer

import "gun/lib/mobile"
import Gun from "gun"
import "gun/sea"

export const db = Gun({ peers: [] })

if it goes back to

./node_modules/gun/gun.js:5:16
Module not found
  3 |   /* UNBUILD */
  4 |   function USE(arg, req){
> 5 |     return req? require(arg) : arg.slice? USE[R(arg)] : function(mod, path){
    |                 ^^^^^^^^^^^^
  6 |       arg(mod = {exports: {}});
  7 |       USE[R(path)] = mod.exports;
  8 |     }

https://nextjs.org/docs/messages/module-not-found

then delete the node_modules folder in your project and run npm install in your project , to re-install everything again

[retrouser955]

It is still giving the error Error: Cannot find module './lib/text-encoding'. I have tried deleting node modules and reinstalling all packages as well.

[bmatusiak]

ok so,

i ran npx create-next-app@latest

i did npm install github:amark/gun github:bmatusiak/gun-rebuild github:bmatusiak/gun-rebuild-sea text-encoding buffer

this is my src\pages\index.js file

// import Image from 'next/image'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

import Buffer from "buffer";
import { TextEncoder, TextDecoder } from "text-encoding";
global.Buffer = global.Buffer || Buffer.Buffer;
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
import Gun from "gun/gun"
import "gun/sea"

export const db = Gun({ peers: [] })

export default function Home() {
  return (
    <main
      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
    >
      Hello World
    </main>
  )
}

this works for me

[bmatusiak]

@amark

when i did import 'gun/lib/mobile';

i got

⨯ .\node_modules\gun\lib\mobile.js:1
import Buffer from "buffer";
^^^^^^

SyntaxError: Cannot use import statement outside a module

it also does not respect the package.json's browser field

[smasgl]

Same problem here, im using sveltekit and im getting the same error:

`Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: Cannot find module './lib/text-encoding'\nRequire stack:\n- /var/task/node_modules/gun/sea.js","reason":{"errorType":"Error","errorMessage":"Cannot find module './lib/text-encoding'\nRequire stack:\n- /var/task/node_modules/gun/sea.js","code":"MODULE_NOT_FOUND","requireStack":["/var/task/node_modules/gun/sea.js"],"stack":["Error: Cannot find module './lib/text-encoding'","Require stack:","- /var/task/node_modules/gun/sea.js","    at Module._resolveFilename (node:internal/modules/cjs/loader:1134:15)","    at Module._load (node:internal/modules/cjs/loader:975:27)","    at exports.b (/var/task/___vc/__launcher/chunk-5UAC7W5H.js:1:1033)","    at /var/task/___vc/__launcher/bridge-server-BGIDXK2J.js:1:1443","    at Function.Re (/var/task/___vc/__launcher/bridge-server-BGIDXK2J.js:1:1809)","    at e.<computed>.L._load (/var/task/___vc/__launcher/bridge-server-BGIDXK2J.js:1:1413)","    at Module.require (node:internal/modules/cjs/loader:1225:19)","    at require (node:internal/modules/helpers:177:18)","    at o (/var/task/node_modules/gun/sea.js:1:488)","    at /var/task/node_modules/gun/sea.js:1:679"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error: Cannot find module './lib/text-encoding'","Require stack:","- /var/task/node_modules/gun/sea.js","    at process.<anonymous> (file:///var/runtime/index.mjs:1276:17)","    at process.emit (node:events:529:35)","    at emit (node:internal/process/promises:149:20)","    at processPromiseRejections (node:internal/process/promises:283:27)","    at process.processTicksAndRejections (node:internal/process/task_queues:96:32)"]}`

Im using vercel to host the app...

Also made a post about this on stackoverflow: https://stackoverflow.com/questions/78252998/deploying-sveltekit-app-with-gunjs-on-vercel-throws-cannot-find-module-lib-te

Actually got it working posted the answer on the stackoverflow link above.

[amark]

@smasgl @bmatusiak gaaah, thank you for looking at this. I have very difficult time understanding how to get these types of issues fixed in a way that works uniformly across all environments. Especially because GUN is already-built, it doesn't need build. Do you have any new ideas @bmatusiak ?

[mbj36]

ok so,

i ran npx create-next-app@latest

i did npm install github:amark/gun github:bmatusiak/gun-rebuild github:bmatusiak/gun-rebuild-sea text-encoding buffer

this is my src\pages\index.js file

// import Image from 'next/image'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

import Buffer from "buffer";
import { TextEncoder, TextDecoder } from "text-encoding";
global.Buffer = global.Buffer || Buffer.Buffer;
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
import Gun from "gun/gun"
import "gun/sea"

export const db = Gun({ peers: [] })

export default function Home() {
  return (
    <main
      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
    >
      Hello World
    </main>
  )
}

this works for me

This doesn;t work for me