Syntax Errors

[ccorcos]

This is all I have:

import React from "react";
import ReactDOM from "react-dom";
import Playground from "component-playground";
import R from 'ramda'
import flyd from 'flyd'
import './index.css';

const boilerplate = `
class App extends React.Component {
  render() {
    return (
      <p>Hello World</p>
    )
  }
}

ReactDOM.render(<App/>, mountNode)
`

class Index extends React.Component {
  render() {
    return (
      <Playground
        codeText={boilerplate}
        scope={{React, ReactDOM, R, flyd}}
      />
    );
  }
};

ReactDOM.render(<Index/>, document.getElementById('root'));

And I keep getting these syntax issues:

SyntaxError: unknown: Unexpected token (20:0) 18 | } 19 | > 20 | ReactDOM.render(<App/>, mountNode) | ^ 21 | 22 | ); 23 | }

I'm not sure how to get this going...

[ccorcos]

FYI, all I'm trying to make is a simple application where the code is encoded in the url so I can create an iframe easily

[mziemer21]

I get the same error running the demo with the es6 class/ReactDOM example from the docs.

preview.jsx:113 SyntaxError: unknown: Unexpected token (19:0)
  17 | }
  18 | 
> 19 | ReactDOM.render(<ComponentExample/>, document.getElementById("content"));
     | ^
  20 | 
  21 |               );
  22 |             }

My scope in app.jsx looks like this

scope={{ReactDOM, React, Button}}

[paulathevalley]

@ccorcos Everything looks correct aside from a missing noRender={false} prop.

  <Playground
     codeText={boilerplate}
     scope={{React, ReactDOM, R, flyd}}
     noRender={false}
  />

It will allow you to use your own React.render method. See slightly more information here: https://github.com/FormidableLabs/component-playground#norender

@mziemer21 I am not sure what your usage looks like exactly, but when you are using your own React.render method (with noRender={false}), you should still use mountNode in place of document.getElementById("ID") in the example code you pass to the codeText prop. See @ccorcos’s boilerplate example above!

[dandelany]

It would be great if the docs could be improved around this point... I just ran into the same issue by following the "getting started" and docs and was confused for quite awhile until finding this ticket. In particular:

• The "getting started" page requires "raw!./examples/component.example" but doesn't explain what's in this file
• The first thing on on https://formidable.com/open-source/component-playground/docs/ says "codeText takes a string of JSX markup as its value" but then provides a Javascript class instead.
• But in ^ this part nothing is mentioned about noRender prop being necessary in one case but not the other etc.
• The docs for noRender strongly imply that it defaults to false but in fact defaults to true
• Nothing in docs mentions passing ReactDOM in scope if noRender is true

This is a super cool library but I imagine this must be an annoying barrier to entry for a lot of people trying to get started with it... I'll try to submit a PR later this week that improves docs here if I have time.