facebook / facebook/docusaurus

Enhancing a theme component can only be done once

Abierto
#4,530 4 comentarios 0 reacciones 0 asignados Ver en GitHub
bug difficulty: advanced
Lenguaje dominante
TypeScript
Estrellas
66.2k
Forks
10k
Merge medio
1 d 3 h
PR fusionados (30 d)
52

Descripción

## 🐛 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](https://github.com/facebook/docusaurus/blob/master/CONTRIBUTING.md#reporting-new-issues)?

Yes

## To Reproduce

1. Install the `@docusaurus/theme-live-codeblock` package
1. 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`
1. Receive errors in the console. This is caused by [this import](https://github.com/facebook/docusaurus/blob/5534affdb9c3557c33ab662487cea325cb1ac026/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js#L11) 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)

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.