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 (<anonymous>)
    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 (<anonymous>)
    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 🤷

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 #425 (comment)

[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 🤔

[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.