bug: Vite Plugin tries to compile tsx files for React Components

[MJ-One]

Please provide the environment you discovered this bug in.

I've been using react with typescript in astro and its working ifne but, when i tried integrating Angualr with astro in the same project i'm getting errors. And Angular compiler is trying to compile react components too.

my React components : src/components/react/.ts
my Angular components : src/components/angular/.tsx
my other typescript files which handles apis and data manipulation: src/components/*.ts

How can i use both react and Angular components in astro?
How can i configure angular compiler to compile only from the select angular components directory?

Which area/package is the issue in?

astro-angular

Description

my dependencies:

"dependencies": {
"@analogjs/astro-angular": "^0.1.0-beta.3",
"@angular-devkit/build-angular": "^14.2.5",
"@angular/animations": "^14.2.5",
"@angular/common": "^14.2.5",
"@angular/compiler": "^14.2.5",
"@angular/compiler-cli": "^14.2.5",
"@angular/core": "^14.2.5",
"@angular/language-service": "^14.2.5",
"@angular/platform-browser": "^14.2.5",
"@angular/platform-browser-dynamic": "^14.2.5",
"@angular/platform-server": "^14.2.5",
"@astrojs/react": "^1.1.4",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"astro": "^1.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rxjs": "^7.5.7",
"tslib": "^2.4.0",
"zone.js": "^0.11.8"
}

my config:

{
"extends": "./tsconfig.json",
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"noEmit": false,
"target": "es2020",
"module": "es2020",
"lib": ["es2020", "dom"],
"skipLibCheck": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
},
"files": [],
"include": ["src/**/*.ts"]
}

Please provide the exception or error you saw

Sourcemap for "D:/Program Files/Github/Repositories/HOA_Master_New/alchemy_static/node_modules/@analogjs/astro-angular/src/server.js" points to missing source files
 error   Unable to render WelcomeCard because it is undefined!
  Did you forget to import the component or is it possible there is a typo?
Error: Unable to render WelcomeCard because it is undefined!
Did you forget to import the component or is it possible there is a typo?
    at Module.renderComponent (/node_modules/astro/dist/runtime/server/render/component.js:68:11)
 error   Unable to render WelcomeCard because it is undefined!
  Did you forget to import the component or is it possible there is a typo?
Error: Unable to render WelcomeCard because it is undefined!
Did you forget to import the component or is it possible there is a typo?
    at Module.renderComponent (/node_modules/astro/dist/runtime/server/render/component.js:68:11)     
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Other information

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

Adding tsx files to the tsconfig.app.json should solve the issue

BEFORE:

"include": ["src/**/*.ts"]

AFTER:

"include": ["src/**/*.ts", "src/**/*.tsx"]

This should probably be added to the tsconfig.app.json template as this seems to be pretty common.

[MJ-One]

[MJ-One]

thought the file named with *.tsx, it is asking me to make soure what I've named

[MJ-One]

My Index.astro page

[brandonroberts]

Looks ok to me. Check out this repo for reference which does the same thing and see if there are any differences

https://github.com/manfredsteyer/astro-last-minute

[MJ-One]

Looks ok to me. Check out this repo for reference which does the same thing and see if there are any differences

https://github.com/manfredsteyer/astro-last-minute

react components written in *.jsx files are working well. But if i wanted to use typescript with react and try to write react components in *.tsx files, it is throwing a parse error as shown above. Please help me out

[brandonroberts]

Ahh I see. It's probably due to the transform picking up tsx files from this line

https://github.com/analogjs/analog/blob/main/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts#L176

If you remove the x? from the lines in the file that look like that, it will not try to compile them.

[MJ-One]

I dont have this file in my project? sorry i'm a sort of newbie at this depth please help me out.

[brandonroberts]

I see. That file is in the plugin provided by Analog that enables Angular support in Astro. We'll have to put in a fix and release a new version of the plugin.

If you'd like to take a stab at a PR let me know and I'll give you some more specific guidance

[himyjan]

Astro multiple framework components repo

before remove the x? from the lines:

crash

after remove the x? from the lines:

{
  "name": "@example/framework-multiple",
  "type": "module",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@analogjs/astro-angular": "^0.1.0-beta.3",
    "@astrojs/preact": "^1.1.1",
    "@astrojs/react": "^1.1.4",
    "@astrojs/solid-js": "^1.1.1",
    "@astrojs/svelte": "^1.0.1",
    "@astrojs/vue": "^1.1.0",
    "astro": "^1.4.6",
    "preact": "^10.11.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "solid-js": "^1.5.7",
    "svelte": "^3.50.1",
    "vue": "^3.2.40",
    "@angular/animations": "^15.0.0-next.5",
    "@angular/common": "^15.0.0-next.5",
    "@angular/compiler": "^15.0.0-next.5",
    "@angular/core": "^15.0.0-next.5",
    "@angular/forms": "^15.0.0-next.5",
    "@angular/platform-browser": "^15.0.0-next.5",
    "@angular/platform-browser-dynamic": "^15.0.0-next.5",
    "@angular/platform-server": "^15.0.0-next.5",
    "@angular/router": "^15.0.0-next.5",
    "rxjs": "^7.5.7",
    "tslib": "^2.4.0",
    "zone.js": "^0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0-next.4",
    "@angular/cli": "^15.0.0-next.4",
    "@angular/compiler": "^15.0.0-next.5",
    "@angular/compiler-cli": "^15.0.0-next.5",
    "@angular/language-service": "^15.0.0-next.5",
    "typescript": "^4.8.4"
  }
}

no error in angular 14.2.5 and angular 15.0.0-next.5

after remove x works great, add fix into new beta 0.1.0-beta.4 package

I am trying to use tailwindcss or unocss with analog (angular + vite),but not work.
if there are an working example to compare?

[MJ-One]

@brandonroberts Thanks for that. I will be looking forward to interact with you.

[brandonroberts]

@MJ-One there are two changes that need to be made to remove the x?.

Here:

https://github.com/analogjs/analog/blob/main/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts#L125

And here:

https://github.com/analogjs/analog/blob/main/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts#L176

You can fork this repo, clone it locally, make a branch with those changes, push up the branch, and open a PR.

---

You can also edit this file directly from GitHub with the link below and make a PR from there.

https://github.com/analogjs/analog/edit/main/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts

Let me know if you have any questions.

[StillScripts]

@brandonroberts I've been dealing with the same issue. Switching to .jsx has solved it. I'll switch back once this issue has been solved. Manually converting "tsx" to "ts" in the file you referenced in my node_modules folder also solved the issue as well.