Adding to this when I push the code to cloudflare with the adapter I can see that it gets built with zero errors but none of the routes work other than my 404 page which is made using .astro files. Looking at the github I can see there are some issues right now with ts files but surely there is no way that they just cannot be used rn??
#Unable to build tsx / jsx
8 messages · Page 1 of 1 (latest)
Can you provide repo with that issue?
It is private right now, I can invite you to it? It is weird as everything builds fine just nothing that uses react renders.
have a look at your build script, are you using astro check there? Currently there is a bug so if you are react, just remove the astro check from your buold script and try again.
after doing some inspection I can see that something is causing my index to not render correctly the other routes such as the /contact and 404 something like /123 workes on my site.
https://ic3.lol/
---
import Layout from '../layouts/Layout.astro';
import NavigationBar from '../components/Navbar.tsx';
import HeroSection from '../components/Hero.tsx';
import Skills from '../components/Skills.tsx';
import WorkedOn from '../components/WorkedOn';
import ContactMe from '../components/ContactMe';
---
<Layout title="IC3 - Software Engineer" description="Software alchemist, developer, and lifelong learner. Transforming ideas into digital magic." siteName='IC3 Portfolio'>
<main>
<NavigationBar />
<HeroSection name='IC3'/>
<Skills />
<WorkedOn />
<ContactMe page='Home' />
</main>
</Layout>
is my index page
done some testing and I can see that it is my worker on component
// technologies
import React from "react";
import ThingsIWorkedOn from "../helpers/PreviousWork";
import { Technologies, type WorkedOnProps } from "../helpers/types";
const WorkedOnCard: React.FC<WorkedOnProps<Technologies>> = ({
title,
description,
link,
image,
technologies,
linkKey,
}) => {
return (
<div className="flex cursor-pointer flex-col rounded-md border border-neutral-700 p-4 transition-all duration-300 hover:border-neutral-400">
<div className="flex flex-col">
<h3 className="text-sm font-semibold text-neutral-100">{title}</h3>
<p className="text-xs text-neutral-300">{description}</p>
</div>
<img
className="rounded-md mt-4 max-h-[200px] object-cover"
src={image.src}
width={image.width}
height={image.height}
/>
<div className="mt-2 text-neutral-100 flex flex-row gap-x-2 flex-wrap">
<div className="flex flex-col gap-y-1 text-xs w-full">
<div className="flex flex-row justify-between items-center">
<p className="text-neutral-300 sm:text-md text-lg">
Technologies used:
</p>
{link && (
<a
className="text-medium underline underline-offset-2 decoration-2 decoration-purple-500 hover:text-purple-500 transition-all ease-in-out duration-500"
href={link}
target="_blank"
rel="noopener noreferrer"
>
{linkKey ? linkKey : "View Site"}
</a>
)}
</div>
<div className="flex flex-row flex-wrap gap-x-2">
{technologies.map((tech) => (
<tech.icon
className="sm:text-2xl text-4xl"
key={tech.name}
title={tech.name}
/>
))}
</div>
</div>
</div>
</div>
);
};
const WorkedOn = () => {
return (
<section className="mt-32">
<div>
<h2 className="text-xl font-semibold text-neutral-400">
Noteworthy Collaborations
</h2>
<p className="text-neutral-300">
These are some of the projects I've worked on
</p>
<div className="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2">
{ThingsIWorkedOn.map(
(item: WorkedOnProps<Technologies>, index: number) => (
<WorkedOnCard
key={index}
title={item.title}
description={item.description}
link={item.link}
image={item.image}
technologies={item.technologies}
linkKey={item.linkKey}
/>
)
)}
</div>
</div>
</section>
);
};
export default WorkedOn;