SSR not working when react integration is added

[LeFede]

Hello!

I have this static page: (/)

and this SSR page: (/eventos-gratuitos)

they work fine but as soon as I use react js on the project

the SSR page stops working

Im not sure why, it works on local though.
Any ideas on how to solve this? it's driving me crazy
thanks in advance!

[alexnguyennz]

Hi do you get any errors in console or your Amplify SSR logs? Does that SSR page have prerender = false?

[LeFede]

Hi do you get any errors in console or your Amplify SSR logs? Does that SSR page have prerender = false?

@alexnguyennz Srry I didn't put logs in the original post, I didn't know where to find them but I finally found them.

seems like it doesn't know what react is which is weird since I have it on dependencies

and yes! the SSR page has:

the not SSR page:

I created the app with pnpm create astro, created that SSR page and added the adapter , also react integration... nothing more than that just to see if it works properly.

[alexnguyennz]

Thanks for that - can you share the repo or create one that I can quickly deploy to Amplify? I'm away at the moment.

[LeFede]

Thanks for that - can you share the repo or create one that I can quickly deploy to Amplify? I'm away at the moment.

@alexnguyennz sure. This is exactly the repo of the screenshots and this is the deploy.
Thank you again for helping!

[LeFede]

@alexnguyennz I just tried adding svelte instead of react and it works. Something is wrong with only react but Im not sure what...
(forget about the deploy link, I'm doing more tests and had to remove it since I can only have one live)

[LeFede]

I'm using pnpm and I have to use this amplify.yml. Maybe I have to change the outdir? or something like that?

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm i -g pnpm
        - pnpm config set store-dir .pnpm-store
        - pnpm i
    build:
      commands:
        - env >> .env
        - pnpm run build
        - mv .env ./.amplify-hosting/compute/default/.env
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - "**/*"
  cache:
    paths:
      - .pnpm-store/**/*

[LeFede]

More info:

With a working svelte integration, I installed the library swiper and it gives the same error given with react...

21:44:41 [ERROR] Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'swiper' imported from /var/task/chunks/index_Dwwy3-g_.mjs

It is weird that in the root page which is static, swiper works properly. But when I go to the SSR page (I didn't put swiper component there), it shows the same as the first post (Just a empty page - doesn't render anything)

[alexnguyennz]

There seems to be an issue now with pnpm deployments with the default build spec example. If I test your project with an npm config (from the repo readme), the SSR page works.

For now, if you want to keep using pnpm in dev but use npm in production, you can use a config like:

version: 1
frontend:
  phases:
    preBuild:
      commands:
	- npm install
        - npm ci
    build:
      commands:
        - env >> .env
        - npm run build
        - mv node_modules ./.amplify-hosting/compute/default
        - mv .env ./.amplify-hosting/compute/default/.env
  artifacts:
    baseDirectory: .amplify-hosting
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Copying the node_modules in the pnpm config (similar to npm/Yarn) results in a build output too large issue on my end - will need to do some more testing and try to find a better solution.

[tapnicom]

@alexnguyennz we run into same issue now with react and tried your solution with npm but it did not work.
See Build error below:

2024-08-22T16:30:14.418Z [ERROR]: !!! CustomerError: The size of the build output (292846482) exceeds the max allowed size of 230686720 bytes. Please reduce the size of your build output (/codebuild/output/src3799594688/src/astro-aws-amplify/demos/hybrid/.amplify-hosting/compute/default) and try again.

Do you have any other ideas on how to fix this or?

It seems like astro team already had some temp folder for build
withastro/astro#4736

[alexnguyennz]

Not at the moment - the adapter relies on Astro's Node.js adapter to build for SSR which requires the node modules folder, and Amplify's build size limit is very small compared to other hosting providers. I still need to find out why pnpm has issues now but unfortunately getting support for this from AWS is a bit difficult.

There are some things you can do to try and reduce the overall size.

[johnajacob]

Much appreciated. I'm currently stuck with the same issue using pnpm.

[alexnguyennz]

@johnajacob Can you try a modified build of:

build:
      commands:
        - env >> .env
        - pnpm run build
        - mv node_modules ./.amplify-hosting/compute/default
        - mv .env ./.amplify-hosting/compute/default/.env

Moving the node_modules works (previously not required with using pnpm stores but now it seems it is).

Note this may result in the build size issue.

@tapnicom Have found another issue related to the build problem aws-amplify/amplify-hosting#3863 Let me know if your project is public, I can have a look at seeing if there's anything that can be removed after the build to drop the size down. Otherwise with Amplify's size limit, I really don't know there's much I can do unfortunately.

[johnajacob]

Thanks @alexnguyennz.

I will create a fresh Astro project with React and a library like Shadcn and, maybe there's something you can spot that I don't. If I remember correctly, last time I tried, I ran into the size issue very quickly. I know there's not much to do on this end, and the size limit should be increased, but it's frustrating.

[tapnicom]

@alexnguyennz pnpm build works
but we are getting such errors with pnpm

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'clsx' imported from /var/task/chunks/_@astrojs-ssr-..

when we try to build with npm, we get size limit issue..

We are also not using next but just fork of your blog repo where we tried to add other libraries like react etc.

It seems like Vercel is default path for astro projects?

[mauerbac]

I wonder if the issue is ouput: hybrid instead of output: server in your astro.build.config

[camiloux]

I encounter a similar issue with an Astro website that integrates a Svelte component. I had to reduce the size because of Amplify limitations by changing from npm to pnpm. I encounter the issue in a specific page that loads a Svelte componente using client:load. This is not working on Amplify. If I change it to client:only="svelte" it work's properly, though i loose all the benefits prerendering my svelte app.

This doesn't work:
<FormContacto client:load />
This works:
<FormContacto client:only="svelte" />

Any suggestions or workarounds to keep prerendering while making client:load work would be greatly appreciated.