Create-react-app: Strange SyntaxError when running tests, probably transpiler bug

[MOZGIII]

Is this a bug report?

Yes.

Can you also reproduce the problem with npm 4.x?

I'm using yarn. Tried npm 4 though. Same.

Which terms did you search for in User Guide?

Did a quick look-through. I searched google for SyntaxError: Unexpected identifier, did not found the solution.

Environment

1. node -v: v8.4.0
2. npm -v: 4.6.1 (was 5.x before)
3. yarn --version: 0.27.5
4. npm ls react-scripts: [email protected] (also checked at [email protected] with yarn)

Switching yarn/npm seems to have no effect.

Then, specify:

1. Operating system: Ubuntu xenial
2. Browser and version (if relevant): -

Steps to Reproduce

The issue is really strange.

1. Create a new project, cd into it.

2. yarn add flow-bin ([email protected]), then yarn flow init.

3. Create two files:

src/dummy.js

// @flow
export const dummmmmmmmmmmmmmmmmmy = async (
  response: Response
): Promise<Response> => {
  if (!response.ok) {
    const text = await response.text();
    throw Error(text);
  }
  return response;
};

src/dummy.test.js

// @flow
import { dummmmmmmmmmmmmmmmmmy } from "./dummy";

it("should run", async () => {
  await dummmmmmmmmmmmmmmmmmy(fetch("https://google.com"));
  expect(true);
});

1. yarn test

Expected Behavior

Tests run successfully or at least fail with some sane error.

Actual Behavior

 PASS  src/App.test.js
 FAIL  src/dummy.test.js
  ● Test suite failed to run

    .../issue/src/dummy.js:6
        const text = await response.text();
                           ^^^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/dummy.test.js:2:14)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.517s, estimated 1s
Ran all test suites related to changed files.

Watch Usage
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
Done in 7.55s.

Seems to be related to the way code is formatted. :open_mouth:

Reproducible Demo

https://github.com/MOZGIII/js-bug-demo-1

Just cone it and yarn install.
Run CI=true yarn test. Pretend you're CI to run all tests.

[MOZGIII]

Ping

[MOZGIII]

Still have this error.

[gaearon]

Sorry, we were busy with releasing React 16 and this project did not receive much attention at the time.

[gaearon]

I can reproduce this. But I don't know if it's a bug with Babel or something else.

The minimal example is:

const x = async (
  x: A
) => {
  const text = await x;
};

Interestingly, removing newlines around the argument list fixes it.

[gaearon]

I think the next step here is to create a minimal reproducing example with Babel and without CRA.

[gaearon]

This appears fixed in Babel 7 and doesn't happen in our next branch. We'll publish first 2.0 alphas soon.

[gaearon]

I'm adding a regression test in https://github.com/facebookincubator/create-react-app/pull/3791 so this doesn't break again.