ember-cli-typescript icon indicating copy to clipboard operation
ember-cli-typescript copied to clipboard

Published 20 hours ago • verified publisher icon typed-ember

ember-cli-typescript with React breaks the build pipeline

Open jas7457 opened this issue 3 years ago • 4 comments
trafficstars

Please paste the output of ember -v here

ember-cli: 3.28.4 node: 14.17.3 os: darwin x64

Please paste the output of tsc -v here

Version 4.5.4

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

├─ @glimmer/[email protected] │ └─ [email protected] ├─ [email protected] ├─ [email protected] └─ [email protected] └─ [email protected]

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

My tsconfig.json
  

{
"compilerOptions": {
"target": "es2020",
"allowJs": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"noImplicitThis": true,
"alwaysStrict": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noEmitOnError": true,
"noEmit": true,
"inlineSourceMap": true,
"inlineSources": true,
"baseUrl": ".",
"module": "es6",
"experimentalDecorators": true,
"paths": {
"ember-react/tests/": [
"tests/"
],
"ember-react/": [
"app/"
],
"": [
"types/"
]
}
},
"include": [
"app//*",
"tests//",
"types/**/"
]
}
My tslint.json or eslint.json

What are instructions we can follow to reproduce the issue?

  1. Checkout my repo at https://github.com/jas7457/ember-react and verify that you can yarn start and render a React component
  2. Install ember-cli-typescript (ember install ember-cli-typescript) and try to yarn start, you'll be met with an error. Alternatively, you can just checkout the ember-cli-typescript branch and the only change there is the addition of ember-cli-typescript
Reproduction Case

I hope that the above will be enough for a reproduction case. It's a freshly created Ember app with just the necessary states to show a React component rendering without this addon, and it failing with the addon.

**Link: ** Working: https://github.com/jas7457/ember-react/tree/main and not working: https://github.com/jas7457/ember-react/tree/ember-cli-typescript

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

I expect the build to work fine and the babel transforms added in my ember-cli-build to work.

What happened instead?

I get an error when trying to run yarn start, presumably because ember-cli-typescript tries to alter my jsx code before my defined transform-react-jsx babel plugin gets a chance to run.

Build Error (broccoli-persistent-filter:Babel > [Babel: ember-react]) in ember-react/components/Test.js

