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

[ScriptedAlchemy]

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"],
    }),
  ],
};

[syvb]

This will be fixed by #136, I have been using Webpack 5 with my svelte-loader fork, and it works with with Webpack 5.0.0-beta.29:

"svelte-loader": "smittyvb/svelte-loader#update-virtual-modules",

I am, however, getting weird svelte errors in versions after Webpack 5.0.0-beta.29 even with my fork about fully specified paths.

[ScriptedAlchemy]

You need to resolve absolute paths. Might be you're passing a regex where it now wants a full path. 28-RC broke several repos. Virtual modules I believe is the main cause. Which writes code to webpack cache, but I'm pretty sure those APIs were changed to an asset lifecycle. Haven't looked deeply but that might be it.

Require resolve your paths or you can get the resolution context from require.main and then loop over the resolution paths to find where x module exists, I did this in the fork of next-transpile-modules

[JestDotty]

new project with webpack 5 is having weird errors for me as well

I attempted to import {onMount} from 'svelte' and

downgrading to webpack 4 fixes this issue for the time being

[ScriptedAlchemy]

Unrelated issue. You need resolvers for mjs check webpack git issues. I think it's closed now but it was originally tagged as a Babel thing. It might still be pinned to webpack.

[ScriptedAlchemy]

Project author needs to fix their package json field. But mjs resolver mentioned on webpack will fix it till author updates

[deleonio]

The webpack resolve does not help :-(

Try: leanupjs/leanup@2fb366c#diff-98c34b0b8d37e35fccc6ec6e21f85d5b4a629694cebe7065b270d39a74ba4949L26

Error: https://github.com/martinoppitz/poc-flexible-web-application-architecture/runs/1301297028?check_suite_focus=true#step:5:330

[deleonio]

That works with webpack 5

[ScriptedAlchemy]

{ test: /.m?js$/, type: "javascript/auto",fullySpecified:false},

[ScriptedAlchemy]

Or fixing that

[nikitaindik]

@ScriptedAlchemy That helps, thanks! It works after a small correction - fullySpecified should be in "resolve".
{ test: /.m?js$/, type: 'javascript/auto', resolve: { fullySpecified: false } },