Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gun not working with next.js 14.0.4 #1352

Open
retrouser955 opened this issue Dec 30, 2023 · 15 comments
Open

Gun not working with next.js 14.0.4 #1352

retrouser955 opened this issue Dec 30, 2023 · 15 comments

Comments

@retrouser955
Copy link

retrouser955 commented Dec 30, 2023

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
Copy link
Collaborator

bmatusiak commented Jan 3, 2024

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
Copy link
Author

Alright, I will give it a try soon

@retrouser955
Copy link
Author

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
Copy link
Collaborator

bmatusiak commented Jan 6, 2024

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
Copy link
Author

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
Copy link
Collaborator

bmatusiak commented Jan 6, 2024

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
Copy link
Collaborator

bmatusiak commented Jan 6, 2024

@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
Copy link

smasgl commented Apr 3, 2024

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
Copy link
Owner

amark commented Apr 4, 2024

@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
Copy link

mbj36 commented Aug 8, 2024

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
Copy link
Collaborator

@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
Copy link

mbj36 commented Aug 16, 2024

@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                                                                                                    

> [email protected] 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
Copy link
Collaborator

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

@mbj36
Copy link

mbj36 commented Aug 17, 2024

@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 [email protected]: 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 [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: no longer maintained

added 200 packages, and audited 201 packages in 25s

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

@bmatusiak
Copy link
Collaborator

bmatusiak commented Aug 17, 2024

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,.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants