Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
NullVoxPopuli opened this issue Dec 15, 2021 · 4 comments

Comments

@NullVoxPopuli
Copy link
Contributor

NullVoxPopuli commented Dec 15, 2021

 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
Copy link

I'm seeing this same issue even after upgrading all of my @babel/* and caniuse-lite sub-dependencies as suggested in #425 (comment)

@NullVoxPopuli
Copy link
Contributor Author

NullVoxPopuli commented Dec 16, 2021

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/[email protected]'], { cwd: appRoot, stdio: 'inherit' });
  // await execa('yarn', ['add', '[email protected]'], { 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
Copy link
Contributor Author

resolved

@panthony
Copy link

panthony commented Aug 9, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants