Closed MJ-One closed 1 year ago
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.
thought the file named with *.tsx, it is asking me to make soure what I've named
My Index.astro page
Looks ok to me. Check out this repo for reference which does the same thing and see if there are any differences
Looks ok to me. Check out this repo for reference which does the same thing and see if there are any differences
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
Ahh I see. It's probably due to the transform picking up tsx files from this line
If you remove the x?
from the lines in the file that look like that, it will not try to compile them.
I dont have this file in my project? sorry i'm a sort of newbie at this depth please help me out.
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
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?
@brandonroberts Thanks for that. I will be looking forward to interact with you.
@MJ-One there are two changes that need to be made to remove the x?
.
Here:
And here:
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.
Let me know if you have any questions.
@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.
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
Other information
I would be willing to submit a PR to fix this issue