[CHORE]: update astro and astro sst

[slackermorris]

• Upgrading 2.0 to 3.0: https://docs.astro.build/en/guides/upgrade-to/v3/
• Learning what is available on 3.0: https://astro.build/blog/astro-3/

[slackermorris]

Here we go. Lol.

[slackermorris]

I should really upgrade to Node 18.

[slackermorris]

Big upgrades.

[slackermorris]

Perhaps something else to be concerned about.

[slackermorris]

I also updated sst:

[slackermorris]

[slackermorris]

Eeeep. Think we are going to have some difficulties here.

It is probably a good idea to figure out the relevance of that vite plugin.

[slackermorris]

If I comment everything out on the page, then things start working again.

[slackermorris]

I returned the StarMenu component and stripped it back to nothing and I still noticed the same errors. So, seems like something to do with React.

[slackermorris]

Notice that the Header component does not cause the same error. The only difference is that it does not import React.

[slackermorris]

OK. It has something to do with the client:load tag we pass the component.

[slackermorris]

This might be of some help.

• https://github.com/withastro/astro/issues/8314

[slackermorris]

I have been tasked with setting up a code space so that I can replicate the issue.

[slackermorris]

I am going to try to nuke the project before trying to set up a code space.

[slackermorris]

I have noticed this error in the console.

This might come in handy later on when I am attempting to solve for the above: https://github.com/Accudio/async-alpine/issues/27#issuecomment-1435703790

This offers a really handy explanation: https://stackoverflow.com/questions/69300341/typeerror-failed-to-fetch-dynamically-imported-module-on-vue-vite-vanilla-set

[slackermorris]

Network trace for my current broken branch feature/upgrade-astro-and-introduce-view-transitions.

[slackermorris]

master network trace.

[slackermorris]

I did a git bisect.

Something has gone waaaaay skew whiff.

[slackermorris]

The only thing that seems culprit is this. Green being what I added to this, the broken commit.

[slackermorris]

OK. Let's try again and see if we can upgrade the astro sst integration.

1. Check out previous commit.
2. Branch off this.
3. Try to upgrade the astro sst integration.

[slackermorris]

This is what I am using to upgrade sst to v.2.35.0.

• https://github.com/sst/sst/releases

[slackermorris]

Cool. Running that resulted in this:

[slackermorris]

Alright. We are back to square one.

I am going to try bumping a version higher. I wonder if 2.35.0 actually supports Astro 3.0?

[slackermorris]

This feels interesting: https://www.joshmedeski.com/posts/upgrading-to-astro-v3/

[slackermorris]

Lol. 2.36.1 works.

[slackermorris]

I am going to try replicate the issue using StackBlitz. I found an Astro template here.

[slackermorris]

Wait. What the fuck. 2.35.0 is now working on my local.

I can't explain this at all.

[slackermorris]

OK scratch that I did a npm i and it has bonked again.

[slackermorris]

Here is my Stackblitz.

I can't seem to replicate my issue. Everything seems to be working fine.

I do know that this plugin is my issue.

[slackermorris]

This was my last Google: https://www.google.com/search?q=vitest+@vitejs/plugin-react+can't+detect+preamble.+something+is+wrong&oq=react+can't+detect+preamble+&sourceid=chrome&ie=UTF-8

[slackermorris]

I nuked the node_modules and the package-lock. I'll see what that does.

I can't get a replication in that StackBlitz sandbox. Maybe I try for a new project on my machine?

[slackermorris]

Looks like I got it to work.

![Uploading Screen Shot 2023-11-17 at 9.12.32 AM.png…]()

[slackermorris]

Screenshot for above.

[slackermorris]

🔦 THIS WORKS

1. "sst": "2.35.0", "astro-sst": "2.35.0" / "@astrojs/react": "^2.2.1" "astro": "^3.5.5".

• https://stackblitz.com/edit/github-xfxabj-zopfch?file=package.json

{
  "dependencies": {
    "@astrojs/react": "^2.2.1",
    "astro": "^3.5.5"
  },
  "devDependencies": {
    "astro-sst": "2.35.0",
    "aws-cdk-lib": "2.101.1",
    "constructs": "10.2.69",
    "sst": "2.35.0"
  }
}

2. "sst": "2.36.1", "astro-sst": "2.36.1" / "@astrojs/react": "^3.0.4" "astro": "^3.5.5".

• https://stackblitz.com/edit/github-xfxabj-mnfypb?file=package.json

This is curious because @astro/react 3.0.4 does not play nice with sst 2.35.0.

{
  "dependencies": {
    "@astrojs/react": "^3.0.4",
    "astro": "^3.5.5"
  },
  "devDependencies": {
    "astro-sst": "2.36.1",
    "aws-cdk-lib": "2.101.1",
    "constructs": "10.2.69",
    "sst": "2.36.1"
  }
}

DOES IT WORK IF I BUMP THE REACT INTEGRATION?

WHAT HAPPENS IF I BUMP THE SST INTEGRATION?

WHAT HAPPENS IF ASTRO IS BUMPED LOWER THAN 3.5.5?

[slackermorris]

🧧 THIS DOES NOT WORK

{
  "name": "bad-reviews-make-good-movies",
  "type": "module",
  "version": "0.0.1",
  "engines": {
    "node": ">=18.14.1"
  },
  "scripts": {
  },
  "dependencies": {
    "@astrojs/react": "^3.0.4",
    "astro": "^3.4.3",
  },
  "devDependencies": {
    "astro-sst": "2.35.0",
    "aws-cdk-lib": "2.101.1",
    "constructs": "10.2.69",
    "sst": "2.35.0",
  }
}

1. "sst": "2.35.0", "astro-sst": "2.35.0" / "@astrojs/react": "^3.0.4" "astro": "^3.5.5".

It's the @astrojs/react integration which is causing the issue.

• https://stackblitz.com/edit/github-xfxabj-3zdpmg?file=src%2Fpages%2Findex.astro

{
  "dependencies": {
    "@astrojs/react": "^3.0.4",                                 <----- THIS IS THE NOTICEABLE DIFFERENCE
    "astro": "^3.5.5"
  },
  "devDependencies": {
    "astro-sst": "2.35.0",
    "aws-cdk-lib": "2.101.1",
    "constructs": "10.2.69",
    "sst": "2.35.0"
  }
}

[slackermorris]

Basically prove that it is the @astrojs/react integration. Astro are the maintainers but the conflict is with sst so perhaps I should raise the issue to both of them.

[slackermorris]

Cool. Solution is to bump everything to its most recent version.

[slackermorris]

This PR took care of the @astrojs/react astro-sst issues.