seek-oss / playroom

Design with JSX, powered by your own component library.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

RenderCode: Nothing was returned from render

marchamm opened this issue · comments

Overview

When typing in the editor <Button>Hello</Button> everything works fine. But when the component name is incomplete or not spelled correctly, eg: <Butto, < or <Buton>Hello</Button> I get an error in the frame and the console:
"RenderCode(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

Issue

Complete name Incomplete name
image image

Setup

I've installed Playroom in a fresh Create React App, created a simple component and have the following configuration to re-create the issue:

playroom.config.js

module.exports = {
  components: './src/components',
  outputPath: './dist/playroom',
};

src/components/index.js

import React from 'react';

const Button = ({ children }) => <button>{children}</button>;

export { Button };

Here is a link to the Repo: https://github.com/marchamm/cra-playroom


I'm not quite sure what I'm doing wrong, if it's related to CRA or Playroom, or if I'm missing something. So I would really appreciate some guidance and help with troubleshooting by some kind souls.

Note: Thanks for an amazing tool and making it open source 🙏


Edit: Seems related to debajyoti-thetaonelab/the-material-ex-ts#1 and #59 . Happy to close this issue if it is related to webpack config and not Playroom.