"top-level-await" error in Next.js 13 project

[theDanielJLewis]

I'm going crazy trying to figure this one out! All the courses and tutorials don't seem to show pulling in MongoDB data into a Next.js 13 project.

I'm on Next.js 13.4 with Mongoose 7.1.1.

I keep running into the following error:

- error ./node_modules/bson/lib/bson.mjs
Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
Import trace for requested module:
./node_modules/bson/lib/bson.mjs
./node_modules/mongoose/lib/utils.js
./node_modules/mongoose/lib/index.js
./node_modules/mongoose/index.js
./src/utils/db.ts
./src/app/layout.tsx

The last line is merely my latest attempt at doing something with Mongoose, but I've tried connecting within a function inside a /app/ page and I've tried making a seemingly pointless internal API through the /api/route.ts method. But whenever I merely await anything with the database inside an async function, I get the above error.

This is through running next dev on my localhost. Interestingly, if I run next dev --turbo, I don't get this error. But since turbo isn't stable, I can't trust it, yet.

I saw this seemingly related suggestion to add experimental: { serverComponentsExternalPackages: ["mongoose"]} to the next.config.js file, but that didn't fix it for me.

Any ideas?

[theDanielJLewis]

Ah! Apparently, this is an incompatibility introduced with bson@5 in mongoose@7. When I downgraded to mongoose@6, everything worked as expected.

[Piyusharora2003]

hii @theDanielJLewis can you tell which version of Mongoose you installed . I too getting same error .

[vkarpov15]

Strange that experimental: { serverComponentsExternalPackages: ["mongoose"]} doesn't fix this issue. Can you please provide a code sample that demonstrates this issue?

[theDanielJLewis]

This happens to me with Mongoose 7. But downgrading to Mongoose 6 resolved the problem.

[Piyusharora2003]

Strange that experimental: { serverComponentsExternalPackages: ["mongoose"]} doesn't fix this issue. Can you please provide a code sample that demonstrates this issue?

It worked later automatically , anyways thanks for the help @vkarpov15 @theDanielJLewis .

[vamshimorlawar]

Downgrading Mongoose to 6.10.0 resolved the problem. Are there any side effects of this?

[garfield786]

This worked for me, in your next.config.js put the following

export const webpack = (config) => {
  config.experiments = { ...config.experiments, topLevelAwait: true };
  return config;
};

[vkarpov15]

That's the way to solve this issue. Here's the docs: https://mongoosejs.com/docs/nextjs.html