7.26.7 + ember-animated: Definietly assigned fields and fields with the 'declare' modifier cannot be initialized here, but only in the constructor

[NullVoxPopuli]

 Definietly assigned fields and fields with the 'declare' modifier cannot be initialized here, but only in the constructor
  74 |   _inserted = false;
  75 |
> 76 |   @service('-ea-motion')
     |   ^
  77 |   motionService!: MotionService;
  78 |
  79 |   didInsertElement() {

error log

``` ================================================================================= ENV Summary: TIME: Wed Dec 15 2021 16:01:31 GMT-0500 (Eastern Standard Time) TITLE: ember ARGV: - 🏠/.volta/tools/image/node/16.13.0/bin/node - /✂️/my-app/node_modules/.bin/ember - s EXEC_PATH: 🏠/.volta/tools/image/node/16.13.0/bin/node TMPDIR: /tmp SHELL: /bin/bash PATH: - 🏠/.volta/tools/image/yarn/1.22.17/bin - 🏠/.volta/tools/image/node/16.13.0/bin - 🏠/.volta/bin - 🏠/.pyenv/plugins/pyenv-virtualenv/shims - 🏠/.pyenv/shims - 🏠/.pyenv/bin - /✂️/scripts/ - 🏠/Applications - 🏠/apps/phantomjs/bin - 🏠/scripts/system-utils - 🏠/scripts/git - 🏠/scripts/rails - 🏠/scripts - 🏠/.volta/bin - 🏠/.local/bin - /usr/local/sbin - /usr/local/bin - /usr/sbin - /usr/bin - /sbin - /bin - /usr/games - /usr/local/games - /snap/bin - 🏠/.fzf/bin - /usr/lib/go-1.13/bin - /bin - 🏠/go/bin PLATFORM: linux x64 FREEMEM: 1032192000 TOTALMEM: 18851196928 UPTIME: 498146.85 LOADAVG: 6.01,3.28,1.59 CPUS: - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400 - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400 - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400 - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400 - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400 - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400 - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400 - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400 ENDIANNESS: LE VERSIONS: - ares: 1.17.2 - brotli: 1.0.9 - cldr: 39.0 - icu: 69.1 - llhttp: 6.0.4 - modules: 93 - napi: 8 - nghttp2: 1.45.1 - nghttp3: 0.1.0-DEV - ngtcp2: 0.1.0-DEV - node: 16.13.0 - openssl: 1.1.1l+quic - tz: 2021a - unicode: 13.0 - uv: 1.42.0 - v8: 9.4.146.19-node.13 - zlib: 1.2.11 ERROR Summary: - broccoliBuilderErrorStack: SyntaxError: /✂️/my-app/ember-animated/components/animated-beacon.ts: Definietly assigned fields and fields with the 'declare' modifier cannot be initialized here, but only in the constructor 74 | _inserted = false; 75 | > 76 | @service('-ea-motion') | ^ 77 | motionService!: MotionService; 78 | 79 | didInsertElement() { at File.buildCodeFrameError (/✂️/my-app/node_modules/@babel/core/lib/transformation/file/file.js:249:12) at NodePath.buildCodeFrameError (/✂️/my-app/node_modules/@babel/traverse/lib/path/index.js:139:21) at Object.field (/✂️/my-app/node_modules/ember-animated/node_modules/@babel/plugin-transform-typescript/lib/index.js:69:22) at /✂️/my-app/node_modules/ember-animated/node_modules/@babel/plugin-transform-typescript/lib/index.js:280:33 at Array.forEach () at PluginPass.Class (/✂️/my-app/node_modules/ember-animated/node_modules/@babel/plugin-transform-typescript/lib/index.js:272:31) at newFn (/✂️/my-app/node_modules/@babel/traverse/lib/visitors.js:177:21) at NodePath._call (/✂️/my-app/node_modules/@babel/traverse/lib/path/context.js:53:20) at NodePath.call (/✂️/my-app/node_modules/@babel/traverse/lib/path/context.js:40:17) at NodePath.visit (/✂️/my-app/node_modules/@babel/traverse/lib/path/context.js:100:31) - code: [undefined] - codeFrame: /✂️/my-appy/ember-animated/components/animated-beacon.ts: Definietly assigned fields and fields with the 'declare' modifier cannot be initialized here, but only in the constructor 74 | _inserted = false; 75 | > 76 | @service('-ea-motion') | ^ 77 | motionService!: MotionService; 78 | 79 | didInsertElement() { - errorMessage: ember-animated/components/animated-beacon.ts: /✂️/my-app/ember-animated/components/animated-beacon.ts: Definietly assigned fields and fields with the 'declare' modifier cannot be initialized here, but only in the constructor 74 | _inserted = false; 75 | > 76 | @service('-ea-motion') | ^ 77 | motionService!: MotionService; 78 | 79 | didInsertElement() { in /tmp/broccoli-2291805DEFcpumdhqTh/out-0706-analyzer_ember_auto_import_analyzer at broccoli-persistent-filter:Babel > [Babel: ember-animated] (Babel: ember-animated) - errorType: Build Error - location: - column: [undefined] - file: ember-animated/components/animated-beacon.ts - line: [undefined] - treeDir: /tmp/broccoli-2291805DEFcpumdhqTh/out-0706-analyzer_ember_auto_import_analyzer - message: ember-animated/components/animated-beacon.ts: /✂️/my-app/ember-animated/components/animated-beacon.ts: Definietly assigned fields and fields with the 'declare' modifier cannot be initialized here, but only in the constructor 74 | _inserted = false; 75 | > 76 | @service('-ea-motion') | ^ 77 | motionService!: MotionService; 78 | 79 | didInsertElement() { in /tmp/broccoli-2291805DEFcpumdhqTh/out-0706-analyzer_ember_auto_import_analyzer at broccoli-persistent-filter:Babel > [Babel: ember-animated] (Babel: ember-animated) - name: Error - nodeAnnotation: Babel: ember-animated - nodeName: broccoli-persistent-filter:Babel > [Babel: ember-animated] - originalErrorMessage: /✂️/my-app/ember-animated/components/animated-beacon.ts: Definietly assigned fields and fields with the 'declare' modifier cannot be initialized here, but only in the constructor 74 | _inserted = false; 75 | > 76 | @service('-ea-motion') | ^ 77 | motionService!: MotionService; 78 | 79 | didInsertElement() { - stack: SyntaxError: /✂️/my-app/ember-animated/components/animated-beacon.ts: Definietly assigned fields and fields with the 'declare' modifier cannot be initialized here, but only in the constructor 74 | _inserted = false; 75 | > 76 | @service('-ea-motion') | ^ 77 | motionService!: MotionService; 78 | 79 | didInsertElement() { at File.buildCodeFrameError (/✂️/my-app/node_modules/@babel/core/lib/transformation/file/file.js:249:12) at NodePath.buildCodeFrameError (/✂️/my-app/node_modules/@babel/traverse/lib/path/index.js:139:21) at Object.field (/✂️/my-app/node_modules/ember-animated/node_modules/@babel/plugin-transform-typescript/lib/index.js:69:22) at /✂️/my-app/node_modules/ember-animated/node_modules/@babel/plugin-transform-typescript/lib/index.js:280:33 at Array.forEach () at PluginPass.Class (/✂️/my-app/node_modules/ember-animated/node_modules/@babel/plugin-transform-typescript/lib/index.js:272:31) at newFn (/✂️/my-app/node_modules/@babel/traverse/lib/visitors.js:177:21) at NodePath._call (/✂️/my-app/node_modules/@babel/traverse/lib/path/context.js:53:20) at NodePath.call (/✂️/my-app/node_modules/@babel/traverse/lib/path/context.js:40:17) at NodePath.visit (/✂️/my-app/node_modules/@babel/traverse/lib/path/context.js:100:31) ================================================================================= ```

The code that this comes from:

export default class AnimatedBeacon extends Component {
  name: string | undefined;

  layout: TemplateFactory = layout;
  tagName = '';
  _inserted = false;

  @service('-ea-motion')
  motionService!: MotionService;

  didInsertElement() {
    super.didInsertElement();

https://github.com/ember-animation/ember-animated/blob/master/addon/components/animated-beacon.ts#L76

I don't see declare :shrug:

I probably need to figure out some lockfile changes (big monorepo, so I can't just re-roll it)

[kpfefferle]

I'm seeing this same issue even after upgrading all of my @babel/* and caniuse-lite sub-dependencies as suggested in https://github.com/babel/ember-cli-babel/issues/425#issuecomment-995884734

[NullVoxPopuli]

same, I've even been trying to minimally reproduce the issue with:

// This file is only tested with Node 12+
/* eslint-disable node/no-unsupported-features/es-syntax */
'use strict';

const fs = require('fs/promises');
const os = require('os');
const path = require('path');
const execa = require('execa');

const root = path.join(__dirname, '..');

async function runTest() {
  let tmpDirectory = await fs.mkdtemp(path.join(os.tmpdir(), 'ember-cli-babel-ember-new-test'));
  let appName = 'my-app';
  let appRoot = path.join(tmpDirectory, appName);
  // Must be fully type-valid or else ember-cli crashes
  // https://github.com/ember-cli/ember-cli/issues/9584
  let decoratorsExample = `
  import { inject as service } from '@ember/service';
import type RouterService from '@ember/routing/router-service';

export class A {
  @service declare router: RouterService;
  @service('router') _router!: RouterService;

  get queryParams() {
    return this.router.currentRoute.queryParams;
  }
}
  `

  await execa('yarn', ['link'], { cwd: root, stdio: 'inherit' });
  await execa('npx', ['ember-cli', 'new', appName, '--yarn', '--skip-git'], { cwd: tmpDirectory, stdio: 'inherit' });
  await execa('ember', ['install', 'ember-cli-typescript'], { cwd: appRoot, stdio: 'inherit' });
  // await execa('yarn', ['add', '@babel/preset-env@7.16.5'], { cwd: appRoot, stdio: 'inherit' });
  // await execa('yarn', ['add', 'caniuse-lite@1.0.30001287'], { cwd: appRoot, stdio: 'inherit' });
  await execa('yarn', ['link', 'ember-cli-babel'], { cwd: appRoot, stdio: 'inherit' });
  await fs.writeFile(path.join(appRoot, 'app', 'decorators-example.ts'), decoratorsExample);
  await execa('ember', ['test'], { cwd: appRoot, stdio: 'inherit' });
}

runTest();

but no dice. It may be specific to the addon trees :thinking:

[NullVoxPopuli]

resolved

[panthony]

Stumbled upon this error today after updating ember-cli-babel to the latest version (7.26.11).

Apparently this is resolved but I'm not sure how.