top-level-await error using app directory

[niicojs]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

I'm using ky-universal in my project.
next@latest
node LTS (18)

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

pnpm

Describe the Bug

Using pages directory, everything works fine but as soon as I define experimental.appDir = true in next.config.js I have this error:

Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

Expected Behavior

Just activating experimental pages should not alter anything in pages.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://stackblitz.com/edit/nextjs-vwd7jz

To Reproduce

Example available here: https://stackblitz.com/edit/nextjs-vwd7jz
Just remove app dir in next config and it will work again.

_NEXT-3126

[Fredkiss3]

I think it's a bug with ky-universal, maybe there is a top level await somewhere in the package, as you can see in the error description :

[niicojs]

There is, but this is totally valid and works fine without the app dir.
The bug is that it works fine without app dir, but not with it (even if ky is only used in pages dir)

[balazsorban44]

This is related to #42741

Here is a workaround:

/** @type {import("next").NextConfig} */
module.exports = {
  experimental: { appDir: true },
  webpack(config) {
    config.experiments = { ...config.experiments, topLevelAwait: true }
    return config
  },
}

[Renov4ted]

This is related to #42741

Here is a workaround:

/** @type {import("next").NextConfig} */
module.exports = {
  experimental: { appDir: true },
  webpack(config) {
    config.experiments = { ...config.experiments, topLevelAwait: true }
    return config
  },
}

I don't have that section in my project where to find that

[vadzim]

for me this workaround works for pages, but not for api.
It's strange) I like top level await)

[Albosonic]

Also building a nextJS 13 app. With apollo, and saw this error. What fixed it for me was moving my my apollo client query into the component. Rather than lexically before it. eg:
this works:

import client from './apollo-client';
import { Inter } from 'next/font/google'
import styles from './page.module.css'

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

export default async function Home() {
  const { data } = await client.query({
    query: gql`
      query {
        customer {
          id
        }
      }
    `,
  });
  
  return (
    <main className={styles.main}>
      <h1>My Component</h1>
    </main>
  )
}
`
this does not work and I get the top level experiment error:
import { gql } from "@apollo/client";
import client from './apollo-client';
import { Inter } from 'next/font/google'
import styles from './page.module.css'

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

const { data } = await client.query({
  query: gql`
    query {
      customer {
        id
      }
    }
  `,
});

export default async function Home() {
  
  return (
    <main className={styles.main}>
      <h1>My Component</h1>
    </main>
  )
}
`


worth noting that my config still looks like this:
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

[sagar285]

if there is anyone who is able to findout the way to connect next.js 13 to mongodb database pls pin the anaswer over here , this is an big issue now

[vadzim]

@sagar285 here https://stackoverflow.com/questions/75697312/import-mongoose-lib-in-api-directory-in-next-js-13-2-app-directory-gives-error there's an advise to add erverComponentsExternalPackages: ["mongoose"] option to the next config as a workaround