In order to make archetype component
work with electrode explorer
, we decided to add demo
folder back and keep everything inside the same with original.
Instead of getting component from src
, we use demo.jsx
from demo in demo-app
directly.
--- demo
--- examples
--- [component].example
--- demo.css
--- demo.jsx
import OssComponentDemo from "../../../../packages/oss-component/demo/demo";
Two places
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
at invariant (main.bundle.dev.js:226)
at Object.addComponentAsRefTo (main.bundle.dev.js:122260)
at attachRef (main.bundle.dev.js:122526)
at Object.ReactRef.attachRefs (main.bundle.dev.js:122545)
at ReactDOMComponent.attachRefs (main.bundle.dev.js:8310)
at CallbackQueue.notifyAll (main.bundle.dev.js:33772)
at ReactReconcileTransaction.close (main.bundle.dev.js:122400)
at ReactReconcileTransaction.closeAll (main.bundle.dev.js:13509)
at ReactReconcileTransaction.perform (main.bundle.dev.js:13456)
at batchedMountComponentIntoNode (main.bundle.dev.js:34677)
The above issue is caused by Invalid Refs or Multiple copies of React. Since we do not have any Refs
, the problem should be having multiple copies of React, see the structure below:
npm ls react
demo-app@0.0.1 /Users/s0d00px/test-test/demo-app
└─┬ electrode-react-webapp@1.7.0
└── react@15.6.1
oss-component@1.0.0 /Users/s0d00px/test-test/packages/oss-component
└─┬ electrode-archetype-react-component-dev@3.0.3
└── react@15.6.1
Since we are adding pacakge/[component]
as an webpack resolve alias in demo-app
, when we are trying to run the app, it somehomw have two copies of react by this structure. The solution proposed here is to move react
and react-dom
one level up at lerna structure packge.json
. And remove the two react
dependencies from demo-app
and packages/[component]
node_modules.
Another potential solution is to set react
as external in webpack and import react
form scripts. (Not sure it is a good solution, needs discussions).
After re-run the app, you shall see the component code & its preview.
--- demo-app
--- archetype
--- config
--- src
--- client
--- actions
--- components
--- reducers
--- styles
--- server
--- test
--- packages/[component]
--- demo
--- examples
--- [component].example
--- demo.css
--- demo.jsx
--- src
--- components
--- lang
--- styles
--- index.js
--- test