search

seek-oss / playroom

Design with JSX, powered by your own component library.
MIT License
4.45k stars 183 forks source link

RenderCode: Nothing was returned from render #210

Closed marchamm closed 3 years ago

marchamm commented 3 years ago

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 https://github.com/debajyoti-xyz/the-material-ex-ts/issues/1 and #59 . Happy to close this issue if it is related to webpack config and not Playroom.