SSR Fails if module uses top-level await or imports module using top-level await

[NickGerleman]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Usage of top-level await in a component rendered as part of a docusaurus page leads to server-side rendering errors (but works on client side).

This was first encountered when importing an ES module using top-level await, but the same behavior can be replicated by adding a top-level await statement to the default pages/index.tsx. We get a separate error if we try to mark the example app as an ES module, but bypassing that, we get this same issue from importing the component. It looks like webpack may apply transformations automatically when encountering top level await. https://webpack.js.org/configuration/experiments/#experimentstoplevelawait

Reproducible demo

https://github.com/NickGerleman/docusaurus-await-repro

Steps to reproduce

1. Ad the following snippet to pages/index.tsx in a new Docusaurus V3 app

const a = await new Promise((resolve) => {
  setTimeout(() => resolve(42), 0);
})

2. Run yarn build --dev

Expected behavior

Build succeeds

Actual behavior

✖ Server
  Compiled with some errors in 5.88s

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at LoadableComponent (webpack-internal:///./node_modules/react-loadable/lib/index.js:138:32)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at Switch (webpack-internal:///./node_modules/react-router/esm/react-router.js:850:29)
    at Route (webpack-internal:///./node_modules/react-router/esm/react-router.js:648:29)
    at ClientLifecyclesDispatcher (webpack-internal:///./node_modules/@docusaurus/core/lib/client/ClientLifecyclesDispatcher.js:15:261)
    at PendingNavigation (webpack-internal:///./node_modules/@docusaurus/core/lib/client/PendingNavigation.js:17:150)
    at Root (webpack-internal:///./node_modules/@docusaurus/core/lib/client/theme-fallback/Root/index.js:20:16)
    at BrowserContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/browserContext.js:21:127)
    at DocusaurusContextProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/docusaurusContext.js:21:496)
    at ErrorBoundary (webpack-internal:///./node_modules/@docusaurus/core/lib/client/exports/ErrorBoundary.js:16:269)
    at App (webpack-internal:///./node_modules/@docusaurus/core/lib/client/App.js:29:241)
    at LinksCollectorProvider (webpack-internal:///./node_modules/@docusaurus/core/lib/client/LinksCollector.js:17:125)
    at Router (webpack-internal:///./node_modules/react-router/esm/react-router.js:267:30)
    at StaticRouter (webpack-internal:///./node_modules/react-router/esm/react-router.js:763:35)
    at r (webpack-internal:///./node_modules/react-helmet-async/lib/index.module.js:17:7350)
    at Capture (webpack-internal:///./node_modules/react-loadable/lib/index.js:294:30)
Error: Docusaurus server-side rendering could not render static page with path / because of error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at render (webpack-internal:///./node_modules/@docusaurus/core/lib/client/serverEntry.js:35:346)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /Users/ngerlem/github/my-website/node_modules/p-map/index.js:57:22 {
  [cause]: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
      at renderElement (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:6109:9)
      at renderNodeDestructiveImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
      at renderNodeDestructive (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
      at renderContextProvider (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:5986:3)
      at renderElement (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:6083:11)
      at renderNodeDestructiveImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
      at renderNodeDestructive (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
      at renderIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:5851:7)
      at renderElement (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
      at renderNodeDestructiveImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
}

Error: Unable to build website for locale en.
    at tryToBuildLocale (/Users/ngerlem/github/my-website/node_modules/@docusaurus/core/lib/commands/build.js:55:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async mapAsyncSequential (/Users/ngerlem/github/my-website/node_modules/@docusaurus/utils/lib/jsUtils.js:44:24)
    at async Command.build (/Users/ngerlem/github/my-website/node_modules/@docusaurus/core/lib/commands/build.js:82:21) {
  [cause]: Error: Failed to compile due to Webpack errors.
  Error: Docusaurus server-side rendering could not render static page with path / because of error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
      at /Users/ngerlem/github/my-website/node_modules/@docusaurus/core/lib/webpack/utils.js:207:24
      at /Users/ngerlem/github/my-website/node_modules/webpack/lib/MultiCompiler.js:554:14
      at processQueueWorker (/Users/ngerlem/github/my-website/node_modules/webpack/lib/MultiCompiler.js:491:6)
      at process.processTicksAndRejections (node:internal/process/task_queues:77:11)
}

[INFO] Docusaurus version: 3.0.0-rc.1
Node version: v18.16.1

Your environment

Docusaurus version: 3.0.0-rc.1
Node version: v18.16.1

Self-service

• I'd be willing to fix this bug myself.

[NickGerleman]

It looks like webpack async modules work out of the box with import, but will return a promise if sync required. https://webpack.js.org/blog/2020-10-10-webpack-5-release/#async-modules

I tried to dig into how react-loadable as used by Dodusaurus works but didn’t get very far. I suspect there is some code somewhere doing sync style require and getting a promise back.

[Josh-Cena]

Granted it has been a while, but I think it's a duplicate of #7238. TLA still doesn't work in Docusaurus because of all the legacy setup we have.

[Josh-Cena]

Closing as a duplicate