search

alphapeter / fa-svelte

Font Awesome 5 for svelte.js
MIT License
71 stars 3 forks source link

Running into error in sapper template project #5

Closed dephiros closed 4 years ago

dephiros commented 5 years ago

Hi,

Thank you for this helpful component.

I am running into this error using sapper webpack:

/Users/dephiros/projects/lyanvoyages/node_modules/fa-svelte/index.js:261
export default Icon;
^^^^^^
SyntaxError: Unexpected token export
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

I checked and svelte is already in resolve.mainFields in webpack config so not sure what the problem is.

Any help is appreciated!

alphapeter commented 5 years ago

I haven't got the tooling working properly for Svelte 3 with the extension .svelte yet, thus I have kept the extension .html. Maybe that's part of the problem?

The resolve.mainFields should tell webpack to reference the source src/Icon.html instead of using index.js.

What you could do is to copy the src/Icon.html to you project and reference it as a regular svelte component (as if you written it yourself). Maybe you'll also need to change the extension to .svelte, depending on your build configuration. There's really no magic in Icon.html, just the essential.

If you figure out what need to be done to get it to work, I would be glad i you shared.

dephiros commented 5 years ago

That is what i ended up doing in the mean time. Basically all I had to do to copy the component and rename to extension to svelte and my sapper webpack setup works nicely

alphapeter commented 5 years ago

I'm planning on setting up a working template once all tooling works properly for svelte3. And also change the extenstion to svelte so that it will work with webpack configured for svelte 3 "out of the box".

nelsonpecora commented 4 years ago

An alternative workaround I've found is using a relative path when importing, e.g.

import Icon from '../../node_modules/fa-svelte';

I think there might be an issue with rollup-plugin-svelte (and potentially the webpack equivalent) where it ignores / does something weird with svelte components in node_modules.

pitkes22 commented 4 years ago

According to Sapper-Template Readme libraries that provides svelte components needs to be to installed as devDependencies. So solution is npm install -D fa-svelte. It would be great if this was mentioned in readme of this library @alphapeter .

alphapeter commented 4 years ago

I will clearify the readme. I've only used web pack myself, thus I've not tried it using rollup.

alphapeter commented 4 years ago

I have added working examples for both webpack and rollup