[v2, classic]: Render CodeBlock fails with a specific content/children

[dio]

Render CodeBlock fails with a specific content/children

I have a repro repo here: https://github.com/dio/bracket-mystery

I https://github.com/dio/bracket-mystery/blob/master/docs/doc1.md, I put:

import CodeBlock from '@theme/CodeBlock';

| Markdown | Less      | Pretty     |
| -------- | --------- | ---------- |
| _Still_  | `renders` | **nicely** |
| 1        | 2         | <CodeBlock>sum(rate(grpc_client_msg_received_total{component="tsbd", grpc_type="server_stream"}[30s])) by (cluster_name)</CodeBlock>|

Try to run yarn build:

✔ Client
  Compiled successfully in 7.91s

✖ Server
  Compiled with some errors in 10.23s

TypeError: children.replace is not a function
(undefined) TypeError: children.replace is not a function
    at module.exports.__webpack_exports__.a (main:12393:19)
    at d (main:35913:498)
    at $a (main:35916:16)
    at a.b.render (main:35921:476)
    at a.b.read (main:35921:18)
    at Object.renderToString (main:35931:364)
    at serverEntry_render (main:52829:395)
Error: Failed to compile with errors.
    at compiler.run (/home/ubuntu/my-website/node_modules/@docusaurus/core/lib/webpack/utils.js:164:24)
    at finalCallback (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:254:12)
    at runWithDependencies.err (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:277:6)
    at done (/home/ubuntu/my-website/node_modules/neo-async/async.js:2931:13)
    at runCompilers (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:181:48)
    at err (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:188:7)
    at compiler.run (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:270:7)
    at finalCallback (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:257:39)
    at hooks.done.callAsync.err (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:273:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ubuntu/my-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/home/ubuntu/my-website/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:271:21)
    at hooks.afterCompile.callAsync.err (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ubuntu/my-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/ubuntu/my-website/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:678:31)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

However, if I remove the square bracket around the string 30s,

import CodeBlock from '@theme/CodeBlock';

| Markdown | Less      | Pretty     |
| -------- | --------- | ---------- |
| _Still_  | `renders` | **nicely** |
| 1        | 2         | <CodeBlock>sum(rate(grpc_client_msg_received_total{component="tsbd", grpc_type="server_stream"}30s)) by (cluster_name)</CodeBlock>|

It compiles fine.

Your environment

• OS: Ubuntu Linux 18.04
• Packages:

"@docusaurus/core": "2.0.0-alpha.66",
"@docusaurus/preset-classic": "2.0.0-alpha.66",
"@mdx-js/react": "^1.5.8",

• Env: node v14.3.0 (npm v6.14.5)

Steps to reproduce

I have a repro repo here: https://github.com/dio/bracket-mystery.

$ git clone [email protected]:dio/bracket-mystery.git
$ cd bracket-mystery
$ yarn build
....
TypeError: children.replace is not a function
(undefined) TypeError: children.replace is not a function
    at module.exports.__webpack_exports__.a (main:12393:19)
    at d (main:35913:498)
    at $a (main:35916:16)
    at a.b.render (main:35921:476)
    at a.b.read (main:35921:18)
    at Object.renderToString (main:35931:364)
    at serverEntry_render (main:52829:395)
Error: Failed to compile with errors.

Expected behaviour

Compiles OK

What should happen?

Compiles OK

Actual behavior

Failed with error:

TypeError: children.replace is not a function
(undefined) TypeError: children.replace is not a function
    at module.exports.__webpack_exports__.a (main:12393:19)
    at d (main:35913:498)
    at $a (main:35916:16)
    at a.b.render (main:35921:476)
    at a.b.read (main:35921:18)
    at Object.renderToString (main:35931:364)
    at serverEntry_render (main:52829:395)
Error: Failed to compile with errors.
    at compiler.run (/home/ubuntu/my-website/node_modules/@docusaurus/core/lib/webpack/utils.js:164:24)
    at finalCallback (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:254:12)
    at runWithDependencies.err (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:277:6)
    at done (/home/ubuntu/my-website/node_modules/neo-async/async.js:2931:13)
    at runCompilers (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:181:48)
    at err (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:188:7)
    at compiler.run (/home/ubuntu/my-website/node_modules/webpack/lib/MultiCompiler.js:270:7)
    at finalCallback (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:257:39)
    at hooks.done.callAsync.err (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:273:13)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ubuntu/my-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/home/ubuntu/my-website/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:271:21)
    at hooks.afterCompile.callAsync.err (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/ubuntu/my-website/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/ubuntu/my-website/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (/home/ubuntu/my-website/node_modules/webpack/lib/Compiler.js:678:31)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ChristianMurphy]

@dio in MDX 2 markdown can be interleaved #628
I suspect the issue may be coming from some of the inner content being parsed as markdown, and CodeBlock expecting pure text.