Inertia: svelte: Class constructor Link cannot be invoked without 'new'

[christoomey]

Versions:

• @inertiajs/inertia version: 0.8.0
• @inertiajs/inertia-svelte version: 0.6.0
• @babel/core version: 7.11.1
• webpack version: 4.44.2
• @rails/webpacker version: 5.2.1

Describe the problem:

While trying to use the use:inertia action on an <a> tag I run into the following error:

Uncaught (in promise) TypeError: Class constructor Link cannot be invoked without 'new'

This error seems to be related to the code in the library using non-es5 features. I did a quick check with:

❯ npx are-you-es5 check -r .
npx: installed 10 in 2.303s
❌ @inertiajs/inertia-svelte is not ES5
❌ svelte-preprocess is not ES5
❌ tailwindcss is not ES5

Note - If I copy the current inertia-svelte/src/link.js into my app then things work fine, which leads me to believe that the issue is related to the use of non-es5 syntax, and node_modules not being transpiled.

That said, it's not clear to me what exactly in the inertia-svelte Link code that would be causing this, nor why this isn't a problem for other packages which certainly seem to be using non-es5 syntax.

I've tried a number of babel & webpack tweaks to try to get them to transpile the inertia-svelte code but thus far no luck. That's likely operator error on my part, but more generally I think it would be great to not have to do any of that.

Steps to reproduce:

In my case I'm using webpack via rails webpacker gem.

1. Add import { inertia } from '@inertiajs/inertia-svelte'
2. Apply the inertia action to a link <a use:inertia ...
3. See the Uncaught (in promise) TypeError: Class constructor Link cannot be invoked without 'new' error

Currently I'm able to get by either using the InertiaLink component or by copying the action code into my repo.

[reinink]

I wonder if this is related to #414 at all. 🤔

[christoomey]

Oh, interesting! Looking at the inertia-svelte package I can see it has no build process currently, so projects are running directly against the src/* files and thus hitting the error described above. Previously I couldn't see why the @inertiajs/inertia package would be different, but looking again I see that you've got a build step configured there, and projects are running against a bundled and transpiled dist/* file.

I'll poke around with adding a build step to the inertia-svelte package using https://github.com/sveltejs/component-template (microbundle doesn't support svelte) and see if that can resolve things.

Unfortunately I don't think that's the issue in #414 as that package _does_ have a dist. Might be something else in the configuration such that the app webpack config is ignoring dist, but there at least is a built dist there.

[mariojankovic]

@christoomey were you able to test this out? I'd love to replicate your environment so if you can share something that I can work with that'd be great.

[christoomey]

Hi @mariojankovic, I'm unfortunately still running into issues (although the core issue does seem to be resolved by your update, which is great!).

I've put together a repo to demonstrate what I'm running into: https://github.com/christoomey/inertia-svelte-repro/blob/master/README.md. README has notes on what I'm seeing. Happy to provide additional details re: that repo if that helps.

[mariojankovic]

@christoomey I've replicated your repo but have added the svelte adapter from #531 (manually via yarn link but it's the same exact instance) and it's throwing no error. With the initial setup in your PR the error seems to be there so I'm happy to say the issue seems to be resolved by #531.

[reinink]

Fixed in #549.