<Step> is not a valid SSR component in SvelteKit

[hshoob]

The Step component gives the below error:

`<Step> 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: <Step> 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 Module.validate_component (/node_modules/svelte/internal/index.mjs:1747:15)
    at Object.default (/src/routes/+page.svelte:189:37)
    at Stepper.svelte:20:49
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
    at eval (/src/routes/+page.svelte:187:86)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
    at Object.default (root.svelte:44:39)
    at eval (/src/routes/+layout.svelte:13:47)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
    at root.svelte:38:37`

Is there a way to SSR this? Below is the package.json:

{
	"name": "sveltekit-skeleton-demo",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"package": "svelte-kit package",
		"preview": "vite preview",
		"check": "svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
		"format": "prettier --write --plugin-search-dir=. ."
	},
	"devDependencies": {
		"@brainandbones/skeleton": "^0.30.7",
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/kit": "next",
		"@tailwindcss/aspect-ratio": "^0.4.0",
		"@tailwindcss/forms": "^0.5.2",
		"@tailwindcss/line-clamp": "^0.4.0",
		"@tailwindcss/typography": "^0.5.4",
		"@types/cookie": "^0.5.1",
		"@typescript-eslint/eslint-plugin": "^5.27.0",
		"@typescript-eslint/parser": "^5.27.0",
		"autoprefixer": "^10.4.7",
		"eslint": "^8.16.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-svelte3": "^4.0.0",
		"postcss": "^8.4.14",
		"postcss-load-config": "^4.0.1",
		"prettier": "^2.6.2",
		"prettier-plugin-svelte": "^2.7.0",
		"svelte": "^3.46.0",
		"svelte-check": "^2.7.1",
		"svelte-preprocess": "^4.10.7",
		"tailwindcss": "^3.1.5",
		"tslib": "^2.3.1",
		"typescript": "^4.7.4",
		"vite": "^3.0.0"
	},
	"type": "module",
	"dependencies": {
		"@fontsource/fira-mono": "^4.5.0",
		"cookie": "^0.4.1"
	}
}

The import { Step } from '@brainandbones/skeleton' gives error, so I manually added NavItem component to /node_modules/@brainandbones/skeleton/index.d.ts.

The import { NavItem } from '@brainandbones/skeleton' also gives error, added it manually to both index.js and index.d.ts in /node_modules/@brainandbones/skeleton/.

[hshoob]

Ok, it got fixed, I had to manually import { Step } component in /node_modules/@brainandbones/skeleton/index.js too.

[endigo9740]

Hi @hshoob, thanks for reporting this issue. It looks like we've missed a couple export ins index.js.

A couple things to note:

• I'll create a new ticket to add missing exports in index.js for Step and anything else.
• In the next release, the NavItem component will be merged into ListItem. This is of course a breaking change so watch for that! This will be detailed all release notes.

Modifying the contents of your node_modules is typically a bad idea. Those updates will get flushed the next time you update your packages of course. So what I might suggest is importing the component using the FULL path temporarily for now. For Step that would be:

import Stepper from '@brainandbones/skeleton/Stepper/Step.svelte';

Even when index.js is updated in the next release this will continue to work for you. You should be able switch to the documented shorter import syntax. Of course do whatever works for you, but this might be a bit safer if this is an app you plan to maintain for a while.

[endigo9740]

See: #103

[hshoob]

@endigo9740 thanks for the above. I totally agree it's bad to get things directly from node_modules. I just came across Skeleton and playing with it. It's great! Once the above changes are implemented I'll use it in my app, so will be on the lookout.

Also, would be good to have a listbox similar to the tailwind headlessui listbox in Skeleton. If not anytime soon, can you propose an implementation with Skeleton, please?

Thanks!

[endigo9740]

Sounds good! I'd say keep an eye on the releases section on Skeleton and our social channels to know when that goes live. Twitter, Discord, etc.

I see the value of what Tailwind is doing with the Listbox, but right now we're taking a pretty hard stance against replicating form input components that exist that already have a solid native equivalent. Read the text at the top of this page for a better explanation:
https://skeleton.brainandbonesllc.com/guides/forms

I think you most folks would be better served using a native <select> component instead. I completely understand the limitations in styling native inputs though. However, it is technically possible to build a relative stand-in for this combining our Menu component with a selection List. You would probably use an input in place of the Buttons we show in our menu examples. The "target" component comes from a slot so it can be anything.

That said, we're building Skeleton for the community, not just for myself. So I welcome feedback like this. I'd highly encourage you view our roadmap and the discussion thread for it here. Chime in with this (or any other) suggestions you have. The team will be reviewing this soon and it'll help steer priority for us:

#79

Thanks!

[hshoob]

Sounds good! I'd say keep an eye on the releases section on Skeleton and our social channels to know when that goes live. Twitter, Discord, etc.

This is great, thanks, @endigo9740 !

Read the text at the top of this page for a better explanation:
https://skeleton.brainandbonesllc.com/guides/forms

I read that when I was going through the docs, and I totally agree. It's just that sometimes we all get tempted by custom styling. :)