Throwing an SSR error for svelte third-party packages with npm protocol

[dextermb]

Describe the bug

When hot reloading and initially spinning up pnpm run dev an error that causes a 500 message to be displayed to the client is seen when attempting to import a .svelte component from a node_module.

Reproduction

dextermb/bug-hero-icons-svelte-kit

Steps to reproduce:

• pnpm init svelte@next app
• pnpm i -D svelte-heroicons@npm:svelte-hero-icons
• Import icon into page
• pnpm run dev

Logs

18:29:23 [vite] Error when evaluating SSR module /src/routes/index.svelte:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/dexter/projects/svelte/hero-icons-svelte-kit/node_modules/.pnpm/[email protected]/node_modules/svelte-hero-icons/Icon.svelte
    at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
    at Loader.getFormat (internal/modules/esm/loader.js:102:42)
    at Loader.getModuleJob (internal/modules/esm/loader.js:231:31)
    at async ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:58:21)
    at async Promise.all (index 230)
    at async link (internal/modules/esm/module_job.js:63:9)

System Info

npx: installed 1 in 1.125s

  System:
    OS: macOS 12.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 50.17 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Brave Browser: 97.1.34.81
    Chrome: 99.0.4844.51
    Firefox: 94.0.1
    Safari: 15.3
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.30 
    @sveltejs/kit: next => 1.0.0-next.292 
    svelte: ^3.44.0 => 3.46.4 

Severity

serious, but I can work around it

Additional Information

Seems to work fine in @sveltejs/kit:1.0.0-next.285 but not 1.0.0-next.292.

---

Edit: After further investigation it seems like it could be down to aliased modules.

[dextermb]

cc: @JustinVoitel (maintainer of svelte-hero-icons)

[dextermb]

I've also noticed that I am able to notice a similar issue with files from within $lib:

21:20:02 [vite] Error when evaluating SSR module /src/lib/components/Navbar.svelte:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/dexter/projects/svelte/reg/node_modules/.pnpm/[email protected]/node_modules/svelte-hero-icons/Icon.svelte
    at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
    at Loader.getFormat (internal/modules/esm/loader.js:102:42)
    at Loader.getModuleJob (internal/modules/esm/loader.js:231:31)
    at async ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:58:21)
    at async Promise.all (index 230)
    at async link (internal/modules/esm/module_job.js:63:9)

Even though I am importing correctly:

<script>
	import Navbar from '$lib/components/Navbar.svelte';

	import '../tailwind.css';
</script>

<Navbar />
<slot />

---

Edit: It seems to be an issue with wherever is using an aliased package

[bluwy]

svelte-hero-icons need to export pkg.svelte to provide a hint for vite-plugin-svelte to handle Svelte libraries in SSR. vite-plugin-svelte would essentially add svelte-hero-icons to ssr.noExternal, so as a workaround for now you can do that too by setting config.kit.vite.ssr.noExternal: ['svelte-hero-icons'], but ideally the fix should be in svelte-hero-icons, so I'll close this issue for now.

[dextermb]

@bluwy This is definitely an edgecase issue. Please checkout the issue on the package's repo for extra context.

It seems like:

Installation

pnpm i -D svelte-heroicons@npm:svelte-hero-icons@next

Import

import { Icon, Home } from 'svelte-heroicons';

Seems to error whereas:

Installation

pnpm i -D svelte-hero-icons@next

Import

import { Icon, Home } from 'svelte-hero-icons';

Does not error.

[bluwy]

Ah looks like that's it. I didn't notice the pkg.svelte was added before publishing. This would be a bug in vite-plugin-svelte then, moving it over.

[dominikg]

here we compare the name field in package.json with the key in "dependencies": https://github.com/sveltejs/vite-plugin-svelte/blob/d0e32479761b812acfd53a7f6979ad75e7fc9bf0/packages/vite-plugin-svelte/src/utils/dependencies.ts#L85

this would not work for renamed packages. We have to validate it though because there may be other package.json files in the tree.

not sure why https://github.com/sveltejs/vite-plugin-svelte/blob/d0e32479761b812acfd53a7f6979ad75e7fc9bf0/packages/vite-plugin-svelte/src/utils/dependencies.ts#L75 didn't work though. Might be an issue with pnpm

