[v2, classic]: Rendering CodeBlock inside a table fails with a specific content/children

[dio]

🐛 Bug Report

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

In 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.

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

Expected behavior

It should compile.

Actual Behavior

Got the following error:

✔ 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.

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)

Reproducible Demo

Repo: https://github.com/dio/bracket-mystery

[lex111]

@dio hi, it looks like an MDX bug. Since you are facing with this, could you please create an issue in the MDX repo?

Content was split into several parts (as an array eventually):

[dio]

@lex111 sure. How do you get the above output? So I can present the issue better. Thanks!

[lex111]

You can test your MDX snippet here, although you will see that it renders without errors, but the internal content is split into several parts. For example, if you just use the code tag in a table cell, then this error is reproduced on the MDX Playground:

Apparently this is due to interleaving MDX in JSX issue as described here mdx-js/mdx#628
But this will be implemented in MDX v2, which, as I understand it, is not ready for public use. So I think we can fix this use case and concatenate the array into regular string, I suggested a corresponding fix in #3749.