mongoose failing Next.js build — node_modules/mongoose/dist/browser.umd.js

[dangtony98]

Prerequisites

• I have written a descriptive issue title

Mongoose version

7.1.0

Node.js version

18.12.1

MongoDB version

Atlas

Operating system

macOS

Operating system version (i.e. 20.04, 11.3, 10)

12.0 — Monterey

Issue

When I run npm run build, I get the following error:

next build

- warn You have enabled experimental feature (serverComponentsExternalPackages) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

Failed to compile.

./node_modules/mongoose/dist/browser.umd.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime 
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

Import trace for requested module:
./node_modules/mongoose/dist/browser.umd.js
./src/app/api/helpers/auth.ts
./src/app/api/helpers/index.ts


> Build failed because of webpack errors
- info Creating an optimized production build .%                                                  

While I was developing fine with mongoose and Next.js using next dev, I encountered this issue when building the application with next build. It'd be amazing if someone could help me out here.

To reproduce this error, you can simply clone my repository here and start up the application; should take a few seconds to do that.

If you run npm run dev, then the app will startup fine and you can navigate to http://localhost:3000/auth/login.

However, if you run npm run build, then you'll receive the error Failed to compile with the message in the above code block.

[vkarpov15]

Have you tried the suggestion in this comment: #13252 (comment) ?

[dangtony98]

@vkarpov15 Yes I have! I've added them both to my next.config.js file.

[vkarpov15]

Are you explicitly importing mongoose/browser?

Also, are you able to share a code sample that demonstrates this issue?

[dangtony98]

I'm importing mongoose not mongoose/browser.

If you clone the repo I shared and just run npm run build then you should see the error that I listed. I'm sure it's something small — I'll continue debugging myself as well.

GitHub repo: https://github.com/Infisical/infisical-customer-portal

[sundaram2021]

Exaclty same issue

and whenever you try to run the server using npm run dev
and try to post something to the server it results into this error

`- error node_modules\mongoose\lib\types\objectid.js (21:31) @ prototype

• error Error [TypeError]: Cannot read properties of undefined (reading 'prototype')`

next version - 13.4.1
mongoose - 7.1.1

[dangtony98]

@sundaram2021 So actually my npm run dev works perfectly fine but not npm run build; I'm hoping to debug this in the next day or two — Will keep you posted.

[sundaram2021]

hey , @dangtony98 I have resolve the issue .
I think there is some problem with the mongoose version 7.1.1 with next js 13.4.1.

but if you move to mongoose version 7.0.3 then it will work fine with the next 13.4.1 version

hope it helps

[dangtony98]

@sundaram2021 Unfortunately that didn't work for me but I'm sure it was right.

I think my issue has something more to do with the separation of client and server-side code in Next.js.

Thanks though!

[sundaram2021]

you can refer my repository https://github.com/sundaram2021/blog-typescript-fullstack

i will be committing all the changes soon

[dangtony98]

So I finally managed to resolve this issue!

I had the correct base setup for adding mongoose to Next.js but my specific case used multiple mongoose connections, so many examples didn't apply to me. I ended up having to wrap my models with an async function, call the functions to get the models, and then make any queries/mutations.

I'll probably end up writing a blog about this since it was quite frustrating.

[vkarpov15]

It looks like @dangtony98 's repo is no longer public and I'm unable to repro using @sundaram2021 's repo.

I cloned https://github.com/sundaram2021/blog-typescript-fullstack, changed Mongoose version to 7.1.1, tested with both npm run dev and npm run build + npm start. In both cases, creating a user succeeds:

$ curl -X POST http://localhost:3000/api/register -d '{"username":"foo","email":"bar","password":"baz"}'
{"message":"User created successfully!"}

[dangtony98]

Hi @vkarpov15 I believe both @sundaram2021 and I have resolved the issue; we can close it now :)

[sundaram2021]

I dont't know what is the issue , it does not work with 7.1.1 version of mongoose but it with 7.0.3 ,
anyhow issue is resolved

[kurays015]

I'm facing this problem right now with nextjs, next auth 5.0.0-beta.13.

[vkarpov15]

@kurays015 please make sure you've followed the instructions on our Next.js docs. If you're still having trouble, please open a new issue with detailed repro instructions.

[Monukumar777]

So I finally managed to resolve this issue!

I had the correct base setup for adding mongoose to Next.js but my specific case used multiple mongoose connections, so many examples didn't apply to me. I ended up having to wrap my models with an async function, call the functions to get the models, and then make any queries/mutations.

I'll probably end up writing a blog about this since it was quite frustrating.

can you provide your blog link