facebook / facebook/docusaurus

Enhancing a theme component can only be done once

Đang mở
#4,530 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug difficulty: advanced
Ngôn ngữ chính
TypeScript
Star
66.2k
Fork
10k
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
52

Mô tả

## 🐛 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)

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.