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

Question

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

ScriptedAlchemy opened this issue 5 years ago · 28 comments

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

Answer 1 · 2020-10-11T14:53:03.000Z

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.

Answer 2 · 2020-10-14T04:17:22.000Z

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

Answer 3 · 2020-10-19T15:25:15.000Z

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

Answer 4 · 2020-10-19T23:42:53.000Z

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.

Answer 5 · 2020-10-19T23:43:50.000Z

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

Answer 6 · 2020-10-24T05:14:54.000Z

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

Answer 7 · 2020-10-29T20:23:27.000Z

That works with webpack 5

Answer 8 · 2020-10-31T08:40:38.000Z

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

Answer 9 · 2020-10-31T08:40:52.000Z

Or fixing that

Answer 10 · 2020-10-31T09:51:34.000Z

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

Answer 11 · 2020-10-31T19:51:12.000Z

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

Answer 12 · 2020-11-03T05:16:03.000Z

Sorry this does not work.

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

Answer 13 · 2020-11-03T23:32:51.000Z

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

There's a whole thread on the subject there.

Answer 14 · 2020-11-10T02:37:37.000Z

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.

Answer 15 · 2020-11-10T13:31:02.000Z

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

Answer 16 · 2020-11-10T19:36:03.000Z

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

Answer 17 · 2020-11-11T07:20:54.000Z

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

Answer 18 · 2020-11-11T22:51:44.000Z

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!

Answer 19 · 2020-11-20T10:01:04.000Z

@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"

Answer 20 · 2020-12-04T06:53:05.000Z

the same story here:

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

Answer 21 · 2020-12-04T06:53:21.000Z

Please merge #136

Answer 22 · 2020-12-07T01:30:12.000Z

Sorry this does not work.

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

Not a babel-loader config, its own loader

Answer 23 · 2020-12-09T22:02:55.000Z

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

Answer 24 · 2020-12-16T00:50:56.000Z

@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?

Answer 25 · 2020-12-16T09:29:25.000Z

@Smittyvb @benmccann @deleonio @lindenquan

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

Answer 26 · 2020-12-27T16:57:24.000Z

That is solved for us leanupjs/leanup#37.

Answer 27 · 2021-01-18T05:50:48.000Z

@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

Answer 28 · 2021-01-18T17:35:00.000Z

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