Example of installing via webpack

[rafi]

Hi, great work! I'm using create-react-app, and I tried installing fcui2 but I got errors.
Can you include an example of using with npm/yarn, ES6 classes and webpack?

[lbxx1984]

THS.
Now, we can install fcui2 from npm, like: npm install fcui2.
Then, use fcui2 in es6/webpack project like: import {Button} from 'fcui2'
Import less, @import '~fcui2/src/css/main.less'
Best Wishes.

[rafi]

@lbxx1984 when trying to use with import {Button} from 'fcui2' and loading in browser, I'm getting this exception:

×
Element ref was specified as a string (container) but no owner was set.
You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
▼ 26 stack frames were expanded.
invariant
node_modules/fbjs/lib/invariant.js:42
coerceRef
node_modules/react-dom/cjs/react-dom.development.js:6736
reconcileSingleElement
node_modules/react-dom/cjs/react-dom.development.js:7532
reconcileChildFibers
node_modules/react-dom/cjs/react-dom.development.js:7635
reconcileChildrenAtExpirationTime
node_modules/react-dom/cjs/react-dom.development.js:7756
reconcileChildren
node_modules/react-dom/cjs/react-dom.development.js:7747
finishClassComponent
node_modules/react-dom/cjs/react-dom.development.js:7881
updateClassComponent
node_modules/react-dom/cjs/react-dom.development.js:7850
beginWork
node_modules/react-dom/cjs/react-dom.development.js:8225
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:10224
workLoop
node_modules/react-dom/cjs/react-dom.development.js:10288
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:542
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:581
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:438
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:10366
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:11014
performWork
node_modules/react-dom/cjs/react-dom.development.js:10967
requestWork
node_modules/react-dom/cjs/react-dom.development.js:10878
scheduleWorkImpl
node_modules/react-dom/cjs/react-dom.development.js:10732
scheduleWork
node_modules/react-dom/cjs/react-dom.development.js:10689
scheduleTopLevelUpdate
node_modules/react-dom/cjs/react-dom.development.js:11193
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:11231
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:15226
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:11102
renderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:15225
render
node_modules/react-dom/cjs/react-dom.development.js:15290
▲ 26 stack frames were expanded.
./src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
▼ 6 stack frames were expanded.
__webpack_require__
/Users/rafi/code/acme/webapp/webpack/bootstrap 2dcd94cf02452151090a:678
fn
/Users/rafi/code/acme/webapp/webpack/bootstrap 2dcd94cf02452151090a:88
0
http://localhost:3000/static/js/bundle.js:62202:18
__webpack_require__
/Users/rafi/code/acme/webapp/webpack/bootstrap 2dcd94cf02452151090a:678
./node_modules/ansi-regex/index.js.module.exports
/Users/rafi/code/acme/webapp/webpack/bootstrap 2dcd94cf02452151090a:724
(anonymous function)
http://localhost:3000/static/js/bundle.js:728:10
▲ 6 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

[lbxx1984]

It seems to be a compatibility problem.
Fcui2 is very old. We use react15.6.2 in project.
The upgrade is being carried out slowly.