Example only works in examples subfolder, not in new project

[jedahan]

If I copy the following code to the examples/ folder inside a git checkout of react-blessed (db718351aee3ab4f40a9f7b59c12270054ee5da3), and change 'react-blessed' to '../src' the following works fine. If I have it in a new project, I get this error:

> [email protected] run /Users/micro/src/creature
> node run.js

WARNING: the `ws` package must be installed to use `react-devtools`.
The above error occurred in the <Pid> component:
    in Pid (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
The above error occurred in the <Sync> component:
    in Sync (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
    at invariant (/Users/micro/src/creature/node_modules/react/cjs/react.development.js:88:15)
    at resolveDispatcher (/Users/micro/src/creature/node_modules/react/cjs/react.development.js:1436:28)
    at useState (/Users/micro/src/creature/node_modules/react/cjs/react.development.js:1461:20)
    at Pid (/Users/micro/src/creature/src/creature.jsx:22:25)
    at mountIndeterminateComponent (/Users/micro/src/creature/node_modules/react-reconciler/cjs/react-reconciler.development.js:6900:13)
    at beginWork (/Users/micro/src/creature/node_modules/react-reconciler/cjs/react-reconciler.development.js:7405:16)
    at performUnitOfWork (/Users/micro/src/creature/node_modules/react-reconciler/cjs/react-reconciler.development.js:10239:12)
    at workLoop (/Users/micro/src/creature/node_modules/react-reconciler/cjs/react-reconciler.development.js:10279:24)
    at renderRoot (/Users/micro/src/creature/node_modules/react-reconciler/cjs/react-reconciler.development.js:10365:7)
    at performWorkOnRoot (/Users/micro/src/creature/node_modules/react-reconciler/cjs/react-reconciler.development.js:11268:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] run: `node run.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] run script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Volumes/data/tmp/npm/cache/_logs/2019-03-02T18_39_56_336Z-debug.log

My package.json:

{
  "name": "creature",
  "version": "1.0.0",
  "description": "digital, peer-to-peer, creature",
  "main": "index.js",
  "scripts": {
    "run": "node run.js",
    "start": "ssb_appname=creature ssb-server start --logging.level=info",
    "heartbeat": "ssb_appname=creature node heartbeat.js",
    "beat": "ssb_appname=creature ssb-server publish --type heartbeat --bpm $(( 80+ ($RANDOM % 40) ))",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jedahan/creature.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jedahan/creature/issues"
  },
  "homepage": "https://github.com/jedahan/creature#readme",
  "dependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
    "@babel/plugin-transform-flow-strip-types": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "dat": "^13.11.5",
    "neo-blessed": "^0.2.0",
    "react": "^16.8.3",
    "react-blessed": "^0.5.0",
    "react-devtools-core": "^3.6.0",
    "react-reconciler": "^0.20.1",
    "ws": "^6.1.4"
  }
}

// creature.jsx in a new project, or examples/creature.jsx in this git repo
import React, { useState } from 'react'
import blessed from 'neo-blessed'
import { createBlessedRenderer } from 'react-blessed' // change to '../src' in git-checkout
const render = createBlessedRenderer(blessed)

const App = () => {
  return (
    <>
      <Pid />
      <Sync />
      <box label='creature'
           border={{type: 'line'}}
           left='60%'
           style={{border: {fg: 'red'} }} >
        {'creature box'}
      </box>
    </>
  )
}

const Pid = () => {
  const [pid, setPid] = useState(process.pid || 'no pid')
  return (
    <box label="pid"
         width='20%'
         border={{type: 'line'}}
         style={{border: {fg: 'cyan'}}} >
      {pid}
    </box>
  )
}

const Sync = () => {
  const [ syncing, setSyncing ] = useState(false)

  return (
    <box label="syncing"
         width='40%'
         left='20%'
         border={{type: 'line'}}
         style={{border: {fg: 'orange'}}} >

      {syncing ? 'syncing' : 'not syncing'}

      <button mouse border={{type: 'line'}} height={5} width={5} top={2} left={4} onPress={() => setSyncing(!syncing)}>+</button>
    </box>
  )
}

const screen = blessed.screen({
  autoPadding: true,
  smartCSR: true,
  title: 'creature test'
})

screen.key(['escape', 'q', 'C-c'], (ch, key) => {
  return process.exit(0)
})

render(<App/>, screen)

[Yomguithereal]

@iamdustan any idea? I am not clear about the peer deps things related to devtools.

[iamdustan]

I’m guessing something between React and React DevTools versions and/or local or global react-devtools being installed (e.g https://github.com/Yomguithereal/react-blessed/blob/master/package.json#L55)

[dandrei]

I see <box> is used a lot, but where is it imported? I tried to run the example code by just installing react-blessed, react, and blessed but there's no obvious place to get <box> from. Am I missing some magic?

[iamdustan]

@dandrei the JSX transform transforms lowercased JSXIdentifiers to strings. So that becomes React.createElement('box', props)

[dandrei]

Thanks @iamdustan. My IDE complained about it so I thought I did something wrong, but the code works fine.