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" }]
   ],

3. docusaurus start

4. 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)

``` ## 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](https://codesandbox.io/s/ecstatic-black-f4421?file=/docusaurus.config.js:81-204)

[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