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 } },

[ScriptedAlchemy]

Tell the package authors to fix their shiz. We shouldn't depend on this loader to fix improperly configured packages

[deleonio]

Sorry this does not work.

https://github.com/leanupjs/leanup/blob/58a7cc92063edaaa3a8019ceb68511e2d8169294/packages/cli/core/src/webpack.config.ts#L27

[ScriptedAlchemy]

Search closed webpack issues. Look for one titled beta.31

There's a whole thread on the subject there.

[carsonfarmer]

I wasn't able to find the particular thread over there. Could it be this one: webpack/webpack#11467?
In any case, has anyone got this to work successfully with webpack 5 yet? I tried the above fix, but I get the same error as reported here.

[syvb]

@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
        }
      },
      ...
    ]
  }

[carsonfarmer]

Huzzah! Thanks @Smittyvb, you rock! cc @martinoppitz in case you're still looking for the solution.

[deleonio]

I wasn't able to find the particular thread over there. Could it be this one: webpack/webpack#11467?
In any case, has anyone got this to work successfully with webpack 5 yet? I tried the above fix, but I get the same error as reported here.

PR works . But the code is not optimized. #136

[carsonfarmer]

I actually gave that one a try a few days ago before your latest fix (I just snuck it in manually), thanks for that! The only issue I had was with some funkiness with hot reloading IIRC? Looking forward to seeing that merge, at which point I'll give it a go again!

[shurygindv]

@Smittyvb, could you help? when emitCss set to false, it works, but webpack loader cant preprocess scss background: url(..publicPath') / aliases, when true then I'l get Can't resolve [ComponentName].svelte.css error

p.s use "svelte-loader": "smittyvb/svelte-loader#update-virtual-modules"

[deleonio]

the same story here:

• webpack 5 support vuetifyjs/vuetify-loader#136 and here
• Webpack5 does not build anymore aurelia/aurelia#982 and here
• Update VirtualModulesPlugin from upstream #136 and so on

Many thanks to Angular for influencing Webpack and the unconsolidated upgrade to v5.

[deleonio]

Please merge #136

[ScriptedAlchemy]

Sorry this does not work.

leanupjs/leanup@58a7cc9/packages/cli/core/src/webpack.config.ts#L27

Not a babel-loader config, its own loader

[deleonio]

Sorry @ScriptedAlchemy , what does you mean?

mkdir demo
cd demo
npm i -g @leanup/cli@next @leanup/cli-svelte@next
svelte create
svelte serve --open
svelte build

Check https://github.modevel.de/poc/next/#series

[kibebr]

@Smittyvb, could you help? when emitCss set to false, it works, but webpack loader cant preprocess scss background: url(..publicPath') / aliases, when true then I'l get Can't resolve [ComponentName].svelte.css error

p.s use "svelte-loader": "smittyvb/svelte-loader#update-virtual-modules"

i am using "svelte-loader": "smittyvb/svelte-loader#update-virtual-modules" and am now getting the same error Can't resolve [ComponentName] .... could you explain how you fixed it?

[kyrylkov]

@Smittyvb @benmccann @deleonio @lindenquan

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

[deleonio]

That is solved for us leanupjs/leanup#37.

[non25]

@kyrylkov you can use current master until release like this:

npm install -D sveltejs/svelte-loader
# or if using yarn 2
yarn add -D svelte-loader@sveltejs/svelte-loader

[kyrylkov]

@non25 Seems to be working fine. Great job and thanks a lot!