Docusaurus: Swizzling ReactLiveScope does not work

[arifszn]

🐛 Bug Report

I am having problem in swizzling the react-live scope. I have installed a fresh project with @docusaurus/theme-live-codeblock installed just to be sure but same error occurs.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. npm install --save @docusaurus/theme-live-codeblock
2. add the plugin to docusaurus.config.js
3. npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope

Expected behavior

swizzle the react-live scope and create a file src/theme/ReactLiveScope/index.js

Actual Behavior

Component "ReactLiveScope" doesn't exists. "ReactLiveScope" is swizzled instead of "ReactLiveScope". Error: Component ReactLiveScope not found.No component to swizzle

Your Environment

• Docusaurus version used: 2.0.0-alpha.64
• Environment name and version: Node.js v12.18.1, window's default cmd, PowerShell 7.0.3
• Operating system and version: Windows 10 Pro. Version: 2004

Reproducible Demo

[slorber]

Hi

Will be back from holidays on Monday 28.

Will check new issues when I'm back. Afaik we already have an issue where swizzling fails to override original comp. In the meantime give a try to patch-package

[slorber]

I wasn't able to reproduce

Wouldn't be surprised if it was a Windows related bug, unfortunately I don't have windows 😅

As a workaround you can just copy the folder node_modules/@docusaurus/theme-live-codeblock/src/theme/CodeBlock and put it in website/src/theme/CodeBlock, that's basically what the command does.

[arifszn]

Then you may close the issue. Thank you for the response.

[slorber]

Even if there's a valid workaround, I'd like to confirm if someone can reproduce this bug on Windows before closing ;)

[michelpf]

I have the same in MacOS:

docusaurus swizzle "@docusaurus/theme-live-codeblock" "ReactLiveScope"

