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

[bmatusiak]

@mbj36 i can confirm that it does work..
can you provide us with your error and more details like below

npx create-next-app@latest
√ What is your project named? ... my-app
√ Would you like to use TypeScript? ... No / Yes   <-- No 
√ Would you like to use ESLint? ... No / Yes   <-- Yes   
√ Would you like to use Tailwind CSS? ... No / Yes   <-- Yes   
√ Would you like to use `src/` directory? ... No / Yes   <-- Yes   
√ Would you like to use App Router? (recommended) ... No / Yes   <-- No 
√ Would you like to customize the default import alias (@/*)? ... No / Yes   <-- No 

npx create-next-app@latest
npm install github:amark/gun github:bmatusiak/gun-rebuild github:bmatusiak/gun-rebuild-sea text-encoding buffer

my-app\src\pages\index.js

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

devtools console

react-dom.development.js:29890 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
gun.js:759 Hello wonderful person! :) Thanks for using GUN, please ask for help on http://chat.gun.eco if anything takes you longer than 5min to figure out!
websocket.js:46 [HMR] connected

[mbj36]

@bmatusiak It doesn't work for me!

here is the log

✔ What is your project named? … gun-next
✔ Would you like to use TypeScript? … No / Yes -> No
✔ Would you like to use ESLint? … No / Yes -> No
✔ Would you like to use Tailwind CSS? … No / Yes -> No
✔ Would you like to use `src/` directory? … No / Yes -> No
✔ Would you like to use App Router? (recommended) … No / Yes -> Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes -> No
Creating a new Next.js app in /Users/mohitbajoria/Desktop/work/gun-next.

Using npm.

Initializing project with template: app 


Installing dependencies:
- react
- react-dom
- next


added 21 packages, and audited 22 packages in 6s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

mohitbajoria@Mohits-MacBook-Pro gun-next % npm run dev                                                                                                    

> gun-next@0.1.0 dev
> next dev

 ⚠ Port 3000 is in use, trying 3001 instead.
  ▲ Next.js 14.2.5
  - Local:        http://localhost:3001

 ✓ Starting...
 ✓ Ready in 1301ms
 ○ Compiling / ...
 ✓ Compiled / in 4.1s (549 modules)
Hello wonderful person! :) Thanks for using GUN, please ask for help on http://chat.gun.eco if anything takes you longer than 5min to figure out!
 ⨯ Error: Cannot find module './lib/text-encoding'
    at __webpack_require__ (/Users/mohitbajoria/Desktop/work/gun-next/.next/server/webpack-runtime.js:33:43)
    at eval (./app/page.js:17:65)
    at (rsc)/./app/page.js (/Users/mohitbajoria/Desktop/work/gun-next/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/mohitbajoria/Desktop/work/gun-next/.next/server/webpack-runtime.js:33:43)
    at async Promise.all (index 0)
digest: "2043614672"
 ⨯ Error: Cannot find module './lib/text-encoding'
    at __webpack_require__ (/Users/mohitbajoria/Desktop/work/gun-next/.next/server/webpack-runtime.js:33:43)
    at eval (./app/page.js:17:65)
    at (rsc)/./app/page.js (/Users/mohitbajoria/Desktop/work/gun-next/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ (/Users/mohitbajoria/Desktop/work/gun-next/.next/server/webpack-runtime.js:33:43)
    at async Promise.all (index 0)
digest: "2043614672"
 ⨯ Error: Cannot find module './lib/text-encoding'
    at __webpack_require__ (/Users/mohitbajoria/Desktop/work/gun-next/.next/server/webpack-runtime.js:33:43)
    at eval (./app/page.js:17:65)
    at (rsc)/./app/page.js (/Users/mohitbajoria/Desktop/work/gun-next/.next/server/app/page.js:195:1)
    at Function.__webpack_require__ 

[bmatusiak]

@mbj36 can you provide your commands and logs to install gun?

[mbj36]

@bmatusiak Here is my package json, i am using updated version of next

{
  "name": "gun-next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "buffer": "^6.0.3",
    "gun": "github:amark/gun",
    "gun-rebuild": "github:bmatusiak/gun-rebuild",
    "gun-rebuild-sea": "github:bmatusiak/gun-rebuild-sea",
    "next": "14.2.5",
    "react": "^18",
    "react-dom": "^18",
    "text-encoding": "^0.7.0"
  }
}

npm install github:amark/gun github:bmatusiak/gun-rebuild github:bmatusiak/gun-rebuild-sea text-encoding buffer
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated text-encoding@0.7.0: no longer maintained

added 200 packages, and audited 201 packages in 25s

35 packages are looking for funding
  run `npm fund` for details

[bmatusiak]

just a thought.. can you play around with turning global to window or globalThis

it seems that the './lib/text-encoding' is trying to load, gun tried to check if they are apart of the context globals.

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

if not it tried to load it up in sea

if(!api.TextDecoder)
    {
      const { TextEncoder, TextDecoder } = USE((u+'' == typeof MODULE?'.':'')+'./lib/text-encoding', 1);
      api.TextDecoder = TextDecoder;
      api.TextEncoder = TextEncoder;
    }

and when i run with your package,json, it works for me,.