facebook/Docusaurus

Module with Top-level await transformed incorrectly during server build

Open

#7238 opened on Apr 25, 2022

View on GitHub
 (5 comments) (0 reactions) (0 assignees)JavaScript (12,167 stars) (1,074 forks)batch import
bugdifficulty: advancedexternalhelp wanted

Description

Have you 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

Hi, I have enabled top-level await support in webpack config, and things work fine during docusaurus run, but fails during docusaurus build

This is my mdx content:

---
title: Markdown page example
---
export const test = await Promise.resolve('hello') 


<div>{test}</div>

Reproducible demo

https://stackblitz.com/edit/github-7mt6ad?file=src/pages/test.mdx

Steps to reproduce

  1. Enable top-level await support in webpack by setting experiments.topLevelAwait to true using configureWebpack (see plugins at docusaurus.config.js )
  2. Try using top-level await during docusaurus run, things work fine.
  3. It fails during docusaurus build

Expected behavior

top-level await should also work during build process

Actual behavior

top-level await doesn't work during build process


[INFO] [en] Creating an optimized production build...

✔ Client
  

✖ Server
  Compiled with some errors in 18.35s

[ERROR] Docusaurus server-side rendering could not render static page with path /test.


TypeError: Cannot read properties of undefined (reading 'title')
[ERROR] Unable to build website for locale en.
[ERROR] Error: Failed to compile with errors.

Your environment

  • Docusaurus version used: 2.0.0-beta.18
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS): windows 10

Self-service

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

Contributor guide

Tech stack
javascriptreactnodejs
Domain
frontendbuild system
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Node.jsDocusaurus basicswebpack configuration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
The issue is that Docusaurus build fails when top level await is used in MDX content, even though it works in dev mode. The problem lies in how the server build handles top level await. Investigate the webpack configuration for the server build, particularly the `experiments.topLevelAwait` setting. Look at the Docusaurus source code for how it configures webpack for server side rendering, likely in `packages/docusaurus/src/webpack/`. Check if there is a separate webpack config for build vs dev. Also review any related issues or PRs about top level await. The reproducible demo is at https://stackblitz.com/edit/github 7mt6ad?file=src/pages/test.mdx and the config at docusaurus.config.js.