Sapper: "is not a valid SSR component" (regression since Carbon 0.27)

[benbucksch]

Same problem as #595, but with Sapper and Carbon 0.39.

This is a regression between carbon-components-svelte 0.26 and 0.39. It works fine in 0.26 and fails in 0.39. The problem appears immediately after the upgrade and goes away when I downgrade. I'm using Sapper 0.28.10.

Following the suggestion in #595, I've removed the dev dependency on carbon and re-added carbon 0.39 as direct dependency, but the problem persists.

The following error appears on the console where I run Sapper, and also in the browser (as the only page content) when I run the app.

As dev dependency:
<svelte:component this={...}> 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
As direct dependency:
<Header> 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

[benbucksch]

Carbon components used:

Accordion
AccordionItem
Breadcrumb
BreadcrumbItem
Button
Checkbox
ClickableTile
Column
Content
DataTable
DataTableHeader
Dropdown
DropdownItem
Grid
Header
HeaderNav
HeaderNavItem
HeaderUtilities
Icon
Link
Loading
Modal
NumberInput
Row
SideNav
SideNavItems
SideNavLink
SkipToContent
Slider
Tab
TabContent
Tabs
TextInput
Toggle
Toolbar
ToolbarBatchActions

Given that Header is mentioned in one of the error messages, that seems like a good start to look at.

[metonym]

I've removed the dev dependency on carbon and re-added carbon 0.39 as direct dependency, but the problem persists

That suggestion was for a SvelteKit set-up. I believe that Sapper requires external Svelte components to be installed as development dependencies.

What Svelte version are you using?

[metonym]

@benbucksch I'm trying this with a fresh Sapper/Rollup set-up:

• "sapper": "^0.28.0"
• "carbon-components-svelte": "^0.39.0"

Note: I'm importing the list of components you provided, and DataTableHeader and DropdownItem are not exported from the base index.js from carbon-components-svelte. How are you using those?

[benbucksch]

I can reproduce it with:

"devDependencies": {
    "carbon-components-svelte": "^0.39.0",
    "sapper": "^0.29.1",
    "svelte": "^3.38.3",
    "svelte-check": "^2.2.0",
    "svelte-preprocess": "^4.7.3",
    ...

I've done a binary search, and it regressed between 0.26 and 0.27. yarn add carbon-components-svelte 0.26 works, and 0.27 fails.

[benbucksch]

A colleage of mine found that this specific commit introduced a breaking change to the props and caused the breakage: 63ef512

[metonym]

@benbucksch Indeed, that was a breaking change where icon must now be a Carbon icon Svelte component instead of an object

[benbucksch]

Indeed, we had <HeaderAction icon={ render: Close24, skeleton: false }>. Changing it to <HeaderAction icon=Close24> fixed it.

We couldn't see the cause due to the horrific error message from Sapper. grr at Sapper.

[benbucksch]

Tip for those who run into the same error message and find this bug report by Google: Your cause for this error message might be a different cause entirely. To find your cause, set a breakpoint, and look at the call stack.