'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);

This is the error I get: enter image description here

If I add a breakpoint inside the Context.js file, I can see the problem: enter image description here

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