Swizzling ReactLiveScope does not work #3466

arifszn · 2020-09-19T14:01:11Z

🐛 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

npm install --save @docusaurus/theme-live-codeblock
add the plugin to docusaurus.config.js
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

The text was updated successfully, but these errors were encountered:

slorber · 2020-09-23T11:26:18Z

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 · 2020-09-29T13:28:26Z

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 · 2020-09-29T14:48:50Z

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

slorber · 2020-09-29T15:01:53Z

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

michelpf · 2020-09-29T18:28:06Z

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 · 2020-09-29T18:36:14Z

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 · 2020-09-30T13:49:54Z

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 #3487

slorber · 2020-09-30T13:53:26Z

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 · 2020-09-30T14:07:11Z

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.

lex111 · 2020-11-10T17:16:50Z

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 · 2020-11-12T20:58:14Z

@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 · 2020-11-12T21:50:02Z

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

SeanGroff · 2020-11-12T21:56:14Z

@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 · 2020-11-12T22:19:02Z

@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 · 2020-11-17T06:59:25Z

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

arifszn added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Sep 19, 2020

arifszn mentioned this issue Sep 19, 2020

[v2] Add support for MDX scoped components in live preview #2152

Closed

slorber mentioned this issue Sep 30, 2020

[V2] Versioning Dropdown doesn't show "Next" version #3487

Closed

jugglingcats mentioned this issue Oct 13, 2020

Cannot import component from React lib into Markdown (docusaurus) ZachJW34/nx-plus#112

Closed

This comment has been minimized.

Sign in to view

lex111 removed the status: needs triage This issue has not been triaged by maintainers label Nov 10, 2020

lex111 closed this as completed Nov 17, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Swizzling ReactLiveScope does not work #3466

Swizzling ReactLiveScope does not work #3466

arifszn commented Sep 19, 2020 •

edited

Loading

slorber commented Sep 23, 2020

slorber commented Sep 29, 2020 •

edited

Loading

arifszn commented Sep 29, 2020

slorber commented Sep 29, 2020

michelpf commented Sep 29, 2020

arifszn commented Sep 29, 2020

slorber commented Sep 30, 2020 •

edited

Loading

slorber commented Sep 30, 2020

arifszn commented Sep 30, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

lex111 commented Nov 10, 2020

SeanGroff commented Nov 12, 2020

lex111 commented Nov 12, 2020 •

edited

Loading

SeanGroff commented Nov 12, 2020 •

edited

Loading

lex111 commented Nov 12, 2020 •

edited

Loading

lex111 commented Nov 17, 2020

Swizzling ReactLiveScope does not work #3466

Swizzling ReactLiveScope does not work #3466

Comments

arifszn commented Sep 19, 2020 • edited Loading

🐛 Bug Report

Have you read the Contributing Guidelines on issues?

To Reproduce

Expected behavior

Actual Behavior

Your Environment

Reproducible Demo

slorber commented Sep 23, 2020

slorber commented Sep 29, 2020 • edited Loading

arifszn commented Sep 29, 2020

slorber commented Sep 29, 2020

michelpf commented Sep 29, 2020

arifszn commented Sep 29, 2020

slorber commented Sep 30, 2020 • edited Loading

slorber commented Sep 30, 2020

arifszn commented Sep 30, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

lex111 commented Nov 10, 2020

SeanGroff commented Nov 12, 2020

lex111 commented Nov 12, 2020 • edited Loading

SeanGroff commented Nov 12, 2020 • edited Loading

lex111 commented Nov 12, 2020 • edited Loading

lex111 commented Nov 17, 2020

arifszn commented Sep 19, 2020 •

edited

Loading

slorber commented Sep 29, 2020 •

edited

Loading

slorber commented Sep 30, 2020 •

edited

Loading

lex111 commented Nov 12, 2020 •

edited

Loading

SeanGroff commented Nov 12, 2020 •

edited

Loading

lex111 commented Nov 12, 2020 •

edited

Loading