Webpack 5. Error: TypeError: TypeError: Cannot read property 'data' of undefined

im in the process of updating all the module federation repos to the final v5

Ive run into issues with svelt-loader, but know very little about svelte…

This is the branch and specific project im trying to run this against: https://github.com/module-federation/module-federation-examples/blob/update-to-v5-stable/comprehensive-demo/app-04/webpack.config.js

[0] @comprehensive-demo/app-04: ERROR in ./src/App.svelte
[0] @comprehensive-demo/app-04: Module build failed (from ./node_modules/svelte-loader/index.js):
[0] @comprehensive-demo/app-04: Error: TypeError: TypeError: Cannot read property 'data' of undefined
[0] @comprehensive-demo/app-04:     at /Volumes/lulu_dev/module-federation-examples/comprehensive-demo/app-04/node_modules/svelte-loader/index.js:181:12
[0] @comprehensive-demo/app-04:  @ ./src/main.js 1:0-31 3:16-19 11:13-16

And my webpack config is:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
  .ModuleFederationPlugin;
const deps = require("./package.json").dependencies;
module.exports = {
  entry: "./src/index",
  cache: false,

  mode: "development",
  devtool: "source-map",

  optimization: {
    minimize: false,
  },

  output: {
    publicPath: "auto",
  },

  resolve: {
    extensions: [".jsx", ".js", ".json",".mjs"],
  },

  module: {
    rules: [
      { test: /\.m?js$/, type: "javascript/auto" },
      {
        test: /\.jsx?$/,
        loader: require.resolve("babel-loader"),
        exclude: /node_modules/,
        options: {
          presets: [require.resolve("@babel/preset-react")],
        },
      },
    ],
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "app_02",
      filename: "remoteEntry.js",
      remotes: {
        app_01: "app_01@http://localhost:3001/remoteEntry.js",
        app_03: "app_03@http://localhost:3003/remoteEntry.js",
      },
      exposes: {
        "./Dialog": "./src/Dialog",
        "./Tabs": "./src/Tabs",
      },
      shared: {
        ...deps,
        "@material-ui/core": {
          singleton: true,
        },
        "react-router-dom": {
          singleton: true,
        },
        "react-dom": {
          singleton: true,
        },
        react: {
          singleton: true,
        },
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      chunks: ["main"],
    }),
  ],
};

[Smittyvb]

@carsonfarmer Disable emitCss (if it is enabled) and add this to your config, this works for me:

  module: {
    rules: [
      ...
      {
        test: /node_modules\/svelte\/.*\.mjs$/,
        resolve: {
          fullySpecified: false // load Svelte correctly
        }
      },
      ...
    ]
  }

[kyrylkov]

@Smittyvb @benmccann @deleonio @lindenquan

Is there a plan to accept PRs and finalize fixes for webpack 5 anytime soon? thanks!