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

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 2
  • Comments: 28 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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

@Smittyvb @benmccann @deleonio @lindenquan

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

@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

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

Please merge #136

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

image

That works with webpack 5

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.

@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 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. https://github.com/sveltejs/svelte-loader/pull/136

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

I wasn’t able to find the particular thread over there. Could it be this one: https://github.com/webpack/webpack/issues/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.