Problems with building and deploying gh-pages

[arielhasidim]

Hi man, thank you very much for your work!

I was quickly able to run locally a Claude artifact, yet:

1. When I tried to build, I got TS errors for types (see error at the bottom). I suppressed them using // @ts-nocheck at the top of the two /artifact/. files, and then I was able to build. Running the /dist folder locally using http-server was successful.
2. After deploying, the GH page loaded empty with errors:

[Error] Failed to load resource: the server responded with a status of 404 () (index-CI5SFFNF.js, line 0) - https://arielhasidim.github.io/assets/index-Ruxk6z9Q.css
[Error] Failed to load resource: the server responded with a status of 404 () (index-Ruxk6z9Q.css, line 0) - https://arielhasidim.github.io/assets/index-CI5SFFNF.js

As you can see, it tries to load assets from my main GH user page and not from the current repo (e.g., not from "https://arielhasidim.github.io/claude-artifact-runner"). Using the "homepage" attribute at the package.json didn't change much. Changing the .js and .css links in the index.html manually resolved the errors, but the page was still displayed blankly.

It happened with my artifact and the original project. I'm using npm v18.19.1.

the TS errors for type:

src/artifacts/default.tsx:48:17 - error TS2322: Type '{ id: string; type: "email"; placeholder: string; value: string; onChange: (e: ChangeEvent<HTMLInputElement>) => void; icon: Element; }' is not assignable to type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.
  Property 'icon' does not exist on type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.

48                 icon={<Mail className="h-4 w-4 text-gray-500" />}
                   ~~~~

src/artifacts/default.tsx:59:17 - error TS2322: Type '{ id: string; type: "password"; placeholder: string; value: string; onChange: (e: ChangeEvent<HTMLInputElement>) => void; icon: Element; }' is not assignable to type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.
  Property 'icon' does not exist on type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.

59                 icon={<Lock className="h-4 w-4 text-gray-500" />}
                   ~~~~

src/artifacts/signup.tsx:51:17 - error TS2322: Type '{ id: string; type: "email"; placeholder: string; value: string; onChange: (e: ChangeEvent<HTMLInputElement>) => void; icon: Element; }' is not assignable to type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.
  Property 'icon' does not exist on type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.

51                 icon={<Mail className="h-4 w-4 text-gray-500" />}
                   ~~~~

src/artifacts/signup.tsx:62:17 - error TS2322: Type '{ id: string; type: "password"; placeholder: string; value: string; onChange: (e: ChangeEvent<HTMLInputElement>) => void; icon: Element; }' is not assignable to type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.
  Property 'icon' does not exist on type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.

62                 icon={<Lock className="h-4 w-4 text-gray-500" />}
                   ~~~~

src/artifacts/signup.tsx:73:17 - error TS2322: Type '{ id: string; type: "password"; placeholder: string; value: string; onChange: (e: ChangeEvent<HTMLInputElement>) => void; icon: Element; }' is not assignable to type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.
  Property 'icon' does not exist on type 'IntrinsicAttributes & InputProps & RefAttributes<HTMLInputElement>'.

73                 icon={<Lock className="h-4 w-4 text-gray-500" />}
                   ~~~~


Found 5 errors.

[arielhasidim]

A working alternative with gh-pages: https://github.com/EndlessReform/claude-artifacts-starter

[claudio-silva]

Hi @arielhasidim
Thank you for opening this.
I'll take a look at it after the New Year arrives, as I'm on vacation.
Happy New Year!

[aluxian]

@arielhasidim In the mean time you can remove tsc from the package.json scripts and run only vite alone.

[arielhasidim]

@aluxian Thank you!
Anyway, that's the more minor problem.

Also thank you for your time @claudio-silva