Component "ReactLiveScope" doesn't exists. "ReactLiveScope" is swizzled instead of "ReactLiveScope".
Error: Component ReactLiveScope not found.No component to swizzle
    at swizzle (/Users/michel.fernandes/Google Drive/EY/Projetos/JS/beyondstyle-docs/node_modules/@docusaurus/core/lib/commands/swizzle.js:213:31)
    at /Users/michel.fernandes/Google Drive/EY/Projetos/JS/beyondstyle-docs/node_modules/@docusaurus/core/bin/docusaurus.js:73:5
    at Command.<anonymous> (/Users/michel.fernandes/Google Drive/EY/Projetos/JS/beyondstyle-docs/node_modules/@docusaurus/core/bin/docusaurus.js:113:25)
    at Command.listener (/Users/michel.fernandes/Google Drive/EY/Projetos/JS/beyondstyle-docs/node_modules/commander/index.js:370:29)
    at Command.emit (events.js:314:20)
    at Command.parseArgs (/Users/michel.fernandes/Google Drive/EY/Projetos/JS/beyondstyle-docs/node_modules/commander/index.js:892:12)
    at Command.parse (/Users/michel.fernandes/Google Drive/EY/Projetos/JS/beyondstyle-docs/node_modules/commander/index.js:642:21)
    at Object.<anonymous> (/Users/michel.fernandes/Google Drive/EY/Projetos/JS/beyondstyle-docs/node_modules/@docusaurus/core/bin/docusaurus.js:204:5)
    at Module._compile (internal/modules/cjs/loader.js:1075:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1096:10)
    at Module.load (internal/modules/cjs/loader.js:940:32)
    at Function.Module._load (internal/modules/cjs/loader.js:781:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] swizzle: `docusaurus swizzle "@docusaurus/theme-live-codeblock" "ReactLiveScope"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] swizzle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[arifszn]

If the scopes can be passed to the CodeBlock as a prop, I think it would be very helpful and most people would not need swizzling the component.

[slorber]

Does anyone has an open-source site repro on github to see if it's a problem on your site? As it works on my computer it's hard to debug this problem.

Edit: we might have one thanks to https://github.com/facebook/docusaurus/issues/3487

[slorber]

If the scopes can be passed to the CodeBlock as a prop, I think it would be very helpful and most people would not need swizzling the component.

@arifszn I don't understand what you mean by that, how would you pass the scopes to the CodeBlock exactly?

[arifszn]

If the scopes can be passed to the CodeBlock as a prop, I think it would be very helpful and most people would not need swizzling the component.

@arifszn I don't understand what you mean by that, how would you pass the scopes to the CodeBlock exactly?

It was a suggestion if it is possible. Haven't looked at the code actually. I used the original react live as i didn't know how to swizzle manually.

[dhitimedin]

I have a similar issue with swizzle
Component "SearchBar" doesn't exists. "SearchBar" is swizzled instead of "SearchBar".
Error: SearchBar is an internal component, and have a higher breaking change probability. If you want to swizzle it, use the "--danger" flag.

[arifszn]

I have a similar issue with swizzle
[Local Search] [INFO]: The following documentation versions were detected: English, next
Component "SearchBar" doesn't exists. "SearchBar" is swizzled instead of "SearchBar".
Error: SearchBar is an internal component, and have a higher breaking change probability. If you want to swizzle it, use the "--danger" flag.

The issue is different though and searchbar swizzle works. Run: npm run swizzle @docusaurus/theme-classic SearchBar --danger

[dhitimedin]

I have a similar issue with swizzle
[Local Search] [INFO]: The following documentation versions were detected: English, next
Component "SearchBar" doesn't exists. "SearchBar" is swizzled instead of "SearchBar".
Error: SearchBar is an internal component, and have a higher breaking change probability. If you want to swizzle it, use the "--danger" flag.

The issue is different though and searchbar swizzle works. Run: npm run swizzle @docusaurus/theme-classic SearchBar --danger

I am trying to get lunr search https://github.com/lelouch77/docusaurus-lunr-search . They prescribe npm run swizzle docusaurus-lunr-search SearchBar. Is the same as npm run swizzle @docusaurus/theme-classic SearchBar --danger ?

[arifszn]

I have a similar issue with swizzle
[Local Search] [INFO]: The following documentation versions were detected: English, next
Component "SearchBar" doesn't exists. "SearchBar" is swizzled instead of "SearchBar".
Error: SearchBar is an internal component, and have a higher breaking change probability. If you want to swizzle it, use the "--danger" flag.

The issue is different though and searchbar swizzle works. Run: npm run swizzle @docusaurus/theme-classic SearchBar --danger

I am trying to get lunr search https://github.com/lelouch77/docusaurus-lunr-search . They prescribe npm run swizzle docusaurus-lunr-search SearchBar. Is the same as npm run swizzle @docusaurus/theme-classic SearchBar --danger ?

In that case, run: npm run swizzle docusaurus-lunr-search SearchBar --danger

[dhitimedin]

I have a similar issue with swizzle
[Local Search] [INFO]: The following documentation versions were detected: English, next
Component "SearchBar" doesn't exists. "SearchBar" is swizzled instead of "SearchBar".
Error: SearchBar is an internal component, and have a higher breaking change probability. If you want to swizzle it, use the "--danger" flag.

The issue is different though and searchbar swizzle works. Run: npm run swizzle @docusaurus/theme-classic SearchBar --danger

I am trying to get lunr search https://github.com/lelouch77/docusaurus-lunr-search . They prescribe npm run swizzle docusaurus-lunr-search SearchBar. Is the same as npm run swizzle @docusaurus/theme-classic SearchBar --danger ?

In that case, run: npm run swizzle docusaurus-lunr-search SearchBar --danger

It gives the same issue:

% npm run swizzle docusaurus-lunr-search SearchBar --danger

[email protected] swizzle /docusaurus
docusaurus swizzle "docusaurus-lunr-search" "SearchBar"

Component "SearchBar" doesn't exists. "SearchBar" is swizzled instead of "SearchBar".
Error: SearchBar is an internal component, and have a higher breaking change probability. If you want to swizzle it, use the "--danger" flag.

[arifszn]

Sorry for the typo. The command should be npm run swizzle docusaurus-lunr-search SearchBar -- --danger

[dhitimedin]

Sorry for the typo. The command should be npm run swizzle docusaurus-lunr-search SearchBar -- --danger

Great it progressed but I am still stuck. Firstly it gave the following message on swizzle:

Component "SearchBar" doesn't exists. "SearchBar" is swizzled instead of "SearchBar".

Success! Copied docusaurus-lunr-search SearchBar to src/theme/SearchBar.

Then while doing a build it gives the following error message:

docusaurus-lunr-search:: Building search docs and lunr index file
docusaurus-lunr-search:: Start scanning documents in 4 threads
TypeError: Cannot read property 'properties' of null
at emitCurrent (

[arifszn]

Please refer to this issue or create a new issue in docusaurus-lunr-search.

[dhitimedin]

Please refer to this issue or create a new issue in docusaurus-lunr-search.

Sure! Thanks.

[lex111]

It seems our fault is that when we release new packages we do not mark them as latest version in npm.

Thus, if we execute npm install --save @docusaurus/theme-live-codeblock, then we get an obsolete (.39) version:

   "dependencies": {
     "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.39",
   }

Therefore, to get the actual version (in which ReactLiveScope will be available for swizzle), we need to use the next tag, respectively execute npm install --save @docusaurus/theme-live-codeblock@next.

@arifszn could you please install the next (.66) version of docusaurus/theme-live-codeblock and tell us if this solved the issue or not?

[SeanGroff]

@lex111 I noticed this as well. After installing @docusaurus/theme-live-codeblock@next I still get the same error reported in this issue. I'm on a Mac.

[lex111]

@SeanGroff this is strange, can you please provide steps to reproduce or even better demo repo?

[SeanGroff]

@lex111
Here's the repo you can clone and hopefully reproduce the problem.
Repo: https://github.com/SelectQuoteLabs/SQForm/tree/master/SQFormDocs

I'm currently using a Mac using Node v14.15.0

[lex111]

@SeanGroff thanks,

Please try two options:

• Run the command npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope -- --danger (please note that using double dash before arguments is required)

• If that didn't help, then try swizzling component via Yarn: yarn swizzle @docusaurus/theme-live-codeblock ReactLiveScope --danger

UPD: I know there is misleading output in the current version of swizzle command, but we fixed that in ##3725
In short, the issue is that ReactLiveScope component is not considered safe for swizzle, so you need to use the --danger flag, but this flag is passed differently depending on the package manager used (in npm, you need to specify double dash).

[lex111]

In order to reduce staled issues, I am closing this issue, but feel free to open it again if needed.