#Basic example fails ([astro-island] Error hydrating)

47 messages · Page 1 of 1 (latest)

cedar tide
#

So, following the stackblitz: https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-svelte?file=README.md

I've recreated the same example with a minor change:

<Counter client:only="svelte" />

After running npm run build and trying to serve files from /dist directory, I get the following error:

[astro-island] Error hydrating /_astro/Counter.CMs1pxZ2.js TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:5500/_astro/Counter.CMs1pxZ2.js

lofty iris
#

Second link doesn't work btw

cedar tide
#

Second link is part of the console error

lofty iris
#

oh lol

#

Can I see your package.json?

cedar tide
#

{
"name": "client",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"<@&1055234544183287879>/check": "^0.9.4",
"<@&1055234544183287879>/svelte": "^5.7.2",
"astro": "^4.16.9",
"typescript": "^5.6.3"
}
}

lofty iris
#

Can you try installing svelte?

#

the example project has both svelte and astrojs/svelte as dependencies

#

also if you put your code in 3 backticks its easier to read

Like this
cedar tide
#

Ok, I've installed svelte globally via npm i -g svelte still the same error.

lofty iris
#

I dont think you need it globally

#

npm i svelte should be fine

cedar tide
#

It just fails to import that auto generated file

lofty iris
#

This is the package.json from the example project

{
  "name": "@example/framework-svelte",
  "type": "module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/svelte": "^5.7.3",
    "astro": "^4.16.10",
    "svelte": "^4.2.19"
  }
}
cedar tide
#

Copied, removed node_modules, ran npm i again, used different browser, still the same. Note that it works normally with npm run dev. It fails when I run npm run build and try to serve the dist folder.

lofty iris
#

interesting, let me try and make a minimal version locally

cedar tide
#

You can use my project (it is minimal reproduction), and just change package versions if you think those are troublemakers

lofty iris
#

I could but I don't have your project 😛

cedar tide
lofty iris
#

Oh I'm not gonna DL that sorry, would be happy to look through a repository though

cedar tide
#

Understood. Give me a min.

lofty iris
#

I already set up an example on my end

#

was able to run it both in dev and build it fine

#

So yeah getting a look at the repo would be best, seems like something specific to your setup

cedar tide
#

The build passes normally, the site is served, but when you go to the address... That's the issue. I'm setting up some ssh keys here to get access to git account. I'll upload to the repo soon

lofty iris
#

Do you have a link to the deployed site handy? perhaps something is revealed in the browser

cedar tide
#

Nah, I'm using vscode live server. It's just for basic testing. Everything else works fine, until I get to framework components

lofty iris
#

Interesting, I wonder if that is part of the issue

Any chance you could deploy it somewhere free and see if it actually has the issue in production or if this is a weird VS code thing

cedar tide
#

I think I have a netlify account. But that's gonna take some time, I forgot all creds. I will try though. I also have a small .NET web server (also local) and it didn't work there too.

#

Ooh crap. Uploaded the "real" thing not minimal repro

#

Now it's okay. The previous version required that server to work

lofty iris
#

Looks fine to me

#

I assume the GET request is failing since I don't know anything about your API

cedar tide
#

Pls, just pull latest

#

I've committed wrong version initially, with a bunch of additional stuff that doesn't involve svelte

#

Now I have uploaded one without backend

lofty iris
#

works fine

cedar tide
#

Will check. Thanks for testing it out

lofty iris
cedar tide
#

Huh... Deployed to Netlify, it works. Downloaded deployment and ran it with vs code live server. Works... I'll have to check what's the difference.

cedar tide
#

Jesus Christ. Vscode needs to be opened in the /dist folder. .NET app had problems with serving files due to some weird .NET behaviour I won't write here.

This one is solved.