Insert function is not ran when rendering a React app within a Web Component #785
Description
- Operating System: MacOs 10.14.6
- Node Version: 12.18.3
- Yarn Version: 2.4.2
- webpack Version: 5.36.0
- mini-css-extract-plugin Version: 2.1.0
Expected Behavior
Overriding the insert function within the webpack.config.js executes the function when rendering the application within a Web Component.
Expected DOM structure:
...
<body>
<div>
<custom-web-component>
#shadow-root (open)
<--- the link element below does not get injected when the insert function is not ran --->
<link rel="stylesheet" type="text/css" href="App.[contenthash].css">
<div id="react-root" style="height: 100%; width: 100%;">
<div id="App">
<h1 class="someStyle_2EDy6dB5bnNpxmLVHIGUpk">This should be red</h1>
<p>This should be green</p>
</div>
</div>
</custom-web-component>
</div>
</body>
...
Actual Behavior
The insert function is never ran causing the styles to not be included within the Web Component
Actual DOM structure is missing the <link> element that the insert function should be inserting.
Code
https://github.com/poisonWinslow/minicssextractplugin-react-web-component-repo