/Users/jaddleman/dev/ember-react/ember-react/components/Test.js: Unexpected token, expected "," (8:17)

   6 |   return (
   7 |     <div>
>  8 |       <div>Hello world from React</div>
     |                  ^
   9 |       <div>Clicks: {count}</div>
  10 |       <div>
  11 |         <button onClick={() => setCount(count + 1)}>Add count</button>


Stack Trace and Error Report: /var/folders/h7/cyk51_mj0pgbcvw4482rvftm0000gp/T/error.dump.07128b9e9215ad7e7a2834e6ecd5e680.log

If it helps, this is the error log:

=================================================================================

ENV Summary:

  TIME: Mon Dec 20 2021 11:39:52 GMT-0500 (Eastern Standard Time)
  TITLE: ember
  ARGV:
  - /Users/jaddleman/.nvm/versions/node/v14.17.3/bin/node
  - /Users/jaddleman/dev/ember-react/node_modules/.bin/ember
  - serve
  EXEC_PATH: /Users/jaddleman/.nvm/versions/node/v14.17.3/bin/node
  TMPDIR: /var/folders/h7/cyk51_mj0pgbcvw4482rvftm0000gp/T
  SHELL: /bin/zsh
  PATH:
  - /var/folders/h7/cyk51_mj0pgbcvw4482rvftm0000gp/T/yarn--1640018379297-0.786610488443716
  - /Users/jaddleman/dev/ember-react/node_modules/.bin
  - /Users/jaddleman/.config/yarn/link/node_modules/.bin
  - /Users/jaddleman/.nvm/versions/node/v14.17.3/libexec/lib/node_modules/npm/bin/node-gyp-bin
  - /Users/jaddleman/.nvm/versions/node/v14.17.3/lib/node_modules/npm/bin/node-gyp-bin
  - /Users/jaddleman/.nvm/versions/node/v14.17.3/bin/node_modules/npm/bin/node-gyp-bin
  - /Users/jaddleman/.nvm/versions/node/v14.17.3/bin
  - /usr/local/bin
  - /usr/bin
  - /bin
  - /usr/sbin
  - /sbin
  - /usr/local/munki
  PLATFORM: darwin x64
  FREEMEM: 40767488
  TOTALMEM: 17179869184
  UPTIME: 530627
  LOADAVG: 2.86865234375,3.2919921875,3.283203125
  CPUS:
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  - Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz - 2600
  ENDIANNESS: LE
  VERSIONS:
  - ares: 1.17.1
  - brotli: 1.0.9
  - cldr: 39.0
  - icu: 69.1
  - llhttp: 2.1.3
  - modules: 83
  - napi: 8
  - nghttp2: 1.42.0
  - node: 14.17.3
  - openssl: 1.1.1k
  - tz: 2021a
  - unicode: 13.0
  - uv: 1.41.0
  - v8: 8.4.371.23-node.67
  - zlib: 1.2.11

ERROR Summary:

  - broccoliBuilderErrorStack: SyntaxError: /Users/jaddleman/dev/ember-react/ember-react/components/Test.js: Unexpected token, expected "," (8:17)

   6 |   return (
   7 |     <div>
>  8 |       <div>Hello world from React</div>
     |                  ^
   9 |       <div>Clicks: {count}</div>
  10 |       <div>
  11 |         <button onClick={() => setCount(count + 1)}>Add count</button>
    at Object._raise (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:569:17)
    at Object.raiseWithData (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:562:17)
    at Object.raise (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:523:17)
    at Object.unexpected (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:3601:16)
    at Object.expect (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:3575:28)
    at Object.parseParenAndDistinguishExpression (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:12353:14)
    at Object.parseExprAtom (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:11964:23)
    at Object.parseExprSubscripts (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:11654:23)
    at Object.parseUpdate (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:11634:21)
    at Object.parseMaybeUnary (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:11609:23)
  - code: [undefined]
  - codeFrame: /Users/jaddleman/dev/ember-react/ember-react/components/Test.js: Unexpected token, expected "," (8:17)

   6 |   return (
   7 |     <div>
>  8 |       <div>Hello world from React</div>
     |                  ^
   9 |       <div>Clicks: {count}</div>
  10 |       <div>
  11 |         <button onClick={() => setCount(count + 1)}>Add count</button>
  - errorMessage: ember-react/components/Test.js: /Users/jaddleman/dev/ember-react/ember-react/components/Test.js: Unexpected token, expected "," (8:17)

   6 |   return (
   7 |     <div>
>  8 |       <div>Hello world from React</div>
     |                  ^
   9 |       <div>Clicks: {count}</div>
  10 |       <div>
  11 |         <button onClick={() => setCount(count + 1)}>Add count</button>
        in /var/folders/h7/cyk51_mj0pgbcvw4482rvftm0000gp/T/broccoli-59389vI1oJl4nqFPy/out-281-funnel
        at broccoli-persistent-filter:Babel > [Babel: ember-react] (Babel: ember-react)
  - errorType: Build Error
  - location:
    - column: [undefined]
    - file: ember-react/components/Test.js
    - line: [undefined]
    - treeDir: /var/folders/h7/cyk51_mj0pgbcvw4482rvftm0000gp/T/broccoli-59389vI1oJl4nqFPy/out-281-funnel
  - message: ember-react/components/Test.js: /Users/jaddleman/dev/ember-react/ember-react/components/Test.js: Unexpected token, expected "," (8:17)

   6 |   return (
   7 |     <div>
>  8 |       <div>Hello world from React</div>
     |                  ^
   9 |       <div>Clicks: {count}</div>
  10 |       <div>
  11 |         <button onClick={() => setCount(count + 1)}>Add count</button>
        in /var/folders/h7/cyk51_mj0pgbcvw4482rvftm0000gp/T/broccoli-59389vI1oJl4nqFPy/out-281-funnel
        at broccoli-persistent-filter:Babel > [Babel: ember-react] (Babel: ember-react)
  - name: Error
  - nodeAnnotation: Babel: ember-react
  - nodeName: broccoli-persistent-filter:Babel > [Babel: ember-react]
  - originalErrorMessage: /Users/jaddleman/dev/ember-react/ember-react/components/Test.js: Unexpected token, expected "," (8:17)

   6 |   return (
   7 |     <div>
>  8 |       <div>Hello world from React</div>
     |                  ^
   9 |       <div>Clicks: {count}</div>
  10 |       <div>
  11 |         <button onClick={() => setCount(count + 1)}>Add count</button>
  - stack: SyntaxError: /Users/jaddleman/dev/ember-react/ember-react/components/Test.js: Unexpected token, expected "," (8:17)

   6 |   return (
   7 |     <div>
>  8 |       <div>Hello world from React</div>
     |                  ^
   9 |       <div>Clicks: {count}</div>
  10 |       <div>
  11 |         <button onClick={() => setCount(count + 1)}>Add count</button>
    at Object._raise (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:569:17)
    at Object.raiseWithData (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:562:17)
    at Object.raise (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:523:17)
    at Object.unexpected (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:3601:16)
    at Object.expect (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:3575:28)
    at Object.parseParenAndDistinguishExpression (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:12353:14)
    at Object.parseExprAtom (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:11964:23)
    at Object.parseExprSubscripts (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:11654:23)
    at Object.parseUpdate (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:11634:21)
    at Object.parseMaybeUnary (/Users/jaddleman/dev/ember-react/node_modules/@babel/parser/lib/index.js:11609:23)

=================================================================================

Additional notes

I was following the post here to add React components to Ember: https://medium.com/front-end-weekly/using-react-components-in-your-ember-app-8f7805d409b0

I skipped a lot of what was said because it looks dated. The main thing that I did was add the two babel plugins in my ember-cli-build.js file and added React and ReactDOM, the rest seems like unnecessary cruft.

jas7457 avatar Dec 20 '21 16:12 jas7457

Hi @jas7457 – sorry we haven't been able to respond here (been very busy since you filed this!). Have you been able to get it sorted?

chriskrycho avatar Jan 25 '22 16:01 chriskrycho

Hi @chriskrycho, no luck getting it working. I think that ember-cli-typescript is likely running before the babel plugins have had a chance to transform the code. I don't know enough about Ember plugins to do much fruitful debugging myself.

jas7457 avatar Jan 25 '22 21:01 jas7457

Actually in this case it's upstream, in ember-cli-babel itself. For annoying historical reasons, we special-case the handling there (using the presence of ember-cli-typescript as a flag for including TS or not) to make sure that the decorators, native class, and TS plugins all run in the right order to make sure the compiled output comes out correctly. Decorators, it turns out, are the worst.

You should be able to configure ember-cli-babel via its config options in your app or addon to include the JSX plugin before the TS plugin (I think that's the issue you're seeing).

chriskrycho avatar Jan 25 '22 23:01 chriskrycho

Hey @chriskrycho I have the same issue, but I didn't understand the solution. I've also tried to ask in Discord, but no response there

oriSomething avatar May 31 '22 06:05 oriSomething

We now recommend that people switch to using ember-cli-babel for apps (as documented here) and the rollup plugin configured as part of the v2 add-on build for add-ons, in conjunction with running glint or tsc directly on their projects. Accordingly, although this should not be an issue, even if it is we will not be addressing it, as we are moving this package into maintenance mode. Thanks!

chriskrycho avatar Sep 28 '23 22:09 chriskrycho