'Preact and react-redux bug with dynamic loading
I'm working with preact, and loading a module dynamically within my code, using webpack code-splitting. If I load my core bundle using a script tag, everything works perfectly. If I load it dynamically like the code bellow, the bundle breaks:
const script = document.createElement('script');
script.src = 'bundle-location.js';
document.body.appendChild(script);
If I add a breakpoint inside the Context.js file, I can see the problem:

In the first case, if using the script tag, then react__WEBPACK_IMPORTED_MODULE_0__ actually contains preact. For some reason that's eluding me, if I load the same script dynamically, the preact object exists, but is missing all of its exports, including the 'default' export. It's important to note that if I disable code-splitting, then everything works properly.
This is my webpack configuration:
const config = {
mode: getMode(),
resolve: {
alias: {
react: 'preact/compat',
'react-dom': 'preact/compat',
},
extensions: ['.ts', '.tsx', '.js'],
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.svg$/,
exclude: /node_modules/,
use: [
'babel-loader',
{
loader: 'react-svg-loader',
query: {
svgo: {
pretty: true,
plugins: [
{
removeStyleElement: true,
},
{
removeViewBox: false,
},
],
},
},
}],
},
],
},
plugins: [
new webpack.DefinePlugin({
PLUGINS_PATH: JSON.stringify(getPluginsPath()),
}),
],
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, './src/dist/bundle/'),
filename: 'bundle.js',
chunkFilename: '[name].js',
publicPath: getPluginsPath(),
},
};
module.exports = config;
Would really appreciate any direction.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

