Doesn't seem to work any more

[antony]

🐛 Bug Report

🎛 Configuration (.svelterc, package.json, cli command)

Upgraded all my projects and none of them work any more, with the error component Xxx is not a function

If you simply clone this project and then point parcel at the index.html file, you will notice that you get the same error:

💻 Code Sample

➜  npx parcel index.html
Server running at http://localhost:1234 
✨  Built in 2.35s.

In your browser console:

component.svelte:22 Uncaught TypeError: (0 , _component2.default) is not a function
    at Object.parcelRequire.4../components/app/component.svelte (component.svelte:22)
    at newRequire (main.5ce53338.js:48)
    at parcelRequire.12 (main.5ce53338.js:75)
    at main.5ce53338.js:80
parcelRequire.4../components/app/component.svelte @ component.svelte:22
newRequire @ main.5ce53338.js:48
parcelRequire.12 @ main.5ce53338.js:75
(anonymous) @ main.5ce53338.js:80

🌍 Your Environment

This project's exact dependencies, and NodeJS 9.10.1

[DeMoorJasper]

Could you create a minimal reproducable example.
Or if you have time create a failing test that reproduces your issue.

[antony]

@DeMoorJasper doing so as we speak. I think I replicated the problem incorrectly so I'm looking at ways to replicate it properly first.

[antony]

Ok, in trying to recreate this I encountered a different blocking bug which means that I can't progress, so...

https://github.com/antony/parcel-plugin-svelte-bug

It looks like parcel is telling me that my component.svelte can't be resolved. However, if you remove the parcel-plugin-svelte package using npm remove --save-dev parcel-plugin-svelte, the project compiles again, but obviously the component doesn't work.

Slightly confused as to what's going on here.

[antony]

Ok, my fault. I'd installed parcel instead of parcel-bundler! Didn't realise there were two packages now.

It looks like it works again. I'll close this for now :) Sorry about that!

[antony]

Btw - I just realised that parcel and parcel-bundler are supposed to be the same package. So not really a bug, but officially you should support a peerDependency of either parcel or parcel-bundler. But I've no idea how you do that in package.json!

[DeMoorJasper]

@antony I can probably write an adapter for that I’ll reopen untill I’ve had some time to figure this one out

_{Sent with GitHawk}

[antony]

Ok, I have to reopen this as I'm still encountering it even after switching to parcel-bundler. Sorry to be a pain, it seems to be exceptionally hard to track this down.

Here's a working minimal example as a branch of my seed project:

https://github.com/antony/svelte-seed/tree/bug/plugin-svelte

[antony]

Ok I've tracked it down. It feels like this might be a parcel bug or a svelte bug, but I can't replicate it on the svelte repl...

https://github.com/antony/parcel-plugin-svelte-bug

If you use a class name in the 'style' tag of a component which contains a '-', it refuses to compile the component.

In the example above, if you change:

<style>
  .the-time {
    font-weight: bold;
  }
</style>

to

<style>
  .theTime {
    font-weight: bold;
  }
</style>

It compiles the component without issue.

Really weird!

[DeMoorJasper]

Awesome, wondering if this goes up all the way to parcel. It’s probably not really related to the plugin, I’ll def look further into this and open a pr/issue in the project this originates from

_{Sent with GitHawk}

[antony]

I've spent a lot of time trying to debug this, and I think I've narrowed it down to this bit of code:

https://github.com/parcel-bundler/parcel/blob/master/src/Pipeline.js#L24

It seems that the svelte files get compiled into three renditions, a js, a css, and a map, but then a bit later another js appears which contains only:

{ type: 'js',
    value: '\n        var reloadCSS = require(\'_css_loader\');\n        module.hot.dispose(reloadCSS);\n        module.hot.accept(reloadCSS);\n      ',
    final: true }

and due to the code above being a hash, the js key appears to get overwritten by the part above.

This doesn't really explain why the module is completely missing when the final bundle is output, but it's definitely getting closer to explaining what is going on.

[DeMoorJasper]

that's strange it works for vue, I'll have a look at it soonish

[antony]

Thanks :) Just in case it is useful, I'm still trying to pin down the issue.

I've found that if I comment out the js block here https://github.com/parcel-bundler/parcel/blob/master/src/assets/CSSAsset.js#L126

Then svelte components start to work again. Very odd.

The reason that the .some-class vs .someClass worked is because in the latter case, the class name didn't match my html class name and therefore the CSS was thrown away, and didn't encounter the line I've mentioned above. So actually nothing to do with snake-case vs camelCase.

[DeMoorJasper]

Should be fixed in 1.1.4, this is however a hotfix and I'll create a bug report on the parcel repo and follow it up there.

[antony]

@DeMoorJasper This is excellent - it works brilliantly - you are an absolute legend!