canonical
Bundle up the dist to avoid missing dependency issues
We've had some issues when trying to use yarn link where there were errors around multiple versions of React running and missing dependencies. After some investigation this appears to be related to the fact that this library doesn't bundle its dependencies like classnames and nanoid so they fail in projects that do not have those installed locally.
A fix, as discussed, was to bundle the project up with all dependencies and adding the current peers as externals so that they are not also bundled.
This was originally avoided because webpack didn't correctly tree-shake away exports that were not used. This appears to be resolved (although we should verify).
I am also running into this issue migrating the anbox-app project from using node-sass to DartScss. WIthout node-sass components with scss fail to build.
@squidsoup @huwshimi TBH I have no idea where to even start looking into this.
I even don't fully understand what the issue is, as I'm not using React components in a project where I need to deal with building it.
When react-components package is installed by yarn, all its dependencies (not dev-dependencies) should be installed as well, right? So project that uses React components should already have anything needed by it in the dependencies tree. So what is missing there? We need to build react components differently for the npm package?
And it was also mentioned that node-sass is required to be able to use React-components, is it a matter of webpack config? Should react-components build it's scss properly? Or should it leave building scss to project that includes it - regardless of them using node-sass or dart sass?
If we want Vanilla squad to look more into issues like this it feels like we need some handover. While I feel confident enough about adding or modifying components to the library, the build and packaging system is a mystery with the webpack, SCSS imported in JS, TypeScript...
@bartaz I'm not exactly sure how to resolve these issues, other than trying the suggestions from @hatched.
For the sass, we could possibly try and build the scss to css and still have them imported in the components, which would remove the node-sass dep for the package.
I'm definitely happy to have a call if you'd like to do a bit of handover. I'm sure @squidsoup would too. It'd probably be good to flesh out the hacking doc with the confusing parts.
@huwshimi @bartaz @hatched is there any update on this issue. Is there something that can be actioned here?
A workaround for the original issue around linking has been outlined in the readme but nothing else has been done towards the other issue.
I'm not sure if we have time to look into this this cycle. This investigation could be bundled up into the investigation of merging vanilla and react-components.