Example only works in examples subfolder, not in new project
jedahan opened this issue · comments
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:
> creature@1.0.0 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! creature@1.0.0 run: `node run.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the creature@1.0.0 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)
@iamdustan any idea? I am not clear about the peer deps things related to devtools.
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)
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?
@dandrei the JSX transform transforms lowercased JSXIdentifiers
to strings. So that becomes React.createElement('box', props)
Thanks @iamdustan. My IDE complained about it so I thought I did something wrong, but the code works fine.