Child getting loaded as empty module in browser when made react as external module in child MFE

[ppiyush13]

Hi Zack,
Thank you very much for creating such awesome plugin to solve one of the common issue with MFE. I was evaluating this plugin and encountered this issue.
I registered react, react-dom and styled-components as external library in MFE webpack configs. While doing so, MFE gets loaded as empty module in parent application at runtime. If I remove external option, it is working as expected. MFE is getting loaded in parent.

Am I doing something incorrect. Is external options yet not supported ?

[ScriptedAlchemy]

You mean they are externals? In the webpack config like {externals:{react:”react”}}

So likely why this is happening. Module ids are changed so react no Longer is known as react, it’s hashed

I’ve been meaning to add an don’t transform option to avoid things like this.

I’ll work on it, simple change.

Thank you so much for the interest in the project, it’s still got some rough edges as you see. These are all solvable and I’m working hard on a major update to the mechanics. Making it part of the webpack runtime rather than clunky functions tacked on.

I’ll tag you in the PR, also feel free to PR the issue into my demo folder so I can make sure things keep working. Or spin up an example repo and I’ll develop against your use case.

Again I appreciate the support and interest

[ppiyush13]

Thanks Zack,

Yeah I meant webpack config like {externals:{react:”react”}}

I have created the example repo to reproduce this issue .
https://github.com/ppiyush13/webpack-external-import-example-external-deps

Feel free to add the content into the demo folder. Instructions for installing project are specified in readme.md.

[ScriptedAlchemy]

Thanks I’ll check this out. Also might be worth taking a look at V2 major rewrite #63

I’ll test it against your repo and put it up as next thing to work on

[ScriptedAlchemy]

Have not forgotten about this, had to handle tree-shaking support and production mode eager execution issues. I'll be addressing this soon as I've gotten tree-shakes stable for production use

[mathan78]

Not sure this is related, but using v2 and having externals in webpack.config fails at line 83 for chunkSplitting.js. Seems like module.request is expecting a string (there is a match) but mine is an object: { commonjs: 'react', commonjs2: 'react', amd: 'React', root: 'React' }. For now I just stuck in a typeof string, and it seems to work.

Anyway I agree with ppiyush13. This is an awesome plugin! I had to do some tweaking to get the import working with create-react-app. (Mainly using customize-cra and toying around with the config.) I am happy to write up some text on how I got it working with CRA.

[ScriptedAlchemy]

please do, if there's anything you want to pr on the project - feel free
I am aware that externals might not be working - ill be looking into it this week.

the plugin might get a big rewrite and move into the webpack core. Track the progress here webpack/webpack#10352

[ScriptedAlchemy]

Working on this now

[ScriptedAlchemy]

okay @ppiyush13 Working on your repo - its using v1 so ive updated it to work with v2 - i see youre using my componentDidMount example - which is fine, but in v2 require.interleaved returns the module as a promise. For react stuff, use ExternalComponent -
__webpack_require__.interleaved('app1/App1')

Now that the demo you send works with v2, ill look at externals

[ScriptedAlchemy]

@ppiyush13 here you go.

https://drive.google.com/file/d/1HcRRJOS3YfwXpPDJ4f1aUcgpMmgCtnnd/view?usp=sharing

PR: #115

[ScriptedAlchemy]

on npm as webpack-external-import@next