Does the top-level-await error mean Webpack is already installed?

Question

I'm getting the error Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

After some research, I created a webpack.config.js file in the same location as my package.json file. Here is the content

module.exports = {
    experiments: {
        topLevelAwait: true
    }
};

This had no effect. I still get the error.

Do I need to explicitly install Webpack and then create the config file? That seems odd since the original error itself implies Webpack is already there.

Here are the dependencies from my package.json file. Webpack isn't there.

"dependencies": {
    "@aws-amplify/ui-react": "^4.6.2",
    "@nextui-org/react": "^1.0.0-beta.12",
    "aws-amplify": "^5.2.1",
    "next": "^13.4.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }

1. Do I need to install Webpack anyway?
2. Or, if I don't need to install it, what do I need to change about the webpack.config.js file to get this working?

Answer 1

It turns out NextJS has Webpack embedded in it. Therefore Webpack is installed.

Also, the way to enable top-level-await is to annotate the next.config.js file like this:

module.exports = {
    webpack: (config) => {
        // this will override the experiments
        config.experiments = {...config.experiments, topLevelAwait: true};
        // this will just update topLevelAwait property of config.experiments
        // config.experiments.topLevelAwait = true
        return config;
    },
};