Comments (19)
no, because peer dependencies are bad :P
from react-diagrams.
Thank you for such full answer
from react-diagrams.
@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?)
from react-diagrams.
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
from react-diagrams.
Seems it doesn't work.
To reproduce:
- open react-diagrams working folder, run
yarn link
- open test folder or any project wich imports storm-diagrams and run
yarn link "storm-react-diagrams"
- build the test project
from react-diagrams.
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: '_'
}
},
from react-diagrams.
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?
from react-diagrams.
But there is this code already in your webpack config
https://github.com/projectstorm/react-diagrams/blob/master/webpack.config.js#L15
from react-diagrams.
yes, but i assume you are importing this into your own project. So essentially:
- if you are going to use it in your own library, just yarn install storm-react-diagrams
- if you want to run the demos, just clone this repo and run yarn followed by webpack
- if you are ever going to yarn link storm-react-diagrams, your own webpack needs to have the externals directive.
- 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:
npm/npm#7742
from react-diagrams.
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.
from react-diagrams.
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)
from react-diagrams.
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:
your_app
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:
your_app
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.
from react-diagrams.
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:
- cd workingProject/node_modules/react && yarn link
- cd react-diagrams && yarn link react
It works for me, now I can develop with the linked library. Finally ^_^
from react-diagrams.
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 :)
from react-diagrams.
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
from react-diagrams.
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.
from react-diagrams.
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.
from react-diagrams.
Wouldn't declaring react as a peerDependency
in the lib solve this issue?
from react-diagrams.
but also because this issue has since been solved?
from react-diagrams.
Related Issues (20)
- custom code
- [Bug] Right angled links are diagonal if the points are added after the link is created
- 50 Errors in build HOT 2
- BezierCurve
- Tutorial not working HOT 1
- Deserialization not working HOT 2
- Demos should be refactored to be consistent with modern react standards and styles HOT 2
- I can't see the any nodes. HOT 1
- Is there a way with smart routing to ensure that the link line is never going through the node?
- Deregister Listener when links are created
- DragNewLinkState bug when pressing down with another mouse button while dragging.
- Does storm-react-diagrams support nonce attribute for CSP?
- Node EventListeners don't work when setting a state from component
- can't find createEngine export HOT 1
- Adding NodeModel to NodeLayer set itself as its parent, but NodeModel's parent must be a Diagram
- Module '"@projectstorm/react-diagrams"' has no exported member 'AbstractReactFactory'.
- Intermittent bug in dragNewLink with allowLooseLinks = false HOT 2
- Bug: running `diagrams-demo-project` error `TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactNode'. Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.`
- Deserialization isn't working properly HOT 1
- got an error in gallary demo: diagrams-demo-gallery HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-diagrams.