Typescript prevents compilation

[wafisher]

Is this a bug report?

Yes

Did you try recovering your dependencies?

$ yarn --version
1.12.3

Environment

Environment Info:

  System:
    OS: macOS 10.14.1
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 11.0.0 - /usr/local/bin/node
    Yarn: 1.12.3 - ~/.yarn/bin/yarn
    npm: 6.4.1 - ~/Desktop/Radar/frontend/node_modules/.bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Safari: 12.0.1
  npmPackages:
    @types/react: ^16.7.10 => 16.7.10 
    @types/react-dom: ^16.0.11 => 16.0.11 
    react: ^16.6.3 => 16.6.3 
    react-dom: ^16.6.3 => 16.6.3 
    react-scripts: 2.1.1 => 2.1.1 
  npmGlobalPackages:
    create-react-app: Not Found

Expected Behavior

I expect yarn start to compile even with Typescript errors. Typescript is, by my understanding of CRA's philosophy, just an extra layer but won't prevent compilation. yarn start worked fine with Typescript errors a few days ago, not sure what I changed but I came into Typescript pre-2.1.0 and I may have updated accidentally.

Actual Behavior

I get a Typescript compile error. Using a reproducible demo:

I create a simple reproducible demo:

$ yarn create react-app my-app --scripts-version=react-scripts-ts
$ cd my-app
$ yarn add react-bootstrap@next bootstrap

with the following index.tsx:

[imports]
import Form from 'react-bootstrap/es/Form'
...

render() {
  return (
    ...
    <Form></Form>
    ....
  )
}

and I get the following error after yarn start:

(3,18): Could not find a declaration file for module 'react-bootstrap/es/Form'. '/private/tmp/my-app/node_modules/react-bootstrap/es/Form.js' implicitly has an 'any' type.
  Try `npm install @types/react-bootstrap` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-bootstrap/es/Form';`

I've been digging through the webpack configuration (slowly) and it seems like this might be related?

[Timer]

This is an actual TypeScript error. You need to follow the instructions given by the TypeScript compiler or turn off strict mode.

[wafisher]

I just want to confirm: Typescript errors will prevent compilation, is that correct?

If this is a feature not a bug, would you mind if I added something to the docs mentioning that — I think most people expect Typescript not to actually prevent compilation unless there's a parsing error.

[Timer]

Typescript errors will prevent compilation, is that correct?

Yes.

I think most people expect Typescript not to actually prevent compilation unless there's a parsing error.

Can you explain the reasoning behind this? If there's an error in your code, why would you want it to run?

[wafisher]

Well, there's an error in the Typescript, but not in what would be the compiled JS.

The change just caught me by surprise. When I added Typescript a few months ago to my CRA project, the behavior was Typescript checking in my IDE/console but it would still compile with errors (strip out types) and yarn run didn't know anything about types.

I understand the decision you've made — not arguing against that. Just saying I for one was surprised by this behavior and would not have spent time filing this bug if I had realized it wasn't a bug at all (i.e. the docs had said this is what happens), which might be an indication that others will be confused.

[Timer]

When I added Typescript a few months ago to my CRA project, the behavior was Typescript checking in my IDE/console but it would still compile with errors (strip out types) and yarn run didn't know anything about types.

We've never supported TypeScript in the past -- can you elaborate on your previous setup?

---

I appreciate you bringing this up though, I know we have a lot of work to do on improving our docs. :-)

[wafisher]

Actually, I read the ^2.1.0 docs while not being on 2.1.0 (without realizing it didn't apply to me) so I ran:

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Which probably triggered IntelliJ to see I had .ts/.tsx files as I opened them, compile them (while editing) into .js files which were picked up in the compilation. So effectively a flow that didn't compile Typescript synchronously.

I'm using async: true here to great success right now, FWIW.

[Timer]

We have a PR to speed this up: #5903