Error with ViewTransition in Dev
Closed this issue · 18 comments
Summary
First and foremost, I'd like to extend my deep appreciation and respect to the team for developing this amazing integration!
I'm encountering an issue when using the ViewTransition with this integration.
The error message displayed in the development environment is:
Uncaught SyntaxError: Unexpected token '{'
Interestingly, this issue does not occur when the project is built for production (npm run build && npm run preview).
I would greatly appreciate any insights or assistance in resolving this issue. Thank you!
Minimal Demo with Stackblitz
Environment
- "@astrojs/check": "^0.3.1"
- "@builder.io/qwik": "^1.2.19"
- "@qwikdev/astro": "^0.2.4"
- "astro": "^3.6.0"
- "typescript": "^5.3.2"
I wanted to open an issue too. I think I can provide a bit more context for this error, as I experiencied a similar one which I think it may be related.
I believe the error is not related to the ViewTransitions, but to the <script> tag that it may have inside. For some reason the integration seems to interfere with the parsing of Astro script blocks and more specifically Typescript.
I had a simple component which used Typescript inside an Astro component <script> (not the same that the server frontmatter) and having this integration enabled printed an error on the console complaining about invalid syntax (as if it was expeting JS). It's rare because Astro fully supports using Typescript on client-side script tags.
As soon as I disabled the extension it went away. I think it may be related, but I hadn't time to investigate nor build a minimal reproduction so I didn't open an issue yet.
@junpei-8 Could you confirm by, instead of using View Transitions in your example, adding a client side <script> in your Astro component which uses Typescript syntax? (like for example declaring an interface). If the error goes away after disabling the integration then we found another very weird error @thejackshelton aside from the already horrible #30
PD: The Astro ViewTransitions component does indeed use a <script> tag that may be the potential issue.
I also have some other script tags that includes TS which breaks when using Qwik integration
I also get following error when building:
Error when evaluating SSR module /node_modules/@qwikdev/astro/src/index.ts: failed to import "typescript"
...
Failed to load url typescript (resolved id: typescript) in /Users/[omitted]/node_modules/@qwikdev/astro/src/index.ts. Does the file exist?
Hey I ran the dev mode of the stack blitz and couldn't see this error. Is there something I'm doing wrong?
What I did see in the console was
Uncaught SyntaxError: missing keyword 'from' after import clause [ViewTransitions.astro:1:14](https://withastroastrokpv8vn-fix4-djeynlm0--4321--6843a59c.local-corp.webcontainer.io/node_modules/astro/components/ViewTransitions.astro?astro&type=script&index=0&lang.ts)
Does the behavior not work as expected? Is there a set of steps I should follow? Would love to know more so that I can fix this issue.
I also have some other script tags that includes TS which breaks when using Qwik integration I also get following error when building:
Error when evaluating SSR module /node_modules/@qwikdev/astro/src/index.ts: failed to import "typescript" ... Failed to load url typescript (resolved id: typescript) in /Users/[omitted]/node_modules/@qwikdev/astro/src/index.ts. Does the file exist?
Could you make a reproduction of this behavior?
I also have some other script tags that includes TS which breaks when using Qwik integration I also get following error when building:
Error when evaluating SSR module /node_modules/@qwikdev/astro/src/index.ts: failed to import "typescript" ... Failed to load url typescript (resolved id: typescript) in /Users/[omitted]/node_modules/@qwikdev/astro/src/index.ts. Does the file exist?Could you make a reproduction of this behavior?
Seems to happen when using SSR : https://stackblitz.com/edit/github-qogdef?file=astro.config.mjs
I also have some other script tags that includes TS which breaks when using Qwik integration I also get following error when building:
Error when evaluating SSR module /node_modules/@qwikdev/astro/src/index.ts: failed to import "typescript" ... Failed to load url typescript (resolved id: typescript) in /Users/[omitted]/node_modules/@qwikdev/astro/src/index.ts. Does the file exist?Could you make a reproduction of this behavior?
Seems to happen when using SSR : https://stackblitz.com/edit/github-qogdef?file=astro.config.mjs
Are we sure this is a problem with Qwik here? I removed the integration and it seems that we still get an error running dev
https://stackblitz.com/edit/github-qogdef-plfezu?file=astro.config.mjs
Ah I was able to reproduce the initial issue, I was using firefox, which is an unsupported browser of view transitions.
@junpei-8 Could you confirm by, instead of using View Transitions in your example, adding a client side <script> in your Astro component which uses Typescript syntax? (like for example declaring an interface). If the error goes away after disabling the integration then we found another very weird error @thejackshelton aside from the already horrible #30
I've conducted the verification!
As @iivvaannxx speculated, an error occurred even when I removed ViewTransition and instead embedded TypeScript in a script.
The error message is different, but like the error that occurs with ViewTransition, the error in this test also seems to stem from a failure to properly understand TypeScript syntax.
Uncaught SyntaxError: Unexpected strict mode reserved word (at Layout.astro?astro&type=script&index=0&lang.ts:1:7)
Minimal Demo with Stackblitz
Tried spotting some potential causes of the issue.
So we do use typescript for the AST parser to get the Qwik entrypoints (dev dependency)
Also this in the tsconfig
https://github.com/QwikDev/astro/blob/main/libs/qwikdev-astro/tsconfig.json#L12
I tried using an alternative parser called acorn to try and remove typescript, but wasn't able to get that working properly.
@thejackshelton It would probably be a good idea trying to ping someone from the Astro team, if you know any collaborator it could probably bring some insight into this, because it's a bit weird and it seems that directly interferes with something on the Astro end.
@thejackshelton It would probably be a good idea trying to ping someone from the Astro team, if you know any collaborator it could probably bring some insight into this, because it's a bit weird and it seems that directly interferes with something on the Astro end.
Agreed. I reached out to Nate from the core team and he mentioned he will take a look today.
That said, they are also focused on Astro 4.0 right now, so it may not be the best time. When 4.0 is released and 1.2.20 or 1.3 (vite 5 for qwik) is released I'll be upgrading the package.
Hey guys, looking back into this. Did not get a response from the core team but will try to see what we can do.
Doesn't seem to be a ts version mismatch problem at least with the typescript version, as I get the same error even with the exact same one in the Astro repo.
@junpei-8 other than the type error, does this actually break view transitions?
I think we made some progress on this. The crawlDirectory function in index.ts seems to be reading .astro files causing this problem, but when I try to exclude them it doesn't work 🤔
Nate mentioned it could also be an incompatibility issue with the Astro typescript plugin.
@junpei-8 other than the type error, does this actually break view transitions?
@thejackshelton I think it does, I am not sure but I recall the error being blocking, the code that is after the error line does not get executed.
Nate mentioned it could also be an incompatibility issue with the Astro typescript plugin.
I am more inclined to think this could be the issue, because I don't see any pontential origin for this type of error in the code. Don't understand how the integration and the TypeScript parsing are related with each other.
Hey @iivvaannxx @Zareix @junpei-8 can we try 0.2.9?
Nate from the Astro core team was able to find out that the qwikVite plugin in dev mode disables esbuild 😅 .
JSX and TSX compilation have to be handled by Qwik with the compiler rather than esbuild. So we may have to figure out how to
It's possible there might be a way to configure Vite's esbuild settings to avoid conflicts. For now there is a workaround vite plugin that overrides this behavior specifically for this integration.
Working now on v0.2.9, thanks !
@junpei-8 I got view transitions working with your example
https://github.com/thejackshelton/astro-qwik-view-transitions
Great news @thejackshelton! Can confirm that it does work in my project too!