<p dir="auto">In <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="323283498" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/7934" data-hovercard-type="pull_request" data-hovercard-url="/babel/babel/pull/7934/hovercard" href="https://github.com/babel/babel/pull/7934">#7934</a> the support for this new flow call type parameters has been implemented, but it was guarded by some check, namely that the file is actually checked by flow.<br>
The problem is that the check doesn't work properly for us, where the <code class="notranslate">flow</code> pragma comes after a copyright comment, eg:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

// @flow

import * as React from 'react';"><pre class="notranslate"><span class="pl-c">/* This Source Code Form is subject to the terms of the Mozilla Public</span>
<span class="pl-c"> * License, v. 2.0. If a copy of the MPL was not distributed with this</span>
<span class="pl-c"> * file, You can obtain one at http://mozilla.org/MPL/2.0/. */</span>

<span class="pl-c">// <span class="pl-k">@flow</span></span>

<span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">As a result the stripping behavior isn't triggered.</p>
<p dir="auto">If possible, it would be much better to check other comments at the top of the file until the first code line.</p>
<p dir="auto">Using babel 7.4.3.</p>
<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong><br>
When the <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/flow/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/flow">@flow</a> pragma is not specified as the first comment of a JS or JSX file, babel parser will not be able to parse any code that passes type arguments.</p>
<p dir="auto"><strong>Input Code</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// arbitrary comment
// @flow

const n: number = 5; // this works fine

const set = new Set&lt;number&gt;([1, 2, 3]);
        // unexpected token^"><pre class="notranslate"><span class="pl-c">// arbitrary comment</span>
<span class="pl-c">// <span class="pl-k">@flow</span></span>

<span class="pl-k">const</span> <span class="pl-s1">n</span>: <span class="pl-s1">number</span> <span class="pl-c1">=</span> <span class="pl-c1">5</span><span class="pl-kos">;</span> <span class="pl-c">// this works fine</span>

<span class="pl-k">const</span> <span class="pl-s1">set</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Set</span><span class="pl-c1">&lt;</span><span class="pl-s1">number</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-c">// unexpected token^</span></pre></div>
<p dir="auto"><strong>Expected behavior/code</strong><br>
Flow should be able to parse functions that are called with type arguments so long as the <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/flow/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/flow">@flow</a> pragma exists before any code.</p>
<p dir="auto"><strong>Babel Configuration (.babelrc)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  presets: [
    &quot;@babel/preset-env&quot;,
    &quot;@babel/preset-react&quot;,
    &quot;@babel/preset-flow&quot;,
  ]
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-c1">presets</span>: <span class="pl-kos">[</span>
    <span class="pl-s">"@babel/preset-env"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/preset-react"</span><span class="pl-kos">,</span>
    <span class="pl-s">"@babel/preset-flow"</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version: [^7.0.0]</li>
<li>Node/npm version: [Node 8.11.1]</li>
<li>OS: [OSX 10.13.4]</li>
<li>Monorepo: [yes]</li>
<li>How you are using Babel: [<code class="notranslate">loader</code>]</li>
</ul>
<p dir="auto"><strong>Possible Solution</strong></p>
<p dir="auto">It appears this line ignores the flow pragma if it isn't found in the first comment of the source file.<br>
</p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/babel/babel/blob/c586d4e8cac816941bf2ba559472fd9cc3150921/packages/babel-parser/src/plugins/flow.js#L77">babel/packages/babel-parser/src/plugins/flow.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 77
      in
      <a data-pjax="true" class="commit-tease-sha" href="/babel/babel/commit/c586d4e8cac816941bf2ba559472fd9cc3150921">c586d4e</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L77" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="77"></td>
          <td id="LC77" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-c">// to "@flow" or "@noflow" if we see a pragma. Transitions to null if we are</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">This could be changed a-la Flow-Strip-Types, which first checks all comments for a flow pragma before it begins transforming. (<a href="https://github.com/babel/babel/blob/c586d4e8cac816941bf2ba559472fd9cc3150921/packages/babel-plugin-transform-flow-strip-types/src/index.js">https://github.com/babel/babel/blob/c586d4e8cac816941bf2ba559472fd9cc3150921/packages/babel-plugin-transform-flow-strip-types/src/index.js</a>). Perhaps a solution like this could be used here as well.</p>