Can't use svelte-pick-a-place as a Node module in a Svelte3/Sapper app

brunetton commented 4 years ago

Hi, I just discovered this project and I'm very enthusiast about it !

I wanted to use it in a simple Sapper / Svelte 3 app but I ran onto some issues. Here it is, in details. I'm sorry if this is something that is supposed to be obvious; I'm absolutely not an experimented Node js developer !

Installation

npx degit "sveltejs/sapper-template#rollup" map-tests
cd map-tests
npm i

Add dependency to pick-a-place-legacy npm package

npm i svelte-pick-a-place

Edit app files

I edited default index.svelte file to replace Borat by the Svelte example provided in doc.

Run app

npm run dev

Leaflet problems

the first problem came out: Error: Cannot find module 'leaflet'
- not a big deal, I installed it manually: npm i leaflet
then I got: ReferenceError: window is not defined
- following Sapper documentation I tried to place Leaflet import unsing onMount; this seems to work as there's no error about Leaflet loading anymore

svelte-pick-a-place problems

the next error I got was Error: Cannot find module 'svelte-pick-a-place'
- but the module is present, in node_modules/svelte-pick-a-place/
- I tried to put the loading inside the onMount block and I seemed to "work", as it compiled
- but at execution, in browser I got this error: <PickAPlace> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

What did I missed here ? I had a look at examples/basic-svelte example; that works, but I think the difference is that svelte-pick-a-place is imported locally (in package.json: "svelte-pick-a-place": "../../" and in index.html: <script defer src="/bundle.js"></script>).

Sorry again for this long report but I wanted to be the most precise possible to avoid wasting time with too many answers/responses.

Any help would be very appreciated :) Thanks ! (of course I'll contribute to the documentation if there's something to add for beginners like me)

cbenz commented 4 years ago

@brunetton you explained the steps to reproduce your problems, but could you push your code completely on a repo?

I suspect you installed svelte-pick-a-place as a dependency instead of a devDependency and I'd like to try to fix it from your code base.

jimutt commented 4 years ago

@brunetton Hi! Thank you for the thorough explanation. I'm sorry I haven't been able to look into this and helped you out yet, I started on a new job last week and have been pretty busy the last couple of days.

I will get back to you as soon as I can.

As @cbenz mentioned it would be great if you could publish a public repo where the issue is present though. Otherwise I'll try to recreate your issues myself but it might take a little longer.

At a first glance it seems like this issue could be more related to using non SSR friendly components with Sapper in general. But I'll test it with a Sapper project and see if I need to make any changes to the package or can show you a working example project.

That you're having to install and provide Leaflet yourself is fully intended though to allow for different usage scenarios where in some cases (mostly in legacy apps) you might already have a global leaflet instance available that you'd like to use.

jimutt commented 4 years ago

@brunetton I think I'll need to make some changes to have it work properly with sapper if you install svelte-pick-a-place as a normal dependency. I've got a repo here (where it's loaded as a dev dependency) that should be working for you in the meantime though: https://github.com/jimutt/pap-sapper-example.

Checkout how the component is used in index.svelte. I'm loading leaflet dynamically and not rendering svelte-pick-a-place before leaflet is available.

I'll try to publish a hotfix later to allow using it as a normal dependency.

brunetton commented 4 years ago

Thanks you very much @jimutt ! And sorry for my response delay, I was very busy on other subjects. Thanks for taking time to make this repo !

You example is working great, and I managed to see the differences with mine and make it work 👍

For future reference, a quick summary to get this working:

install leaflet as a dev dependency (npm i --save-dev leaflet)
load leaflet dynamically (using Svelte onMount)
add {#if leaflet != null} to avoid trying to initialize PickAPlace component before leaflet variable is set

Thanks again for your time !

jimutt / svelte-pick-a-place