@babel/plugin-proposal-class-properties issue

[stefanpenner]

An app that functions without embroider enabled, currently fails when embroider is enabled when classProperties are used.

Build Error (PackagerRunner) in app.js:7

/private/var/folders/4r/whc65vwj1xggvvky3yy1cp9m000mw4/T/embroider/2e1ac4/app.js: Support for the experimental syntax 'classProperties' isn't currently enabled (7:16):

   5 |
   6 | class App extends Application {
>  7 |   modulePrefix = config.modulePrefix;
     |                ^
   8 |   podModulePrefix = config.podModulePrefix;
   9 |   Resolver = Resolver;
  10 | }

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.


Stack Trace and Error Report: /var/folders/4r/whc65vwj1xggvvky3yy1cp9m000mw4/T/error.dump.33e3fb7de16d52c299f3b39be89e429c.log

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
        at PackagerRunner (@embroider/webpack)
  - errorType: Build Error
  - location:
    - column: [undefined]
    - file: app.js
    - line: 7
    - treeDir: [undefined]
  - message: app.js:7: /private/var/folders/4r/whc65vwj1xggvvky3yy1cp9m000mw4/T/embroider/2e1ac4/app.js: Support for the experimental syntax 'classProperties' isn't currently enabled (7:16):

   5 | 
   6 | class App extends Application {
>  7 |   modulePrefix = config.modulePrefix;
     |                ^
   8 |   podModulePrefix = config.podModulePrefix;
   9 |   Resolver = Resolver;
  10 | }

Interesting files:

• Error Log
• babel_config.js

[ef4]

How is the babel plugging getting added? Directly by the app, or an addon mutating the app's babel config?

[stefanpenner]

@ef4 investigating now.

[stefanpenner]

potentially via: https://github.com/babel/ember-cli-babel/blob/03324217d4ec9b783362d943a31916538ca36510/index.js#L329

[rwjblue]

ember-cli-Babel includes it by default

[rwjblue]

emberjs/ember-cli-babel#274 added decorator and class properties support by default (as was proposed in emberjs/rfcs#408 and emberjs/rfcs#440).

[stefanpenner]

Once we get to configuring webpack's babel here we no longer have reference to the above mentioned plugin.

[stefanpenner]

The following re-implements part of ember-cli-babel

embroider/packages/compat/src/v1-app.ts

Lines 186 to 237 in dcb8927

	babelConfig(): TransformOptions {
	let plugins = get(this.app.options, 'babel.plugins') as any[];
	if (!plugins) {
	plugins = [];
	} else {
	plugins = plugins.filter(p => {
	// even if the app was using @embroider/macros, we drop it from the config
	// here in favor of our globally-configured one.
	return (
	!isEmbroiderMacrosPlugin(p) &&
	// similarly, if the app was already using
	// ember-cli-htmlbars-inline-precompile, we remove it here because we
	// have our own always-installed version of that (v2 addons are
	// allowed to assume it will be present in the final app build, the
	// app doesn't get to turn that off or configure it.).
	!TemplateCompiler.isInlinePrecompilePlugin(p)
	);
	});
	}
	// this is reproducing what ember-cli-babel does. It would be nicer to just
	// call it, but it require()s all the plugins up front, so not serializable.
	// In its case, it's mostly doing it to set basedir so that broccoli caching
	// will be happy, but that's irrelevant to us here.
	plugins.push(this.debugMacrosPlugin());
	let babelInstance = (this.app.project.addons as any[]).find(a => a.name === 'ember-cli-babel');
	if (babelInstance._emberVersionRequiresModulesAPIPolyfill()) {
	let ModulesAPIPolyfill = require.resolve('babel-plugin-ember-modules-api-polyfill');
	let blacklist = babelInstance._getEmberModulesAPIBlacklist();
	plugins.push([ModulesAPIPolyfill, { blacklist }]);
	}
	let config: TransformOptions = {
	babelrc: false,
	plugins,
	presets: [
	[
	this.babelMajorVersion() === 6 ? require.resolve('babel-preset-env') : require.resolve('@babel/preset-env'),
	{
	targets: babelInstance._getTargets(),
	modules: false,
	},
	],
	],
	// this is here because broccoli-middleware can't render a codeFrame full
	// of terminal codes. It would be nice to add something like
	// https://github.com/mmalecki/ansispan to broccoli-middleware so we can
	// leave color enabled.
	highlightCode: false,
	};
	return config;
	}

and could be related, stepping in now.

[stefanpenner]

Ya that is the issue, mega haxor confirming: #215

[stefanpenner]

likely fixed by: #218