Doesn't work with ParcelJS

[antony]

I'm trying to use this in a project I build with parcel and parcel-svelte-plugin. Unfortunately due to the way parcel automatically determines how to parse files, the parcel-svelte-plugin relies on .svelte file extensions for components, hence:

import NavLink from 'svelte-routing/NavLink.html';
import Route from 'svelte-routing/Route.html';

won't work, as the html files will be treated as plain html.

Is there a reason that NavLink and Route are exported like this? Could they instead be exports?

import { NavLink, Route } from 'svelte-routing'

Thanks, Antony

[EmilTholin]

Hey @antony!

Ah, I haven't used Parcel extensively so I didn't consider that would be a problem when I created the components.

The reason why the components are not exported as your second example is because that would require svelte-routing to have a set Svelte version and build step, and ship compiled versions on npm. The way it is now the user of the library can use something to their liking.

I am following the uncompiled templates export RFC and will move to that when it's ready.

[ItalyPaleAle]

I have the same issue, with Webpack rather than Parcel. The "fix" in the issue you linked above didn't work for me...

[EmilTholin]

Hey @ItalyPaleAle!

You're right. The issue I linked to in my comment is not implemented yet, so there is no satisfying solution to this problem as of yet.

[ItalyPaleAle]

My (definitely sub-optimal) workaround was to download the source code from this repo into a “vendor” folder, then install the two dependencies of svelte-routing in the local module.

[konsumer]

I think this might be resolved by using .svelte filenames with parcel, and using parcel-plugin-svelte.

[antony]

@konsumer yes - as per my original comment, this will fix it.

There is a concept of a 'svelte' export already @EmilTholin - simply specify the 'svelte' attribute on package.json and export a js file which in turn exports your components. Rollup and Webpack will use this.

[fjanon]

My (definitely sub-optimal) workaround was to download the source code from this repo into a “vendor” folder, then install the two dependencies of svelte-routing in the local module.

Could you expand on that solution for Webpack, please? How do you "install the two dependencies of svelte-routing in the local module"? Thanks.

[ItalyPaleAle]

Well, it’s like back in the days when package managers didn’t exist :) I downloaded a ZIP of this repo, removed all unnecessary files and put the source into vendor/svelte-router. Svelte Router has a dependency too, which I’ve added to my package.json. Then, I import Svelte Router with a normal import “./vendor/svelte-router”

[EmilTholin]

Sorry for keeping you waiting for so long. With the release of 1.0.0 we changed to the .svelte file extension, and we also added a index.js file where the entire API is exported from, so now you can finally do this:

import { Router, Route, Link } from "svelte-routing";