Comments (28)
This setting does fix the issue. I will put it in our WIP vite skeleton.
export default defineConfig({
esbuild: {
target: 'es2022',
},
from aurelia.
Fixed by #1980 (comment)
Thanks for everyone's help!
from aurelia.
Hi @dkent600, it seems like a vite+esbuild issue. As the latest esbuild added support for the native decorators, it is worth updating the version of esbuild. Moreover, as the parameter decorators are not yet supported by the new decorator specs, those instances needs to be refactored. The Au2 release notes mention this.
I have tried the aforementioned changes in your repo. Here is a change.patch that you can apply and check.
However, it seems that the decorators are still not transpiled. Unfortunately, I am not much familiar with vite and/or esbuild. @3cp @bigopon Do you guys notice anything configuration change that needs to be made in order to transpile the code view vite/esbuild?
from aurelia.
relax it to "^..."?.
Yes we should, completely missed it, thanks @3cp
@dkent600 I tried to debug by removing everything and only had these:
-
main.ts
@dec class App {} function dec() { console.log('???'); } document.body.textContent = String(new App());
-
vite.config.ts
export default defineConfig({ server: { port: 9000, strictPort: true, }, })
And it still couldn't compile the decorator! Will check further.
from aurelia.
Sounds like
"experimentalDecorators": true, "emitDecoratorMetadata": true,
is the temporary solution here before esbuild follows tsc behaviour.
@3cp I tried that before (see above) but it results in the runtime error:
TypeError: Cannot read properties of undefined (reading 'addInitializer')
Oh yes. Probably esbuild's decorator helper (in the compiled code) is for legacy decorator spec (honours experimentalDecorators), while Aurelia's decorator is using latest spec.
from aurelia.
It seems the version of vite
in the repo is quite old, maybe let's test it with the latest first @dkent600 ? it's 5.2.11
from aurelia.
I have tried the aforementioned changes in your repo. Here is a change.patch that you can apply and check.
Thanks @Sayan751! FYI I went ahead and committed those changes to master, here: dkent600/douglaskent@fb3c171
from aurelia.
It seems the version of
vite
in the repo is quite old, maybe let's test it with the latest first @dkent600 ? it's5.2.11
@bigopon The version that @Sayan751 is testing with is 5.2.11 which is only three weeks old.
from aurelia.
@Sayan751 @bigopon FYI I updated the vite config to use @aurelia/vite-plugin
and made changes to the vite.config
. The code is compiling again, but the vite build of the app is having this problem at runtime when it hits @customElement({ name: "resume", template })
:
Uncaught SyntaxError SyntaxError: Invalid or unexpected token
at (program) (c:\Users\dkent\Documents\Projects\douglaskent\src\pages\resume\resume.ts:18:1)
The changes are here: dkent600/douglaskent@e1c46f9
PS: There is also a production build issue from rollup. I will investigate.
from aurelia.
Uncaught SyntaxError SyntaxError: Invalid or unexpected token
at (program) (c:\Users\dkent\Documents\Projects\douglaskent\src\pages\resume\resume.ts:18:1)
Both the above error and the production build issue from rollup go away if I restore the following to tsconfig.json:
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
Of course that causes other issues to ensue, namely in @customElement
:
TypeError: Cannot read properties of undefined (reading 'addInitializer')
from aurelia.
I'm not sure what's causing the prod issue, since everything looks fine.
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
We should not need these 2, since it's for the old decorators code, we no longer have it.
from aurelia.
It seems like a configuration issue to me, since the latest version of esbuild can transpile the decorators. Maybe something in the in vite config or rollup is missing.
from aurelia.
@bigopon a side issue. Our plugin-conventions is pinned to one typescript version, should we relax it to "^..."?.
"node_modules/@aurelia/plugin-conventions": {
"version": "2.0.0-beta.17",
"resolved": "https://registry.npmjs.org/@aurelia/plugin-conventions/-/plugin-conventions-2.0.0-beta.17.tgz",
"integrity": "sha512-m14ML6Atfl5B389e1Hxj27H/f1lTm33HyIvgdLvUp+jLUaQnTlf5bqiSmNQLHlrhcnskH+nKfG6ngJ3umEPBgw==",
"dev": true,
"dependencies": {
"@aurelia/kernel": "2.0.0-beta.17",
"@aurelia/metadata": "2.0.0-beta.17",
"@aurelia/platform": "2.0.0-beta.17",
"@aurelia/runtime": "2.0.0-beta.17",
"@aurelia/runtime-html": "2.0.0-beta.17",
"modify-code": "^2.1.3",
"parse5": "^5.1.1",
"typescript": "5.4.2"
},
"engines": {
"node": ">=14.17.0"
}
},
from aurelia.
@dkent600 you patched our html import to .html?raw
, I don't think that would ever work with au2.
Our plugin already rewrote html file into js code, it's not raw text anymore.
My bad, missed your condition.
from aurelia.
For what it is worth, running npx tsc
has no problem, with tsconfig changes:
//"noEmit": true,
"outDir": "dist/tsc",
// "experimentalDecorators": true,
// "emitDecoratorMetadata": true,
from aurelia.
I quite give up on this ... but the good news is if you use true for enableConventions
in the viteconfig, you'll not have to worry about the decorators.
(it doesn't compile with even simplest app & config whatsoever)
from aurelia.
I quite give up on this ... but the good news is if you use true for
enableConventions
in the viteconfig, you'll not have to worry about the decorators. (it doesn't compile with even simplest app & config whatsoever)
@bigopon I have set enableConventions
to true in vite.config but the vite compile still fails on the decorator with:
Uncaught SyntaxError SyntaxError: Invalid or unexpected token
at (program) (c:\Users\dkent\Documents\Projects\douglaskent\src\pages\resume\resume.ts:18:1)
This can be seen in this commit: dkent600/douglaskent@fdd152c
from aurelia.
I tried too. I think the setup somehow skipped typescript compilation which Vite should do automatically for .ts files. So even conventions handled the decorator, user code still fails with decorator.
I could not figure out what happened.
from aurelia.
Not that this helps, but I'll just post anyway. I saw that the presence of
@esbuild-plugins/node-globals-polyfill
force npm to install esbuild wasm, removing it causes npm to take normal esbuild package.
Btw, when I change to main.js
, and the index.html
to:
<!DOCTYPE html>
<html>
<head>
<script type="module" src="src/main.js"></script>
</head>
<body>
</body>
</html>
it still doesn't build ... well...!
from aurelia.
I quite give up on this ... but the good news is if you use true for
enableConventions
in the viteconfig, you'll not have to worry about the decorators. (it doesn't compile with even simplest app & config whatsoever)
@bigopon Assuming this issue is addressed by Vite, which do you generally recommend for `enableConventions'? true or false? I am not clear what is its purpose.
from aurelia.
I created a branch for this issue:
https://github.com/dkent600/douglaskent/tree/decorators-issue
And a ticket for vite: vitejs/vite#17308 (I hope I didn't make any mistakes with the facts of the matter)
from aurelia.
I have a feeling that you guys and Vite may not be aligned about what should be happening here. In the given scenario, should the decorator syntax be getting transpiled for the browser, and if so, to what?
Please see: vitejs/vite#17308 (comment)
from aurelia.
Sounds like
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
is the temporary solution here before esbuild follows tsc behaviour.
from aurelia.
Sounds like
"experimentalDecorators": true, "emitDecoratorMetadata": true,
is the temporary solution here before esbuild follows tsc behaviour.
@3cp I tried that before (see above) but it results in the runtime error:
TypeError: Cannot read properties of undefined (reading 'addInitializer')
from aurelia.
Status: Awaiting the fix in vite to address this issue that is apparently due to vite not using the latest version of esbuild.
from aurelia.
Thanks @dkent600 , I'm not sure what vite does internally, because even with overrides in package json to ensure esbuild version 0.21.3, it still didn't compile, as shown in my comment above.
from aurelia.
Thanks @dkent600 , I'm not sure what vite does internally, because even with overrides in package json to ensure esbuild version 0.21.3, it still didn't compile, as shown in my comment above.
Agreed @bigopon , I had the same thought. But they are claiming it fixes the issue. Will see...
from aurelia.
Confirmed this setting does fix the issue: #1980 (comment)
If there has yet been a Vite release of what was supposed to be a fix, it is not sufficient.
from aurelia.
Related Issues (20)
- Injecting IHttpClient error after beta 11 update
- Router swallows DI errors HOT 7
- Restrict behavior of custom attribute single value binding and primary bindable HOT 8
- Tweak aurelia package reexports HOT 9
- Validation Package - Email validation HOT 7
- Replacing view factory containers
- Vite load issue. HOT 2
- Define `ts-jest` config under `globals` is deprecated HOT 2
- 2.0.0-beta.15 - using @inject is throwing errors HOT 3
- CSS modules support for Vite HOT 11
- [DEV:aurelia] Error: AUR0153: Element has already been registered HOT 8
- Variables getting removed from production bundle HOT 11
- [RFC] synchronous vs asynchronous binding system for Aurelia 2 HOT 20
- 2.0.0-beta.12 - Custom elements instances are now different HOT 11
- [feature request] ability to typecheck template
- RFC: Enhancements for Overriding Registrations in Aurelia DI Container HOT 6
- Resource definitions for the subclassed resource overrides definitions of the superclass resource
- Shadow DOM documentation out of date HOT 4
- external attribute for external links does not seem to be working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aurelia.