Thanks...!!! Can't believe this is 3 years old Video...!! I have a very broad experience in building large scale backend system and worked on many systems where lot of functionality is come as a PlugIn modules. Systems load them dynamically from DLL or JAR files. Recently I have been looking around front end scene and was looking for loading truly dynamic components in react . Google didn't help me much and there is not too much info out there. Some people suggested some weird solution which was not clean at all. The reason may be this is not common use case for many of the people.
Your video is impressive, even though it's dated from 4 years ago. What would be the best approach to achieve this nowadays? Do you have an updated video about it? Thanks
Thanks for the tutorial. I learnt a lot :) How to export the styles of the component? I see you have used inline styles. Do you have any example to dynamically import the components and its styles?
Hi Jack and thanks for this video! I am currently developing something very similar at work but I started by forking react-scripts. Now that I see your setup, my solution seems a bit overkill. I would like to move to rollup but I have some questions: - Is rollup able to generate a manifest.json file listing the output bundles (with hash in the file name)? - Is rollup able to deal with scss? Thanks in advance and keep up with this kind of videos. I definitively subscribed! Take care
I’m not sure about either of those with rollup. Haven’t tested either. But I’m guessing it works with scss. Have you looked at federated modules with webpack 5?
4 ปีที่แล้ว
@@jherr I watched your video but did not tried it yet...
I'm trying to archive something like but but it only works fine when I'm note using react hooks. If I have a simple component only with JSX tags everything works as expected. As soon as I add a simple state, it starts to complain about: Cannot read properties of null (reading 'useState') even though window.React is available in the host app. :( Any tips?
You'd have to eject and retool the Webpack config.js, but yeah. For this kind of thing I'm now thinking that Module Federation with Webpack 5 would be the way to go to bring the Image and Post components into the app. That being said, CRA doesn't yet support Webpack 5, so I'd probably end up manually doing the Webpacking of both the host app and the components.
Thanks...!!! Can't believe this is 3 years old Video...!! I have a very broad experience in building large scale backend system and worked on many systems where lot of functionality is come as a PlugIn modules. Systems load them dynamically from DLL or JAR files. Recently I have been looking around front end scene and was looking for loading truly dynamic components in react . Google didn't help me much and there is not too much info out there. Some people suggested some weird solution which was not clean at all. The reason may be this is not common use case for many of the people.
Wow this is amazing
Your video is impressive, even though it's dated from 4 years ago. What would be the best approach to achieve this nowadays? Do you have an updated video about it? Thanks
Thanks for the tutorial. I learnt a lot :) How to export the styles of the component? I see you have used inline styles. Do you have any example to dynamically import the components and its styles?
Thanks. I loved it.
Hi Jack and thanks for this video!
I am currently developing something very similar at work but I started by forking react-scripts. Now that I see your setup, my solution seems a bit overkill.
I would like to move to rollup but I have some questions:
- Is rollup able to generate a manifest.json file listing the output bundles (with hash in the file name)?
- Is rollup able to deal with scss?
Thanks in advance and keep up with this kind of videos. I definitively subscribed!
Take care
I’m not sure about either of those with rollup. Haven’t tested either. But I’m guessing it works with scss. Have you looked at federated modules with webpack 5?
@@jherr I watched your video but did not tried it yet...
Smartly doing sir
I'm trying to archive something like but but it only works fine when I'm note using react hooks.
If I have a simple component only with JSX tags everything works as expected. As soon as I add a simple state, it starts to complain about:
Cannot read properties of null (reading 'useState') even though window.React is available in the host app. :(
Any tips?
Is it possible to do the same in CRA(webpack based)?
You'd have to eject and retool the Webpack config.js, but yeah. For this kind of thing I'm now thinking that Module Federation with Webpack 5 would be the way to go to bring the Image and Post components into the app. That being said, CRA doesn't yet support Webpack 5, so I'd probably end up manually doing the Webpacking of both the host app and the components.
Is it possible to do with Vite?
I think so... Definitely something worth looking into.
Have you tried with vite?
@@jordanrigo7662 Wow, this is an old video, the lighting is so edgy. :) I'll probably retire this video and I will be doing an ESM/Vite video soon.