svelte3 support

[cudr]

Have this error with svelte3:

proxy.js:135 TypeError: Class constructor SvelteComponentDev cannot be invoked without 'new' at new Layout (_layout.html:2) at proxyComponent._register (proxy.js:128) at new proxyComponent (proxy.js:54) at render (client.js:183) at client.js:148

looks like problem with svelte-dev-helper. How i can resolve it?

[ekhaled]

HMR is not supported for svelte v3 yet.
Please set hotReload: false in the webpack config while testing out v3.

[rnenjoy]

Considering switching from Vue/Nuxt to Svelte. But lack of Hot reloading is really a bummer. Watching this

[Vages]

@ekhaled's solution solved the following problem for me: Mounting a (Svelte) component that didn't import any other components worked all right. But once I started importing other components, things went awry, with the following messages showing up in the app's console:

TypeError: Cannot read property 'fragment' of undefined
    at Object.c (webpack-internal:///./src/feedbackWindow/App.svelte:17)
    at init (webpack-internal:///./node_modules/svelte/internal/index.js:1255)
    at new App (webpack-internal:///./src/feedbackWindow/App.svelte:54)
    at proxyComponent._register (webpack-internal:///./node_modules/svelte-dev-helper/lib/proxy.js:135)
    at new proxyComponent (webpack-internal:///./node_modules/svelte-dev-helper/lib/proxy.js:61)
    at Module.eval (webpack-internal:///./src/feedbackWindow/main.js:22)
    at eval (webpack-internal:///./src/feedbackWindow/main.js:46)
    at Module../src/feedbackWindow/main.js (feedback.bundle.js:6017)
    at __webpack_require__ (feedback.bundle.js:727)
    at fn (feedback.bundle.js:101)
    at Object.9 (feedback.bundle.js:6033)
    at __webpack_require__ (feedback.bundle.js:727)
    at feedback.bundle.js:794
    at feedback.bundle.js:797

Uncaught TypeError: Cannot read property '_debugName' of undefined
    at new proxyComponent (webpack-internal:///./node_modules/svelte-dev-helper/lib/proxy.js:63)
    at Module.eval (webpack-internal:///./src/feedbackWindow/main.js:22)
    at eval (webpack-internal:///./src/feedbackWindow/main.js:46)
    at Module../src/feedbackWindow/main.js (feedback.bundle.js:6017)
    at __webpack_require__ (feedback.bundle.js:727)
    at fn (feedback.bundle.js:101)
    at Object.9 (feedback.bundle.js:6033)
    at __webpack_require__ (feedback.bundle.js:727)
    at feedback.bundle.js:794
    at feedback.bundle.js:797

Just posting to make it easier for people to reach this issue by searching.

[will-wow]

Just making sure, is HMR still not supported for Svelte 3? The docs seem to suggest that hotReload: true will work, but maybe that's only for Svelte 2?

If so, I'd be happy to put up a little PR to make a note that Svelte 3 HMR is incoming, so future people don't spend time trying to debug why HMR isn't working.

Also, thanks for this great tool!

[gui-killer]

@Vages Formerly I had the same problem with you, but it finally solved it by doing these:

1. Set the hotReload to false in svelte-loader's option.
2. Set the hot to false in webpack-dev-server if you use it.
3. Remove the webpack-dev-server client from the entry of your webpack.config.js.

[Vages]

Thanks for the advice, @gui-killer. I'm sure it will be of help the next time I use it. However, the project in question needed the webpack-dev-server entry-point and hot=true in webpack dev server because some other frameworks we used at the same time required it.

[rendall]

As a newbie to Svelte, I'm going to leave this here in case it prompts someone with more experience to have insight. Maybe we can crowdsource a solution.

The error for me is:

TypeError: Cannot read property 'fragment' of undefined
    at Object.c (App.svelte:6)
    at init (index.mjs:1461)
    at new App (App.svelte:2)
    at proxyComponent._register (proxy.js:128)
    at new proxyComponent (proxy.js:54)
    at Module../src/main.ts (main.ts:3)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.1 (bundle.js:13627)
    at __webpack_require__ (bootstrap:789)

... which is thrown in the source proxy.js:135, but literally at just a console.error(e);

Along the stack trace (...at init (index.mjs:1461)...) is this resource:

webpack:///./node_modules/svelte/internal/index.mjs, line 1461 of which is

$$.fragment && $$.fragment.c();,

fragment is mentioned in the error itself! TypeError: Cannot read property 'fragment' of undefined...

There is no index.mjs file in the repo, given that it's a compiled file, but I think that line is here https://github.com/sveltejs/svelte/blob/ec0f79c5af3113bedf0a5e9ae1f5f521328fcd30/src/runtime/internal/Component.ts#L156

The code fragment surrounding line 1461 is here. The line 1461 in question is the last one, below:

    // `false` as a special case of no DOM component
    $$.fragment = create_fragment ? create_fragment($$.ctx) : false;
    if (options.target) {
        if (options.hydrate) {
            const nodes = children(options.target);
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            $$.fragment && $$.fragment.l(nodes);
            nodes.forEach(detach);
        }
        else {
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            $$.fragment && $$.fragment.c();
        }
// ...
    }

It seems that create_fragment and options.hydrate are evaluating to false while options.target is true. I don't know enough about the Svelte internals to know what that means, nor why the first line

$$.fragment = create_fragment ? create_fragment($$.ctx) : false;

does not throw, since $$ is presumably undefined there, too. Unless create_fragment($$.ctx) evaluates to undefined?

[rendall]

As for the next error, for me it is:

Uncaught TypeError: Cannot read property '_debugName' of undefined
    at new proxyComponent (proxy.js:56)
    at Module../src/main.ts (main.ts:3)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.1 (bundle.js:13627)
    at __webpack_require__ (bootstrap:789)
    at bootstrap:856
    at bootstrap:856

The first entry in the stack trace leads to this line 56 in webpack:///./node_modules/svelte-dev-helper/lib/proxy.js (which is this repo)

this._debugName = this.proxyTarget._debugName || getDebugName(this.id);

which is in the constructor for proxyComponent as below. I think this bug may be fixed by changing the line to

this._debugName = (this.proxyTarget && this.proxyTarget._debugName) || getDebugName(this.id);

because I suspect that this.proxyTarget evaluates to undefined and so this.proxyTarget._debugName errors before the next expression getDebugName(this.id) can be evaluated.

But, again, I know very little about the codebase, so it may not fix the error in svelte, but it may help reveal underlying issues.

Edit: I created a PR referencing this comment, where I make the suggested change: ekhaled/svelte-dev-helper#14

class proxyComponent {

    constructor(options) {
      this.id = id;
      this.__mountpoint = null;
      this.__anchor = null;
      this.__insertionPoint = null;
      this.__mounted = false;

      this._register(options);

      this._debugName = this.proxyTarget._debugName || getDebugName(this.id);

      // ---- forwarded methods ----
      const self = this;
      forwardedMethods.forEach(function(method) {
        self[method] = function() {
          return self.proxyTarget[method].apply(self.proxyTarget, arguments);
        };
      });
      // ---- END forwarded methods ----
    }

[rixo]

@rendall Hey! I went down a very similar path as you some time ago. Indeed, there are not a whole lot of things to adapt in this codebase to make it work with Svelte 3.

Eventually this led me to the development of svelte-hmr. You may want to check the README of this project. We now have community plugins with HMR support both for Webpack and Rollup, and even super fast, almost instant, options with Nollup and Svite!

If you're interested in contributing to HMR, you might want to check what can be enhanced in those projects, instead of doing it all from scratch again ;)

[rendall]

@rixo Coo'. I swapped in svelte-loader-hot and it seems to work out of the box, so good on ye. I even already issued a little tiny PR for a typo in the README. Thanks! If I think if any enhancements I will let you know.

I do feel a bit of an obligation to help out here, where possible, but now I can hot reload. Groovy.

[rixo]

@rendall BTW if you're in search of a Svelte HMR challenge for yourself, there is the Sapper + Nollup + HMR thing that I've been meaning to address but lacked time thus far...

I've got a POC working, and we want to go the rest of the way by integrating that cleanly into Sapper (and this requires discussion and PR at Nollup too).

@antony was interested in working on this, especially on the Sapper part.

There's been some discussion, and link to my POC is available in this issue: sveltejs/sapper#1207 (comment)

I'm mentioning this because this work seems very much aligned with the debugging skills you've displayed previously. Maybe that's something you'll want to play with :)