React-diagrams: Import error after build

[gen4sp]

I've got an error while importing brand new built library.
It completely ok with importing your git version.
But I got an error after importing a library just right after built with webpack command. Even if no any single change.

Uncaught (in promise) 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 (invariant.js:38)
    at Object.addComponentAsRefTo (ReactOwner.js:68)
    at attachRef (ReactRef.js:23)
    at Object.ReactRef.attachRefs (ReactRef.js:42)
    at ReactDOMComponent.attachRefs (ReactReconciler.js:23)
    at CallbackQueue.notifyAll (CallbackQueue.js:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
    at ReactReconcileTransaction.closeAll (Transaction.js:206)
    at ReactReconcileTransaction.perform (Transaction.js:153)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:140)

Do you have any idea what could be wrong?

[dylanvorster]

yes, you are loading multiple copies of react. Download the "test.zip" file here: https://github.com/projectstorm/react-diagrams/releases and that should show you how to get up and running. This example uses webpack to show you how to get it up and running

[gen4sp]

Seems it doesn't work.
To reproduce:
1) open react-diagrams working folder, run yarn link
2) open test folder or any project wich imports storm-diagrams and run yarn link "storm-react-diagrams"
3) build the test project

[dylanvorster]

so when you yarn link, the node_modules are not flattened. That means that there is a react folder in both the react-diagrams project as well as your own project, and if those versions are different or they are different paths, react will be included twice.

aka yarn link = symlink which means you have 2 copies of react.

To fix this, add this to your webpack config:

externals: {
            "react": 'react',
            "lodash": {
                commonjs: 'lodash',
                commonjs2: 'lodash',
                amd: '_',
                root: '_'
            }
        },

[dylanvorster]

this will force react to always only load the react that is in the root of your project, and not the react inside the symlink as well, does this make sense?

[gen4sp]

But there is this code already in your webpack config
https://github.com/projectstorm/react-diagrams/blob/master/webpack.config.js#L15

[dylanvorster]

yes, but i assume you are importing this into your own project. So essentially:

1) if you are going to use it in your own library, just yarn install storm-react-diagrams
2) if you want to run the demos, just clone this repo and run yarn followed by webpack
3) if you are ever going to yarn link storm-react-diagrams, your own webpack needs to have the externals directive.
4) if you want to test the test2.zip, simply run yarn followed by webpack.

So why are you yarn linking in the first place is what I'm asking, there should be no need to yarn link, unless you want to locally develop the library itself, in which case you will need the 'externals' in your own config. This problem is not specific to storm-react-diagrams, its a problem with your development environment / webpack setup.

To see more about why you are getting this error, please see:
https://github.com/npm/npm/issues/7742

[gen4sp]

Thank you for such full answer

[gen4sp]

It's weird (
I want to link it because of it much more comfortable to test while coding.
My project is not a widget but react-based SPA.

Your library doesn't contain a React, right? As far as it is excluded in externals
So it should work.
And I don't get why it works if I use remote version, and don't if I use a linked one. It doesn't contain react.

[gen4sp]

If I try to use link with test2 i got this =/

Uncaught TypeError: this.props.node.getInPorts is not a function
    at DefaultNodeWidget.render (dist.js:12134)
    at dist.js:16476
    at measureLifeCyclePerf (dist.js:15755)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (dist.js:16475)
    at ReactCompositeComponentWrapper._renderValidatedComponent (dist.js:16502)
    at ReactCompositeComponentWrapper.performInitialMount (dist.js:16042)
    at ReactCompositeComponentWrapper.mountComponent (dist.js:15938)
    at Object.mountComponent (dist.js:3178)
    at ReactDOMComponent.mountChildren (dist.js:20421)
    at ReactDOMComponent._createInitialChildren (dist.js:17402)

[dylanvorster]

Your library doesn't contain a React, right? As far as it is excluded in externals
So it should work.
And I don't get why it works if I use remote version, and don't if I use a linked one. It doesn't contain react.

The best way i can explain this is:

    node_modules
        react  <------------- A
        storm-react-diagrams [SYM LINK]
            node_modules
                react  <------------- B (another react because you linked it)

when webpack does an include it will see the require('react') / import "react" inside my minified bundle and will then look for it at "B" because you also now have a node_modules folder there.
When you yarn add storm-react diagrams you get this:

    node_modules
        react  <------------- A (only one react)
        storm-react-diagrams

Which is why you don't need the 'external' command in the above structure.

If I try to use link with test2 i got this =/

test2 was done quite a while ago, I wanted you to see this more for how to setup a project that uses this library with webpack. The error you are getting here is now a runtime error, so unless you show me your code, I cannot help you with this unfortunately.

[gen4sp]

Yes, thanks again for the explanation, but I got the problem, but wondering about a solution.
So, after few hours of working around ended up with this:
1) cd workingProject/node_modules/react && yarn link
2) cd react-diagrams && yarn link react
It works for me, now I can develop with the linked library. Finally ^_^

[dylanvorster]

yeah that would work as well because the react is now shared across both directories. But next time, you should just add the externals to YOUR webpack config, and then you won't have this issue :)

[dylanvorster]

oh wait, sorry i think i messed this up actually lol what ive been meaning to say the whole time was https://webpack.js.org/configuration/resolve/#resolve-alias

[gen4sp]

I did, but it didn't work out for me.
Also, I've tried the solution with resolve:alias:react. Didn't work out either. In some reason.

[dylanvorster]

sorry for the confusion this whole time, the problem as i explained it was the same, its just that ive been telling you to use the wrong directive to solve it.

[m4rcelofs]

Wouldn't declaring react as a peerDependency in the lib solve this issue?

[dylanvorster]

no, because peer dependencies are bad :P

[dylanvorster]

but also because this issue has since been solved?

[danielg2002]

@dylanvorster hi, I'm trying use babel-plugin-lodash to reduce the size of lodash chunk in my project.
I can't because react-diagrams embedded the whole package in distribution build...
I'm using lodash v 4.17.4.

How can I resolve this scenario? (you says peer dependencies are bad, why?)