Site fails to build production site with blog post that uses `require` after upgrading to beta 7

🐛 Bug Report

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

(A clear and concise description of what the bug is.)

I have a site that builds without error on beta 6.

After upgrading to beta 7, I’m getting errors while doing a production build with yarn build: ReferenceError: require is not defined. (The full stack trace is below.)

I’ve narrowed the issue down to this element in a blog post:

<AsciinemaPlayer
  src={
    require("./assets/2021-03-01-shell-tab-completion/recording.cast").default
  }
  width={200}
  height={19}
  preload={true}
  poster="npt:4"
/>

Removing this element causes yarn build to succeed, even though I use the exact same thing in documentation pages (examples below), and those build without issue.

I have no issues when I run yarn start, and the affected blog post behaves as expected.

I have a custom plugin that adds a Webpack rule for .cast files. However, neither the error message nor stack trace suggest any issue with this, and it worked without issue with beta 6:

const plugin = function () {
  return {
    name: "asciinema-player",
    // ... snip ...
    configureWebpack() {
      const { loaders } = utils.getFileLoaderUtils();

      return {
        module: {
          rules: [
            {
              test: /\.cast$/,
              use: [loaders.file({ folder: "asciicasts" })],
            },
          ],
        },
      };
    },
  };
};

Furthermore, replacing the path in the require() call to an image does not fix the issue.

Have you read the Contributing Guidelines on issues?

Yes

Steps to reproduce

Use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug.

Happy to do this if this would be helpful - just want to check I’m not doing anything obviously wrong first 😃

Expected behavior

The site builds without error for development or production, or tells me what the real issue is.

Actual behavior

yarn start builds the site successfully and the affected blog post behaves correctly in the browswer. yarn build fails with the following output:

$ yarn build
yarn run v1.22.15
$ docusaurus build

[en] Creating an optimized production build...

✔ Client


✔ Server
  Compiled successfully in 31.63s


✔ Client


● Server █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 stored

Unable to build website for locale "en".
ReferenceError: require is not defined
    at MDXContent (eval at index (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/@mdx-js/runtime/dist/cjs.js:208:12), <anonymous>:30:100)
    at processChild (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at mdxToHtml (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/@docusaurus/utils/lib/mdxUtils.js:26:29)
    at /Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/@docusaurus/plugin-content-blog/lib/blogUtils.js:108:44
    at Array.forEach (<anonymous>)
    at generateBlogFeed (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/@docusaurus/plugin-content-blog/lib/blogUtils.js:100:15)
    at async Object.postBuild (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/@docusaurus/plugin-content-blog/lib/index.js:338:26)
    at async /Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/@docusaurus/core/lib/commands/build.js:158:9
    at async Promise.all (index 1)
    at async buildLocale (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/@docusaurus/core/lib/commands/build.js:154:5)
    at async tryToBuildLocale (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/@docusaurus/core/lib/commands/build.js:32:20)
    at async mapAsyncSequencial (/Users/charleskorn/Repositories/Personal/batect/batect.dev/node_modules/@docusaurus/utils/lib/index.js:264:24)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Commenting out the use of require() in this blog post allows yarn build to succeed, despite the fact that the same pattern is used in other places (eg. this page in the documentation).

Your environment

• Public source code: https://github.com/batect/batect.dev
• Public site URL: https://batect.dev
• Docusaurus version used: 2.0.0-beta.6, upgrading to 2.0.0-beta.7
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Node.js 16.10.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 11.6

Reproducible demo

Use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug.

(Paste the link to an example repo, including a docusaurus.config.js, and exact instructions to reproduce the issue.)

Happy to do this if this would be helpful - just want to check I’m not doing anything obviously wrong first 😃

[Josh-Cena]

Yeah, this definitely needs a fix…

[slorber]

Should be fixed in https://github.com/facebook/docusaurus/pull/5753, please try the latest canary after merge