Error of `Unknown file extension ".svelte"` in SvelteKit

[alanko0511]

Describe the bug
I followed steps in the SvelteKit installation, but when I run npm run dev, whatever what components are used, there is always an error of Unknown file extension ".svelte.... After the first load, the issue seems to be gone, but if I run npm run build and npm run preview to build the website, the error happens with 500 Cannot find package '/.../node_modules/@smui/button/'

For example when I used buttons, the error is:
Unknown file extension ".svelte" for /.../node_modules/@smui/button/dist/Button.svelte

To Reproduce

1. npm init svelte@next users Which Svelte app template? > Skeleton project, Use TypeScript? Yes
2. Follow steps here without dark mode support.
3. Replace content in index.svelte with button example svelte

package.json

{
  "name": "project",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
    "prepare": "npm run smui-theme",
    "smui-theme": "smui-theme compile static/smui.css -i src/theme"
  },
  "devDependencies": {
    "@smui/button": "^6.0.0-beta.4",
    "@smui/card": "^6.0.0-beta.4",
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "smui-theme": "^6.0.0-beta.4",
    "svelte": "^3.44.0",
    "svelte-check": "^2.2.6",
    "svelte-preprocess": "^4.9.4",
    "tslib": "^2.3.1",
    "typescript": "^4.4.3"
  },
  "type": "module"
}

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter(),

		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte'
	}
};

export default config;

[BlockListed]

Same issue here!

[benmccann]

@alanko0511 can you create a repository with the code in the end state per your instructions and post it here? We get quite a lot of issue reports, so it's too hard for us to do for every single issue that comes in. Thanks!

[alanko0511]

@alanko0511 can you create a repository with the code in the end state per your instructions and post it here? We get quite a lot of issue reports, so it's too hard for us to do for every single issue that comes in. Thanks!

Sure, here is a simple repo to reproduce the issue:
https://github.com/alanko0511/smui-bug

[benmccann]

This library is not packaged in a valid manner. There's no main in the package.json. It's also recommended to have a svelte field. If I add those locally then it works:

  "main": "dist/index.js",
  "module": "dist/index.js",
  "svelte": "dist/index.js",

[alanko0511]

This library is not packaged in a valid manner. There's no main in the package.json. It's also recommended to have a svelte field. If I add those locally then it works:

  "main": "dist/index.js",
  "module": "dist/index.js",
  "svelte": "dist/index.js",

I tried and it works great. It seems that the temporary solution is to add these fields to all components installed inside @smui.

[kwangure]

@benmccann Is this documented somewhere (docs/issue/PR)? Somewhere I can read further details (e.g What exactly is in the dist/index.js? What if I have more than one index.js?

Suppose, I have a Svelte library like svelte-material-ui. I'd like to do this in my package.json:

"exports": {
    "./package.json": "./package.json",
	"./components/Dropdown": "./components/Dropdown/index.js",
	"./components/Select": "./components/Select/index.js",
    "./style.css": "./deep/folder/style.css"
}

Then Dropdown exports its dependents such as a popup menu and button, while Select exports select and option components. How does the "exports" field fit in with the "main"/"svelte": "dist/index.js" field? I'm using svelte-kit package if that makes a difference.

Can I import a .svelte components independently without going through an index.js?

[benmccann]

If you provide an exports then main and module are not used

[kwangure]

I have an "exports" field in my package and I'm still getting this error. I'll investigate further. If there's something to report, I'll do it in a relevant repo to avoid derailing this issue.

[hperrin]

I've found a workaround for this.

The following in config.kit in the svelte.config.js file seems to do the trick:

vite: {
  ssr: {
    noExternal: [/^@smui(?:-extra)?\//],
  },
},