Error when trying to build with adapter-static

[Spenhouet]

Describe the bug
When I try to use the adapter-static to build a svelte page, I get the following error from inside the flowbite-svelte package:

'ChevronUpSolid' is not exported by node_modules/svelte-heros/index.js, imported by node_modules/flowbite-svelte/accordions/AccordionItem.svelte

To Reproduce
Steps to reproduce the behavior:

1. Clone or download this flowbite-svelte quickstart project: https://github.com/shinokada/flowbite-svelte-starter
2. Execute npm install
3. Execute npm build, this should work just fine.
4. Go into the svelte.config.js and add the import import static_adapter from '@sveltejs/adapter-static'; and set the adapter adapter: static_adapter(),.
5. Execute npm build, this now results in the following error.

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)

Code samples

See the reproduction above.

Expected behavior

The build should work just fine.

Desktop (please complete the following information):

• Edge
• Version 101.0.1210.53

Additional context

I remember having similar import issues with a previous project and it had to do with different import styles and ES modules vs. cjs. Maybe that's also the issue here.

[Spenhouet]

This section in the SvelteKit FAQ might be relevant: https://kit.svelte.dev/faq#packages

How do I fix the error I'm getting trying to include a package?

Vite's SSR support has become fairly stable since Vite 2.7. Most issues related to including a library are due to incorrect packaging.

Libraries work best with Vite when they distribute an ESM version and you may wish to suggest this to library authors. Here are a few things to keep in mind when checking if a library is packaged correctly:

exports takes precedence over the other entry point fields such as main and module. Adding an exports field may not be backwards-compatible as it prevents deep imports.
ESM files should end with .mjs unless "type": "module" is set in which any case CommonJS files should end with .cjs.
main should be defined if exports is not. It should be either a CommonJS or ESM file and adhere to the previous bullet. If a module field is defined, it should refer to an ESM file.
Svelte components should be distributed entirely as ESM and have a svelte field defining the entry point.
It is encouraged to make sure the dependencies of external Svelte components provide an ESM version. However, in order to handle CommonJS dependencies vite-plugin-svelte will look for any CJS dependencies of external Svelte components and ask Vite to pre-bundle them by automatically adding them to Vite's optimizeDeps.include which will use esbuild to convert them to ESM. A side effect of this approach is that it takes longer to load the initial page. If this becomes noticable, try setting experimental.prebundleSvelteLibraries: true in svelte.config.js. Note that this option is experimental.

If you are still encountering issues we recommend checking the list of known Vite issues most commonly affecting SvelteKit users and searching both the Vite issue tracker and the issue tracker of the library in question. Sometimes issues can be worked around by fiddling with the optimizeDeps or ssr config values.

[Spenhouet]

This might be a similar or the same issue: sveltejs/vite-plugin-svelte#293

Not sure yet if that means there is nothing for flowbite to fix and it's on vite-plugin-svelte to fix that.

[Spenhouet]

So based on @dominikg's input in sveltejs/vite-plugin-svelte#293, this is an issue on flowbite-svelte's side.

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

[shinokada]

Thank you for your report.
I updated svelte-heros and it was a BREAKING CHANGE.

Now you can use it as followings:

<script>
  import { Cog } from 'svelte-heros'
</script>

<Cog />
<Cog variation="solid" />

I updated Flowbite-Svelte. Please update it:

npm i -D flowbite-svelte@latest

Thanks again for your issue.

[Spenhouet]

@shinokada It builds now! Thanks for your fast fix. Very nice 👍