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
- Support Webpack 5, drop copypasted webpack-virtual-modules Fixes #139, Fixes #131, Fixes #126 Co-authored-by: Smittyvb <me@smitop.com> — committed to non25/svelte-loader by non25 3 years ago
- Support Webpack 5, drop copypasted webpack-virtual-modules Fixes #139, Fixes #131, Fixes #126 Co-authored-by: Smittyvb <me@smitop.com> — committed to non25/svelte-loader by non25 3 years ago
- Support Webpack 5, drop copypasted webpack-virtual-modules Fixes #139, Fixes #131, Fixes #126 Co-authored-by: Smittyvb <me@smitop.com> — committed to non25/svelte-loader by non25 3 years ago
@carsonfarmer Disable
emitCss(if it is enabled) and add this to your config, this works for me:@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:
@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 } },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:I am, however, getting weird svelte errors in versions after Webpack
5.0.0-beta.29even with my fork about fully specified paths.@Smittyvb, could you help? when
emitCssset tofalse, it works, but webpack loader cant preprocess scssbackground: url(..publicPath')/ aliases, whentruethen I’l getCan't resolve [ComponentName].svelte.csserrorp.s use
"svelte-loader": "smittyvb/svelte-loader#update-virtual-modules"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.