Enhancing a theme component can only be done once

[kamsar]

🐛 Bug Report

If more than one plugin enhances a theme component (https://docusaurus.io/docs/using-themes/#for-plugin-authors), such as docusaurus-theme-live-codeblock, subsequent enhancers past the first will receive undefined for the imported component to enhance from @theme-init

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Install the @docusaurus/theme-live-codeblock package
2. Activate it twice in docusaurus.config.js (to simulate more than one plugin enhancing CodeBlock):

 themes: [
  ["@docusaurus/theme-live-codeblock", { id: "2" }],
  ["@docusaurus/theme-live-codeblock", { id: "1" }]
],

1. docusaurus start
2. Receive errors in the console. This is caused by this import returning undefined for the second theme definition:

 index.js?a908:1 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `WrappedComponent`.
  at WrappedComponent (webpack-internal:///./node_modules/@docusaurus/theme-live-codeblock/src/theme/CodeBlock/index.js:13:77)
  at pre (webpack-internal:///../node_modules/@docusaurus/theme-classic/lib-next/theme/MDXComponents/index.js:12:598)
  at MDXCreateElement (webpack-internal:///../node_modules/@mdx-js/react/dist/esm.js:153:30)
  at wrapper (webpack-internal:///../node_modules/@mdx-js/react/dist/esm.js:148:25)
  at MDXCreateElement (webpack-internal:///../node_modules/@mdx-js/react/dist/esm.js:153:30)
  at MDXContent (webpack-internal:///./docs/optimize/dev/react/getting-started.mdx:12:1329)
  <snip>

Expected behavior

You can have more than one theme enhancing a given component (i.e. the second theme instance would enhance the component enhanced by the first instance).

Actual Behavior

Importing the component after one enhancement gives undefined.

Your Environment

• Docusaurus version used: 2.0.0-alpha.72
• CodeSandbox + node 14, windows 10 + node 14

Reproducible Demo

CodeSandbox

[slorber]

Yes, this is a limitation of current theming system.

I'm not sure how to solve this problem, but agree it could be nice to be able to enhance a component multiple times in a row. For now the best option is to add all your enhancement logic in a single wrapper, which may lead to copying some existing enhancers code and maintaining it over time.

Was wondering, what's your usecase for this? It does not feel like a very common need

[kamsar]

The use case is that I wanted to use both @docusaurus/theme-live-codeblock and also another custom plugin that ingests code examples from a separate repository of patterns similar to https://github.com/saucelabs/docusaurus-theme-github-codeblock - both need to extend the CodeBlock component.

For now I disabled the live codeblock as I can get along without it.

[slorber]

One possibility is to create a comp like src/comps/MyCodeBlock instead of src/theme/LiveCodeBlock.

Then you could swizzle theme/MDXComponents and make sure markdown code blocks use your component instead of the theme component src/theme/LiveCodeBlock

[kushagra1811]

Hi @slorber , I am facing the same issue . I am using two themes @docusaurus/theme-live-codeblock and @saucelabs/theme-github-codeblock. Although I understand that why onle one theme is used at the runtime and second is overriden. But not able find the solution for it.
Can you help me with this issue ?

One possibility is to create a comp like src/comps/MyCodeBlock instead of src/theme/LiveCodeBlock.

Then you could swizzle theme/MDXComponents and make sure markdown code blocks use your component instead of the theme component src/theme/LiveCodeBlock