Browser runtime require error when user within ESM package

[xobotyi]

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

If to switch example docusaurus package type to module - following runtime error will be emitted within browser.

runtime~main.js:39 Uncaught ReferenceError: require is not defined
    at eval (client-modules.js:1:1)
    at ./.docusaurus/client-modules.js (main.js:1708:1)
    at __webpack_require__ (runtime~main.js:36:33)
    at fn (runtime~main.js:341:21)
    at eval (App.js:7:83)
    at ./node_modules/@docusaurus/core/lib/client/App.js (main.js:23:1)
    at __webpack_require__ (runtime~main.js:36:33)
    at fn (runtime~main.js:341:21)
    at eval (clientEntry.js:8:62)
    at ./node_modules/@docusaurus/core/lib/client/clientEntry.js (main.js:79:1)
eval @ client-modules.js:1
./.docusaurus/client-modules.js @ main.js:1708
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ App.js:7
./node_modules/@docusaurus/core/lib/client/App.js @ main.js:23
__webpack_require__ @ runtime~main.js:36
fn @ runtime~main.js:341
eval @ clientEntry.js:8
./node_modules/@docusaurus/core/lib/client/clientEntry.js @ main.js:79
__webpack_require__ @ runtime~main.js:36
__webpack_exec__ @ main.js:1786
(anonymous) @ main.js:1787
__webpack_require__.O @ runtime~main.js:83
(anonymous) @ main.js:1788
webpackJsonpCallback @ runtime~main.js:1336
(anonymous) @ main.js:9

Reproducible demo

No response

Steps to reproduce

1. Initialize docusaurus
2. Change type to module
3. Rename babel.config.js to babel.config.cjs
4. docusaurus start will succesfully start but runtime error will be emitted within browser

Expected behavior

Site works

Actual behavior

Runtime error

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used: 3.0.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome latest
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11

Self-service

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

[slorber]

We don't support running Docusaurus as native ESM in Node.js so I'd recommend to not use type module in the first place for now.

Duplicate of #6520

[xobotyi]

😓 recomendations are good, but we have some packages that forces to change type to module.
okay, yet have to suspend documentation updates

[slorber]

Which packages forces you to change to type module and why?

You can load ESM-only packages by using dynamic imports, or use the .mjs extension

[Josh-Cena]

This is a weirdity of Webpack: it doesn't treat the absence of type as implying type: commonjs. Rather, "no type", type: module and type: commonjs are three distinct entities and once you have an explicit type at the project root, you cannot go back to the "unspecified" state in a subpackage!

I would recommend setting up your website outside of the influence of your main project's package.json...