Ember is minified even in development

[boris-petrov]

🐞 Describe the Bug

For a few releases now, running ember serve leads to a minified build even though it's in development. I'm talking about Ember itself.

🔬 Minimal Reproduction

ember new --pnpm ember-development-minified
cd ember-development-minified
pnpm start

Open http://localhost:4200/, open the devtools and check the assets/vendor/ember/ember.js file. It's minified.

😕 Actual Behavior

Minified Ember which is difficult to use and debug.

🤔 Expected Behavior

Not minified Ember.

🌍 Environment

• Ember: 5.12.0
• Ember-CLI: 5.12.0
• Node.js/npm: v23.1.0
• OS: Linux
• Browser: N/A

➕ Additional Context

Possibly due to this PR.

[kategengler]

I checked this with a new app generated with 6.0 and one with 5.12 and assets/vendor/ember/ember.js is not minified but it does have all whitespace removed. Hitting pretty-print in the inspector solves that. Any other clues to reproducing?

[boris-petrov]

You’re right, yes, it’s not minified but the whitespace removal is very inconvenient. Try debugging in Chrome - one cannot put breakpoints and can’t step-into stuff. Pretty-printing doesn’t help.

[kategengler]

I had to test to be sure, but I have no problem putting breakpoints nor stepping through even with pretty print.

[acorncom]

@boris-petrov which browser are you using in development? Potentially a difference in handling debugging post pretty-printing?

[boris-petrov]

I'm not sure how you do it.

Here I tried putting a breakpoint on if (obj.isDestroyed) {. Look where it put it. That's in Chrome's devtools. Or is there some other way of pretty-printing which fixes this and the stepping-into experience that I don't know of?

[kategengler]

I'm not sure -- in my case I can set breakpoints in the - lines and they stay there (on Chrome devtools).

[dwickern]

The culprit seems to be one of these plugins that are added by default. I didn't narrow it down to a specific one.

// plugins added by ember-cli-babel
[
  ['@babel/plugin-transform-class-static-block', { legacy: true }],
  ['@babel/plugin-proposal-decorators', { legacy: true }],
  ['@babel/plugin-proposal-private-property-in-object', { loose: false }],
  ['@babel/plugin-proposal-private-methods', { loose: false }],
  ['@babel/plugin-proposal-class-properties', { loose: false }],
]

The whitespace issue is fixed if I add disableDecoratorTransforms: true to

ember.js/lib/index.js

Lines 156 to 160 in be20bd3

	'ember-cli-babel': {
	compileModules: false,
	disableDebugTooling: true,
	disableEmberModulesAPIPolyfill: true,
	},

The flag disables all of those babel plugins when building ember.debug.js.

[kategengler]

@NullVoxPopuli any thoughts here?

[NullVoxPopuli]

is it still an issue in 6.4.0-alpha.3?

[dwickern]

is it still an issue in 6.4.0-alpha.3?

Yes

[NullVoxPopuli]

• classic build: sourcemaps don't appear to work

  • in app code
  • in vendor code

• with embroider (webpack): (i'm using devtool: 'source-map')

  • source maps are good
  • original ember code is visible

• with vite

  • sourcemaps are flawless (even better!)
  • without sourcemaps, modules are nearly original

so, I think the path forward here is probably to progress towards vite

[dwickern]

Ok, so the problem is babel's compact option which, by default, strips whitespace from large files.

It works to set compact: false in ember-cli-babel's source. I've tried a few ways to feed in compact: false from here with no success. Basically it's the same problem as emberjs/ember-cli-babel#302

[NullVoxPopuli]

is there any downside to setting compact: false in ember-cli-babel?

This is the default we're using in the upcoming new blueprint: https://github.com/ember-cli/ember-app-blueprint/blob/main/files/_js_babel.config.cjs#L40

I threw up: emberjs/ember-cli-babel#521 but haven't tested it locally