#Unable to build tsx / jsx

8 messages · Page 1 of 1 (latest)

turbid kettle
#

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??

next cedar
#

Can you provide repo with that issue?

turbid kettle
rose sparrow
#

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.

turbid kettle
#
---
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

turbid kettle
#

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;