Include local "modules" to react-app-rewired

timarney / react-app-rewired

Override create-react-app webpack configs without ejecting

MIT License

9.81k stars 425 forks source link

Include local "modules" to react-app-rewired #432

Closed surfer19 closed 4 years ago

surfer19 commented 4 years ago

hey, I have 3 projects(separate repositories): project-main: using react-app-rewired (typescript version) project-module1: different react repo (also ts) project-module2: different react repo (also ts) project-module1 and project-module2 are linked with yarn to project-main and creates bundle inside of main project with ts compiler.

Current solution:

What I want to achieve:

Basically I need to get rid of part where modules compiles themselves to main project and instead that connect them somehow to main repository compiler in real time. So whenever there will be local code change in folders project-module1 or project-module2, change will be automatically reflected on localhost. There is also idea connect project-main server to modules servers but I think it would be extremely complicated. What do you think please?

nickserv commented 4 years ago

Have you tried npm/yarn link? If I'm understanding your goal they should solve this.

cbourdage commented 4 years ago

@surfer19 Have you figured out a solution for the above? I'm currently looking at trying to find a way to achieve this same setup. So far I've tried:

removing the ModuleScopePlugin from config-override.js and using relative imports from project-main to project-module1
adding resolve.alias mappings for project-module1 to project-main config-override.js file

Any thoughts or suggestions around this would be awesome! I've even given some thought to trying out babel macros to preprocess project-module* and handle transpiling there but I fear that would lose out on HMR potentially and for my use-cases here I'd really love to keep that.

surfer19 commented 4 years ago

@cbourdage Well, you can go for yarn link solution but I don’t recommend it while it’s not easy maintainable dependency approach. Try to search for micro-front end approach, if it fits for you. You could wrap every module to web component and include it in runtime. Doesn’t matter if module is written in angular, react or whatever. Even more Easy check framework for that. https://single-spa.js.org/

surfer19 commented 4 years ago

Idea of this approach is to create completely separate modules that doesn’t share data between themself. Passing data down main-project->module is allowed.