Sapper Error - TypeError: _components_Icon_html__WEBPACK_IMPORTED_MODULE_0__.default.register is not a function

[btakita]

When importing an icon:

import 'svelte-awesome/icons/chevron-left.js'

The following error occurs:

TypeError: _components_Icon_html__WEBPACK_IMPORTED_MODULE_0__.default.register is not a function

[RobBrazier]

I haven't actually tested this with sapper, I'll have a look - thanks

[btakita]

It looks like setup (https://github.com/RobBrazier/svelte-awesome/blob/master/src/components/Icon.html#L57) is not called when performing SSR.

[btakita]

@RobBrazier Sorry about the commit spam. I tried a few approaches to get it working in SSR, but could not seem to figure out how to keep Icon.register() & Icon.icons. I'm not sure how you would want this handled, so I'll pass this to you.

To get around this issue, I call register__chevron_down from the component's setup callback.

export function register__chevron_down(Icon) {
	if (Icon.icons['chevron-down']) return
	Icon.register({ 'chevron-down': { width: 1792, height: 1792, paths: [{ d: 'M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z' }] } })
}

[btakita]

sveltejs/svelte#817

[burkostya]

@RobBrazier Any thoughts? Looks like @btakita fixed it.

[RobBrazier]

I haven't had a chance to look at it yet, I'll try and give it a go over the weekend, but I'm getting an error from the svelte plugin when trying to use the getter method

get icons() {
  return icons;
}

@btakita did you manage to get anywhere in the end? I see you had another go early this month.

Is this issue just on any sapper application, no particular requirements?

[antony]

I've created a fresh Sapper application just to determine how far from working this project might be.

Simply including the Icon component on a page causes the following stacktrace:

500
<Icon> 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

Error: <Icon> 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
    at validateSsrComponent (webpack:///./node_modules/svelte/shared.js?:1009:9)
    at Object.Index._render (webpack:///./src/routes/index.html?:49:120)
    at Object.Layout._render (webpack:///./src/routes/_layout.html?:45:276)
    at Object.Layout.render (webpack:///./src/routes/_layout.html?:23:20)
    at Promise.all.catch.then.preloaded (webpack:///./__sapper__/server.js?:2193:58)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:182:7)

[RobBrazier]

Really sorry for the delay 😞. Support has been added for svelte 3 now in 2.0.1. I haven't tested with sapper yet (so won't close this card yet), but will try this evening. In the meantime, are you able to give it a go (if you are still interested)

[RobBrazier]

Closing as I have tested this with sapper now - all working

[adamkiss]

@RobBrazier moved the comment to separate issue - #506