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

dextermb · 2022-03-05T18:33:53Z

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/svelte-hero-icons@4.0.3/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.

The text was updated successfully, but these errors were encountered:

dextermb · 2022-03-05T18:48:01Z

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

dextermb · 2022-03-05T21:22:11Z

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/svelte-hero-icons@4.0.3/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 · 2022-03-06T02:31:32Z

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 · 2022-03-07T10:52:10Z

@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 · 2022-03-07T12:22:42Z

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 · 2022-03-23T22:08:36Z

here we compare the name field in package.json with the key in "dependencies":

vite-plugin-svelte/packages/vite-plugin-svelte/src/utils/dependencies.ts

Line 85 in d0e3247

if (pkg && pkg.name === dep) {

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

vite-plugin-svelte/packages/vite-plugin-svelte/src/utils/dependencies.ts

Line 75 in d0e3247

const pkg = localRequire(pkgJson);

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 · 2022-03-23T22:49:33Z

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 · 2022-06-01T18:39:05Z

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

> flowbite-svelte-starter@0.1.1 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: themesberg/flowbite-svelte#86

Spenhouet · 2022-06-01T18:42:17Z

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 · 2022-06-01T18:49:44Z

@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 · 2022-06-01T18:53:18Z

@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 · 2022-06-01T18:53:37Z

bug them?

Spenhouet · 2022-06-01T18:57:28Z

bug them?

You mean?: themesberg/flowbite-svelte#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 · 2022-06-01T18:58:56Z

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,

Rich-Harris added the bug Something isn't working label Mar 5, 2022

bluwy closed this as completed Mar 6, 2022

dextermb mentioned this issue Mar 6, 2022

Resolve issue with SSR in Svelte Kit JustinVoitel/svelte-hero-icons#22

Closed

bluwy reopened this Mar 7, 2022

bluwy transferred this issue from sveltejs/kit Mar 7, 2022

bluwy changed the title ~~Throwing an SSR error for svelte third-party packages~~ Throwing an SSR error for svelte third-party packages with npm protocol Mar 7, 2022

dominikg added the edge-case label Mar 23, 2022

Spenhouet mentioned this issue Jun 1, 2022

Error when trying to build with adapter-static themesberg/flowbite-svelte#86

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

dextermb commented Mar 5, 2022 •

edited

dextermb commented Mar 5, 2022

dextermb commented Mar 5, 2022 •

edited

bluwy commented Mar 6, 2022

dextermb commented Mar 7, 2022

bluwy commented Mar 7, 2022

dominikg commented Mar 23, 2022

dextermb commented Mar 23, 2022

Spenhouet commented Jun 1, 2022

Spenhouet commented Jun 1, 2022

dominikg commented Jun 1, 2022

Spenhouet commented Jun 1, 2022

dominikg commented Jun 1, 2022

Spenhouet commented Jun 1, 2022 •

edited

dominikg commented Jun 1, 2022

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

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

Comments

dextermb commented Mar 5, 2022 • edited

Describe the bug

Reproduction

Logs

System Info

Severity

Additional Information

dextermb commented Mar 5, 2022

dextermb commented Mar 5, 2022 • edited

bluwy commented Mar 6, 2022

dextermb commented Mar 7, 2022

bluwy commented Mar 7, 2022

dominikg commented Mar 23, 2022

dextermb commented Mar 23, 2022

Spenhouet commented Jun 1, 2022

Spenhouet commented Jun 1, 2022

dominikg commented Jun 1, 2022

Spenhouet commented Jun 1, 2022

dominikg commented Jun 1, 2022

Spenhouet commented Jun 1, 2022 • edited

dominikg commented Jun 1, 2022

dextermb commented Mar 5, 2022 •

edited

dextermb commented Mar 5, 2022 •

edited

Spenhouet commented Jun 1, 2022 •

edited