Go Pro Sign Up Login

Buy Now and unlock this series

$

49

.99

$

39

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Svelte, Lit, Vue and Solid in Astro

In this video, we will take a look at using different frontend frameworks in Astro all at the same time (or separately).

Downloads

Become a pro to download code and videos

Comments

Mike

6 months ago

Is anybody else running into an issue adding Svelte components, like the tutorial in 14 (full error msg below)?

If I install using:
npm install --save-dev @astrojs/renderer-svelte

I noticed the version number that gets installed in my package.json is: "@astrojs/renderer-svelte": "^0.2.1",

This is different from what works in the Exercise 14 folder, which is: "@astrojs/renderer-svelte": "^0.1.2",

If I blow away my node_modules folder and package-lock file... then manually add version 0.1.2, it'll work.

This is the full error msg:

 $ npm run dev

> @example/blog@0.0.1 dev
> astro dev

[19:43:20] [snowpack] Hint: run "snowpack init" to create a project config file. Using defaults...
[19:43:20] [snowpack] Welcome to Snowpack! Because this is your first time running
this project, Snowpack needs to prepare your dependencies. This is a one-time step
and the results will be cached for the lifetime of your project. Please wait...
[19:43:21] [snowpack] + astro/dist/internal/__astro_component.js@0.20.12
[19:43:25] [snowpack] └── shorthash@0.0.2 (dedupe)
[19:43:25] [snowpack] └── estree-util-value-to-estree@1.3.0 (dedupe)
[19:43:25] [snowpack]   └── is-plain-obj@3.0.0
[19:43:26] [snowpack] └── astring@1.8.1 (dedupe)
[19:43:26] [snowpack] + astro/dist/internal/element-registry.js@0.20.12
[19:43:27] [snowpack] + astro/dist/internal/fetch-content.js@0.20.12
[19:43:29] [snowpack] + astro/dist/internal/__astro_slot.js@0.20.12
[19:43:31] [snowpack] + astro/dist/internal/__astro_hoisted_scripts.js@0.20.12
[19:43:33] [snowpack] + prismjs@1.25.0
[19:43:34] [snowpack] + @astrojs/renderer-preact/server@0.2.2
[19:43:35] [snowpack] └── preact@10.6.1 (dedupe)
[19:43:35] [snowpack] └── preact-render-to-string@5.1.19 (dedupe)
[19:43:36] [snowpack] + @astrojs/renderer-preact/client@0.2.2
[19:43:37] [snowpack] + preact/jsx-runtime@10.6.1
[19:43:38] [snowpack] + @astrojs/renderer-svelte/server.js@0.2.1
[19:43:39] [snowpack] └── svelte/internal@3.44.2
[19:43:39] [snowpack] + @astrojs/renderer-svelte/client.js@0.2.1
[19:43:40] [esinstall] Failed to load ../Wrapper.svelte
  Try installing rollup-plugin-svelte and adding it to Snowpack (https://www.snowpack.dev/tutorials/svelte)
/Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/esinstall/lib/index.js:374
            throw new Error(FAILED_INSTALL_MESSAGE());
                  ^

Error: Install failed.
    at Object.install (/Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/esinstall/lib/index.js:374:19)
    at async Object.installPackages (/Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/snowpack/lib/cjs/sources/local-install.js:24:25)
    at async /Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/snowpack/lib/cjs/sources/local.js:558:39
    at async PackageSourceLocal.buildPackageImport (/Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/snowpack/lib/cjs/sources/local.js:454:30)
    at async PackageSourceLocal.prepare (/Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/snowpack/lib/cjs/sources/local.js:227:13)
    at async startServer (/Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/snowpack/lib/cjs/commands/dev.js:240:9)
    at async createSnowpack (file:///Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/astro/dist/runtime.js:283:14)
    at async createRuntime (file:///Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/astro/dist/runtime.js:303:7)
    at async dev (file:///Users/mike.laurel/www/levelup/astro/astro-for-everyone-code/13ClientSideJavaScript/node_modules/astro/dist/dev.js:17:19)

Want to join the conversation?

Become a Pro member today!