@dextermb is removing one hyphen from svelte-hero-icons just a simplified reproduction or literally what you want to achieve?

[dextermb]

dextermb is removing one hyphen from svelte-hero-icons just a simplified reproduction or literally what you want to achieve

Hey, thanks for following up. Removing the single hyphen is what I wanted to achieve.

Background:

"Heroicons" branding is one word, whereas the package says it's two. The original author says he didn't realise the branding when he made the package haha...

[Spenhouet]

What is the best workaround until this is fixed?

I'm getting this error and can't use flowbite-svelte while this issue exists:

npm run build

> [email protected] build
> svelte-kit build

vite v2.9.9 building for production...
✓ 354 modules transformed.
'ChevronUpSolid' is not exported by node_modules/svelte-heros/index.js, imported by node_modules/flowbite-svelte/accordions/AccordionItem.svelte
file: /home/spe/svelte-gh-pages-quickstart2/node_modules/flowbite-svelte/accordions/AccordionItem.svelte:3:27
1: <script>import { slide } from 'svelte/transition';
2: import { onMount } from 'svelte';
3: import { ChevronDownSolid, ChevronUpSolid } from 'svelte-heros';
                              ^
4: export let id = '';
5: export let slotClass = 'p-5 border border-t-0 border-gray-200 dark:border-gray-700';
> 'ChevronUpSolid' is not exported by node_modules/svelte-heros/index.js, imported by node_modules/flowbite-svelte/accordions/AccordionItem.svelte
    at error (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:12659:16)
    at Module.traceVariable (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:13018:29)
    at ModuleScope.findVariable (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:11674:39)
    at FunctionScope.findVariable (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:6538:38)
    at ChildScope.findVariable (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:6538:38)
    at Identifier.bind (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:7600:40)
    at Property.bind (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:5369:23)
    at ObjectExpression.bind (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:5365:73)
    at AssignmentPattern.bind (/home/spe/svelte-gh-pages-quickstart2/node_modules/rollup/dist/shared/rollup.js:5369:23)

Here my full report with reproduction: https://github.com/themesberg/flowbite-svelte/issues/86

[Spenhouet]

svelte-hero-icons need to export pkg.svelte to provide a hint for vite-plugin-svelte to handle Svelte libraries in SSR. vite-plugin-svelte would essentially add svelte-hero-icons to ssr.noExternal, so as a workaround for now you can do that too by setting config.kit.vite.ssr.noExternal: ['svelte-hero-icons'], but ideally the fix should be in svelte-hero-icons, so I'll close this issue for now.

I did try to use this workaround by setting:

vite: {
    ssr: {
        noExternal: ['svelte-hero', 'svelte-hero-icons']
    }
},

but it did not work. I'm still getting the same error.

[dominikg]

@Spenhouet this issue is very specific about using the npm: protocol to rename dependencies (for no reason)

the library you posted svelte-heros does not export ChevronUpSolid, from what i can see there is a prop to get the solid variant. https://github.com/shinokada/svelte-heros#variation

I recommend you check out unplugin-icons, unocss with preset-icons or iconify's svelte integration instead as they are more customizable and you get access to all icons on https://icones.js.org

[Spenhouet]

@Spenhouet this issue is very specific about using the npm: protocol to rename dependencies (for no reason)

the library you posted svelte-heros does not export ChevronUpSolid, from what i can see there is a prop to get the solid variant. https://github.com/shinokada/svelte-heros#variation

I recommend you check out unplugin-icons, unocss with preset-icons or iconify's svelte integration instead as they are more customizable and you get access to all icons on https://icones.js.org

Thanks for the reply but I'm actually not using svelte-heros. I'm trying to use the flowbite-svelte UI framework which imports svelte-heros internally. So I'm not sure what my options are?

[dominikg]

bug them?

[Spenhouet]

bug them?

You mean?: https://github.com/themesberg/flowbite-svelte/issues/86

Sure, just wanted to make sure who's the one who needs to get active. To be honest, I don't know what needs to be done to fix this. Your suggestion sounded like they would need to move away from svelte-heros?

[dominikg]

or use it properly. Anyways please don't use this bug to chat. your messages are off-topic here. The svelte discord https://svelte.dev/chat can be used to ask for help ( #svelte ). From what i've seen the author of svelte-heros is active there too,