CODEWITHSUNDEEP
cyclejs
Suhas
Suhas

Reputation: 8458

"React is undefined" error in CycleJs app

I am experimenting with cycle.js and webpack. I have got the following index.js file which almost a copy of what I found on cycle.js documentation.

import Cycle from '@cycle/core';
import {makeDOMDriver, hJSX} from '@cycle/dom';

function main(drivers) {
  return {
    DOM: drivers.DOM.select('input').events('click')
      .map(ev => ev.target.checked)
      .startWith(false)
      .map(toggled =>
        <div>
          <input type="checkbox" /> Toggle me
          <p>{toggled ? 'ON' : 'off'}</p>
        </div>
      )
  };
}

const drivers = {
  DOM: makeDOMDriver('#app')
};

Cycle.run(main, drivers);

And here is my index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cycle.js checkbox</title>
  </head>
  <body>
    <div id="app"></div> <!-- Our container -->

    <script src="./dist/bundle.js"></script>
  </body>
</html>

I am using webpack to generate bundle.js inside dist folder. When I run the app by opening index.html in chrome, I get following error in chrome console

cycle.js:51ReferenceError: React is not defined
    at index.js:10
    at tryCatcher (rx.all.js:63)
    at InnerObserver.next (rx.all.js:5598)
    at InnerObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762)
    at InnerObserver.tryCatcher (rx.all.js:63)
    at AutoDetachObserverPrototype.next (rx.all.js:11810)
    at AutoDetachObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762)
    at ConcatObserver.next (rx.all.js:3466)
    at ConcatObserver.Rx.internals.AbstractObserver.AbstractObserver.onNext (rx.all.js:1762)
    at ConcatObserver.tryCatcher (rx.all.js:63)

Not sure what I am doing wrong in this seemingly simple first step in a cycle.js app.

Upvotes: 0

Views: 72

Answers (1)

m59
m59

Reputation: 43775

You need to set the correct pragma for JSX, or the JSX will be transformed incorrectly.

You can add the correct pragma to the top of your .js file: 

/** @jsx hJSX */

Or put this in your babel configuration:

[ "transform-react-jsx", { "pragma": "hJSX" } ]

Relevant GitHub thread.

Upvotes: 1

Related Questions