Comments (11)
Super. Thank you @Sayan751 and @3cp for the info and fix.
from aurelia.
Maybe it has something to do with the @babel/plugin-proposal-decorators
plugin in the babel.config.json
file
{
"presets": [
[
"@babel/preset-env",
{
"loose": true,
"modules": false,
"exclude": [
"@babel/plugin-proposal-dynamic-import"
]
}
]
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"version": "2023-11"
}
],
"@babel/plugin-syntax-dynamic-import"
]
}
from aurelia.
I have added a simplified example on the same repo on the test-2
branch
import { inject, IEventAggregator } from 'aurelia';
import { testVarTwo, testObj } from './data.js';
@inject(IEventAggregator)
export class MyElement {
constructor(ea) {
this.ea = ea;
}
attached() {
console.log(testVarTwo)
const a = testObj
}
}
data.js
const testVarOne = `
Hello this is test var one
`
const testVarTwo = `
${testVarOne}
Hello this is test var two
`
const testObj = {
one: `${testVarOne}`,
two: `${testVarOne}`,
}
export {
testVarTwo,
testObj
}
When building this for production testVarOne
is removed from the bundle.
if I remove @inject(IEventAggregator)
from MyElement
then everything works as expected.
from aurelia.
I have been investigating this a bit.
Using the @containerless
decorator causes the same issue. However using the @customElement('my-element')
decorator does not.
I have also tried to reproduce this issue using only webpack without aurelia, but have not been able to replicate it.
If I had to take a guess I think it might have something to do with the aurelia-loader
plugin?
from aurelia.
Hi @ivanbacher! I have looked into this issue briefly. It seems to me that the code are somehow being tree-shaked and not included in the bundle. You can verify this, you make the following change in the webpack configuration.
- devtool: production ? undefined : 'eval-cheap-source-map',
+ devtool: 'eval-cheap-source-map',
However, I think that it has something to do with how babel is transpiling the new decorators.
I have used ts-loader with your .js files combined with a tsconfig that allows js files, and it worked fine.
//tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"allowJs": true,
}
}
from aurelia.
@ivanbacher I have looked further into this. Seems like a babel issue TBH. Opened up babel/babel#16453 with a reproduction https://github.com/Sayan751/babel-webpack-demo.
If you take a look there, you can see that the issue can be reproduced even without the aurelia dependencies.
Closing this issue as it seems that it is not an Aurelia issue after all. Feel free to reopen if you see otherwise.
from aurelia.
With my limited understanding, I think babel has nothing to do with tree shaking, it's webpack.
from aurelia.
You are right. I only suspect that it is an artifact of how Babel is transpiling the code. Because it is working with ts-loader.
from aurelia.
Babel guy pointed out that's terser bug. We may need to adjust webpack config for compression.
from aurelia.
Thank you @3cp for taking care of that!
from aurelia.
from aurelia.
Related Issues (20)
- [refactor] remove define life cycle HOT 1
- Vite plugin for aurelia 1.x? HOT 4
- Router load attribute: broken when using id & parameters.bind HOT 7
- 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 10
- [DEV:aurelia] Error: AUR0153: Element has already been registered HOT 8
- [RFC] synchronous vs asynchronous binding system for Aurelia 2 HOT 9
- 2.0.0-beta.12 - Custom elements instances are now different HOT 10
- [feature request] ability to typecheck template
- RFC: Enhancements for Overriding Registrations in Aurelia DI Container HOT 5
- bindable decorator should not be giving a runtime error HOT 26
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.