-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
My screen getting blank when i use mdx live editor. #5555
Comments
Could you please provide reproducible code or video? For example, I don't see an error if I delete code from the section on docs website. |
I'm having the same or similar issue. I tried following the instructions at https://docusaurus.io/docs/markdown-features/code-blocks#interactive-code-editor to add a live code editor and when I add the docusaurus.config.js:
my package.json:
|
@ChristopherHButler I need reproducible repo, could you provide it? |
@lex111 sure thing. Here is my repo: https://github.com/ChristopherHButler/docs. I do not have my docs in the Let me know if you need anything else |
@ChristopherHButler thanks, but in your case, the problem with React version mismatch (you use v17, but the latest minor version react-live 2.3.0 rewritten on hooks uses v16). yarn can resolve this automatically, but npm you use doesn't. A workaround would be to downgrade React to v16/run app via yarn instead of npm/add webpack alias. But it would be better if we just use the previous version react-live 2.2.0. I created PR for this #5556. |
Thanks @lex111 I'll downgrade for now and maybe keep an eye out for that PR. |
@lex111 this my video , docusaurus.config.js const lightCodeTheme = require("prism-react-renderer/themes/github");
const darkCodeTheme = require("prism-react-renderer/themes/dracula");
/** @type {import('@docusaurus/types').DocusaurusConfig} */
module.exports = {
title: "fiqryq",
tagline: "Membanteng",
url: "https://fiqryq.github.io",
baseUrl: "/",
onBrokenLinks: "throw",
onBrokenMarkdownLinks: "warn",
favicon: "/img/favicon.ico",
organizationName: "fiqryq",
projectName: "porfolio",
themes: ["@docusaurus/theme-live-codeblock"],
themeConfig: {
navbar: {
title: "Hi there 👋",
logo: {
alt: "My Site Logo",
src: "img/icon.svg",
},
items: [
{ to: "/", label: "Blog", position: "left" },
{
type: "doc",
docId: "index",
position: "left",
label: "About me",
},
{
href: "https://github.com/fiqryq",
label: "GitHub",
position: "right",
},
],
},
footer: {
style: "dark",
links: [
{
title: "Support me",
items: [
{
label: "Saweria",
href: "https://saweria.co/fiqryq",
},
],
},
{
title: "Social Media",
items: [
{
label: "Twitter",
href: "https://twitter.com/fiqryq",
},
{
label: "Instagam",
href: "https://instagram.com/fiqryq",
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Fiqry choerudin.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
},
presets: [
[
"@docusaurus/preset-classic",
{
docs: {
sidebarPath: require.resolve("./sidebars.js"),
// Please change this to your repo.
// editUrl:
// "https://github.com/facebook/docusaurus/edit/master/website/",
},
blog: {
showReadingTime: true,
routeBasePath: "/",
// Please change this to your repo.
// editUrl:
// "https://github.com/facebook/docusaurus/edit/master/website/blog/",
},
theme: {
customCss: require.resolve("./src/css/custom.css"),
},
},
],
],
}; package.json {
"name": "portfolio",
"version": "0.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@docusaurus/core": "^2.0.0-beta.6",
"@docusaurus/preset-classic": "^2.0.0-beta.6",
"@docusaurus/theme-live-codeblock": "^2.0.0-beta.6",
"@mdx-js/react": "^1.6.21",
"@svgr/webpack": "^5.5.0",
"clsx": "^1.1.1",
"file-loader": "^6.2.0",
"prism-react-renderer": "^1.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"url-loader": "^4.1.1"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
|
@fiqryq your video is not available, could you provide reproducible repo with broken live code block? |
sorry my bad i set private video on my youtube , here my video : Screen.Recording.2021-09-12.at.09.20.22.mp4 |
I was discussing with someone on Discord about this as well, it's specific to the case where an invalid React child (e.g. an object like |
The bug is reproduced on react-live playground https://react-live.netlify.app/, so the issue related with this dependency. |
Hey Merged #5556 so please test and let us know if canary doesn't fix the problems |
🐛 Bug Report
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
I try to use MDX using livecodeblock , everything is okay until I try to delete all code on the live editor and when i press delete one more time my screen getting blank and my console give me this code : Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Have you read the Contributing Guidelines on issues?
Yes
Expected behavior
i can delete my code on the live editor.
Actual behavior
console code : Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Your environment
Reproducible demo
Use https://new.docusaurus.io to create a CodeSandbox reproducible demo of the bug.
(Paste the link to an example repo, including a
docusaurus.config.js
, and exact instructions to reproduce the issue.)The text was updated successfully, but these errors were encountered: