Variables getting removed from production bundle about aurelia HOT 11 CLOSED

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.

cc: @bigopon @3cp

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.

FYI terser/terser#1526

from aurelia.