Issue with Parcel bundler

[codechips]

Hi!

I am trying to use this with Parcel. However, when starting a dev server Parcel grabs a minified version of the plugin as defined in pkg.browser. For some reason things break in the browser.

Uncaught TypeError: store.subscribe is not a function

When changing the pkg.browser entry to src/index.js everything works as expected. The pkg.svelte already points to it, but this is a reserved property for the svelte compiler options and should not be used as an entry point, right?

I am a little unsure on how to proceed here. On what side the error is. Isn't it a bundler's job to minify the assets? What's your opinion?

[pateketrueke]

Hi, I'm not user of Parcel so I would miss few things but, did you tried a plugin for svelte? https://github.com/DeMoorJasper/parcel-plugin-svelte

The error Uncaught TypeError: store.subscribe is not a function is related with bundlers, so if you're not using the svelte property then will fail. Once you use a proper bundler/plugin the error just gone because the Svelte compiler will deal with.

[codechips]

That's the plugin I am using. I think the problem is that it uses the minified version of yrv when bundling (as pointed bypkg.browser). Once you point it to src/index.js everything works fine. The problem is that pkg.svelte is reserved for compiler options by the Parcel plugin.

https://github.com/DeMoorJasper/parcel-plugin-svelte/blob/master/packages/parcel-plugin-svelte/lib/svelte-asset.js#L11

So, I am not really sure who is right here - svelte plugin or yrv 🤔

[pateketrueke]

Let's try something, just remove the pkg.browser entry from the yrv module and try to rebundle, I'm suspicious that browser > svelte may be?

[codechips]

Didn't help. This is a Parcel error as you said because it works fine with Rollup. I will reach out to its author instead. Thanks for the help, for the nice router and keep up the good work! 💪

[codechips]

FYI DeMoorJasper/parcel-plugin-svelte#100

[codechips]

Hey, I am re-opening the issue as something was fixed in 0.0.19 but breaks again in 0.0.25. Maybe you can help me figure out what's causing it. Now I get an new error instead:

yrv.min.js:1 Uncaught TypeError: Class constructor SvelteComponent cannot be invoked without 'new'

My guess is that it has something to do with how Rollup packs and minifies yrv and Parcel is using browser prop if package.json has one. As I said earlier, using raw dist aka pkg.svelte works fine. Have you by any chance tried yrv with Webpack and see if they play well together?

[pateketrueke]

Did you tried this settings? https://github.com/sveltejs/svelte-loader

I mean, I understand the browser field is causing to ignore the svelte field, but if you configure the order of mainFields then you can achieve what you want.

Update: I'm not webpack user but since there's enough docs and loaders I believe it should work if configured properly, if Parcel does not let you to do the same then the problem is not you...

[pateketrueke]

After a quick investigation it seems to be more a Parcel/Babel/Svelte thing as I read in comments: DeMoorJasper/parcel-plugin-svelte#44

I'm trying to make it work on Parcel with no luck yet, same issues as above.

Regarding webpack I just tried this template and it just worked!

[codechips]

This is an interesting thread parcel-bundler/parcel#1655

I tried putting .browserlistrc with node 10.11 into the node_modules/yrv folder to see if it makes a difference. It did, looks like, but it still fails. The interesting part is that svelte core stuff compiles just fine, but they are using .mjs as extension while yrv is using .min.js. It's a jungle out there with no clear, established standards yet feels like.

I am curious about your decision behind minifying and transpiling the yrv distribution, because most of the people use some kind of "modern" bundler already while developing their app and in the end it is the one that should take care of all that stuff.

In the end, it might be best to settle for some kind of minimal working default distribution that would satisfy most modern bundlers (Parcel included). 😉

Also, Parcel Svelte plugin is using pkg.svelte for Svelte config looks like and not as a module entry.

https://github.com/DeMoorJasper/parcel-plugin-svelte/blob/master/packages/parcel-plugin-svelte/lib/svelte-asset.js#L11

$ npx parcel serve src/index.html --port 3000 --log-level 4 --no-cache
[5:48:24 PM]: Server running at http://localhost:3000 
[5:48:24 PM]: Building...
[5:48:24 PM]: Building index.html...
[5:48:24 PM]: Building global.pcss...
[5:48:24 PM]: Building main.js...
[5:48:24 PM]: Building App.svelte...
[5:48:27 PM]: Building css-loader.js...
[5:48:28 PM]: Building yrv.min.js...
[5:48:28 PM]: Building store.ts...
[5:48:28 PM]: Building bundle-url.js...
[5:48:28 PM]: Building index.mjs...
[5:48:28 PM]: Building index.mjs...
[5:48:29 PM]: Building index.mjs...
[5:48:29 PM]: Built ../node_modules/svelte/internal/index.mjs...
[5:48:29 PM]: Built store.ts...
[5:48:29 PM]: Built ../node_modules/parcel-bundler/src/builtins/bundle-url.js...
[5:48:29 PM]: Built ../node_modules/parcel-bundler/src/builtins/css-loader.js...
[5:48:29 PM]: Built global.pcss...
[5:48:29 PM]: Built ../node_modules/svelte/store/index.mjs...
[5:48:29 PM]: Built ../node_modules/svelte/index.mjs...
[5:48:29 PM]: Built ../node_modules/yrv/dist/yrv.min.js...
[5:48:29 PM]: Built App.svelte...
[5:48:29 PM]: Built main.js...
[5:48:29 PM]: Built index.html...
[5:48:29 PM]: Producing bundles...
[5:48:29 PM]: Packaging...
[5:48:29 PM]: Building hmr-runtime.js...
[5:48:29 PM]: Built ../node_modules/parcel-bundler/src/builtins/hmr-runtime.js...
[5:48:29 PM]: ✨  Built in 5.46s.

[pateketrueke]

So there's no way to tell parcel that pkg.svelte should be tried before pkg.browser then?

If that's true I'll remove such entry on the yrv package instead.

[codechips]

I tried many things and I finally nailed it down to this line in Rollup config:

https://github.com/pateketrueke/yrv/blob/master/rollup.config.js#L29

When removing it and then re-building everything works. Don't ask me why 😅

However, the final yrv bundle size becomes much larger as it also bundles Svelte in this case seems like, but it also looks like the total size of the bundled app when built increased only by 3KB.

[pateketrueke]

That seems more accurate, and also pkg.browser seems not to be needed et all.

I'm publishing a new release with all these changes, so much thanks for your input!