typed-ember / ember-cli-typescript

Use TypeScript in your Ember.js apps!
https://docs.ember-cli-typescript.com
MIT License
363 stars 99 forks source link

Incompatible ECMAScript version being used during the build #1549

Closed azhiv closed 10 months ago

azhiv commented 1 year ago

Please paste the output of ember -v here

ember-cli: 4.4.1
node: 16.15.1
os: darwin arm64

Please paste the output of tsc -v here

Version 5.0.2

Please paste the version of ember-cli-typescript and ember-cli-typescript-blueprints here

yarn list v1.22.19
├─ @glimmer/component@1.1.2
│  └─ ember-cli-typescript@3.0.0
├─ ember-cli-typescript-blueprint-polyfill@0.1.0
├─ ember-cli-typescript@5.2.1
├─ ember-fetch@8.1.2
│  └─ ember-cli-typescript@4.2.1
└─ ember-load-initializers@2.1.2
   └─ ember-cli-typescript@2.0.2
✨  Done in 0.29s.

Please paste your tsconfig.json and tslint.json or eslint.json (if applicable) below

My tsconfig.json

{
  "extends": "@tsconfig/ember/tsconfig.json",
  "compilerOptions": {

    // The combination of `baseUrl` with `paths` allows Ember's classic package
    // layout, which is not resolvable with the Node resolution algorithm, to
    // work with TypeScript.
    "baseUrl": ".",
    "paths": {
      "change-buffer-demo/tests/*": [
        "tests/*"
      ],
      "change-buffer-demo/mirage/*": [
        "mirage/*"
      ],
      "change-buffer-demo/*": [
        "app/*"
      ],
      "*": [
        "types/*"
      ]
    }
  },
  "include": [
    "app/**/*",
    "tests/**/*",
    "types/**/*",
    "mirage/**/*"
  ]
}

My eslint.json
'use strict';

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      legacyDecorators: true,
    },
  },
  plugins: ['ember'],
  extends: [
    'eslint:recommended',
    'plugin:ember/recommended',
    'plugin:prettier/recommended',
  ],
  env: {
    browser: true,
  },
  rules: {},
  overrides: [
    // node files
    {
      files: [
        './.eslintrc.js',
        './.prettierrc.js',
        './.template-lintrc.js',
        './ember-cli-build.js',
        './testem.js',
        './blueprints/*/index.js',
        './config/**/*.js',
        './lib/*/index.js',
        './server/**/*.js',
      ],
      parserOptions: {
        sourceType: 'script',
      },
      env: {
        browser: false,
        node: true,
      },
      plugins: ['node'],
      extends: ['plugin:node/recommended'],
      rules: {
        // this can be removed once the following is fixed
        // https://github.com/mysticatea/eslint-plugin-node/issues/77
        'node/no-unpublished-require': 'off',
      },
    },
    {
      // test files
      files: ['tests/**/*-test.{js,ts}'],
      extends: ['plugin:qunit/recommended'],
    },
  ],
};

What are instructions we can follow to reproduce the issue?

ember new sample; cd ./sample # Create a new ember app
ember install ember-cli-typescript # Set up typescript support

>> Your Instructions Go Here <<
yarn add moderndash --dev
ember g route sample

#[rename app/routes/sample.js to app/routes/sample.ts and open it]
#[add 'import { difference } from 'moderndash';'  and call this function in the model hook]
Reproduction Case

If you can, please try to fork this codesandbox, and give us an example that demonstrates the problem. Paste the link below so that we can see what's going on

Link: https://codesandbox.io/p/sandbox/my-app-forked-uj6vjr?welcome=true&file=%2FREADME.md Your sandbox is a bit outdated so I couldn't get it up and running (it emits a lot of side errors that I couldn't get rid of), but the root problem there is still reproducible.

Another link to the project on github.

Create a new route with the following content:

import Route from '@ember/routing/route';
import { difference } from 'moderndash';

export default class SampleRoute extends Route {
  model() {
    return difference([], []);
  }
}

Now about that bug. What did you expect to see?

I expect the command ember s to succeed without errors.

What happened instead?

Instead, the build fails with this error:

node_modules/typescript/lib/lib.es5.d.ts:1580:11 - error TS2313: Type parameter 'P' has a circular constraint.

1580     [P in K]: T[P];
               ~

  node_modules/moderndash/dist/index.d.ts:861:94
    861 type MergeDeepObjects<A extends readonly [...unknown[]]> = A extends [infer L, ...infer R] ? SpreadTwo<L, MergeDeepObjects<R>> : unknown;
                                                                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Circularity originates in type at this location.

This is caused by ES5 being utilized as the source of TS type definitions. A similar function call on a very light TS setup succeeds when explicitly configuring ES to smth like 2022. Is there a way to configure ember-cli-typescript to target custom ECMAScript version?

chriskrycho commented 10 months ago

Hello – sorry I am just now getting to this! You can always set your own options in the tsconfig.json for things like target and it will work just fine. We also recommend folks switch to using the combination of ember-cli-babel as documented here for building apps or a “v2 addon” using Rollup for building addons, using either tsc or glint directly and using the @tsconfig/ember TS config and blueprints generated from Ember itself. (We'll also be updating the docs to suggest that in the next day or two!)

I'm going to close this, but feel free to respond here if you have further questions, and sorry again about the delay.