<h3 dir="auto"><g-emoji class="g-emoji" alias="computer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4bb.png">💻</g-emoji></h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Would you like to work on a fix?</li>
</ul>
<h3 dir="auto">How are you using Babel?</h3>
<p dir="auto">@babel/eslint-parser</p>
<h3 dir="auto">Input code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="//  &quot;babel-eslint&quot;: &quot;^10.0.3&quot;,
const asyncFn = () =&gt; {
    return new Promise((reslove) =&gt; {
        setTimeout(() =&gt; {
            reslove({
                code: 200,
                // The data may be null
                data: {
                    items: [],
                    total: '',
                }
            })
        })
    })
}

const getAsyncResult = async () =&gt; {
    const res = await asyncFn();
    if (res.code === 200 &amp;&amp; res.data) {
        // The data may be null
       // ？with `${variable}`  must error 
        res?.data?.items?.forEach((item) =&gt; {
            item.name = `${item.otherName || 'test'}`
        })
    }
}
"><pre class="notranslate"><span class="pl-c">//  "babel-eslint": "^10.0.3",</span>
<span class="pl-k">const</span> <span class="pl-en">asyncFn</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-v">Promise</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">reslove</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
            <span class="pl-s1">reslove</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
                <span class="pl-c1">code</span>: <span class="pl-c1">200</span><span class="pl-kos">,</span>
                <span class="pl-c">// The data may be null</span>
                <span class="pl-c1">data</span>: <span class="pl-kos">{</span>
                    <span class="pl-c1">items</span>: <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
                    <span class="pl-c1">total</span>: <span class="pl-s">''</span><span class="pl-kos">,</span>
                <span class="pl-kos">}</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-en">getAsyncResult</span> <span class="pl-c1">=</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">res</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-en">asyncFn</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-c1">code</span> <span class="pl-c1">===</span> <span class="pl-c1">200</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-c">// The data may be null</span>
       <span class="pl-c">// ？with `${variable}`  must error </span>
        <span class="pl-s1">res</span><span class="pl-kos">?.</span><span class="pl-c1">data</span><span class="pl-kos">?.</span><span class="pl-c1">items</span><span class="pl-kos">?.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">item</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
            <span class="pl-s1">item</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">item</span><span class="pl-kos">.</span><span class="pl-c1">otherName</span> <span class="pl-c1">||</span> <span class="pl-s">'test'</span><span class="pl-kos">}</span></span>`</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Configuration file name</h3>
<p dir="auto">babel.config.js</p>
<h3 dir="auto">Configuration</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Current and expected behavior</h3>
<p dir="auto">I want to use chain operation to avoid errors</p>
<h3 dir="auto">Environment</h3>
<ul dir="auto">
<li>Babel version(s): [^10.0.3]</li>
<li>Node: [v14.7.0]</li>
<li>yarn version: [1.22.15]</li>
<li>OS: [macOS 11.6.1]</li>
</ul>
<h3 dir="auto">Possible solution</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">Additional context</h3>
<p dir="auto"><em>No response</em></p>
<p dir="auto">It throws error when dynamic import, template literal inline and rule <code class="notranslate">template-curly-spacing</code> as follow:</p>
<h4 dir="auto">Tested on:</h4>
<p dir="auto"><code class="notranslate">babel-eslint@10.0.3</code> (with <code class="notranslate">@babel/parser@7.7.7</code>)<br>
<code class="notranslate">eslint@6.7.2</code></p>
<h4 dir="auto">Sample code:</h4>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import(`${'package.json'}`)"><pre class="notranslate"><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s">'package.json'</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span></pre></div>
<h4 dir="auto">.eslintrc.json</h4>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;parser&quot;: &quot;babel-eslint&quot;,
  &quot;rules&quot;: {
    &quot;template-curly-spacing&quot;: [&quot;error&quot;, &quot;never&quot;]
  }
}"><pre class="notranslate">{
  <span class="pl-ent">"parser"</span>: <span class="pl-s"><span class="pl-pds">"</span>babel-eslint<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"rules"</span>: {
    <span class="pl-ent">"template-curly-spacing"</span>: [<span class="pl-s"><span class="pl-pds">"</span>error<span class="pl-pds">"</span></span>, <span class="pl-s"><span class="pl-pds">"</span>never<span class="pl-pds">"</span></span>]
  }
}</pre></div>
<p dir="auto">The problem is coming from <code class="notranslate">@babel/parser@7.7.7</code>, which added <code class="notranslate">ImportExpression</code>.</p>
<p dir="auto"><em>Originally posted by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/yitomok/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/yitomok">@yitomok</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="492992578" data-permission-text="Title is private" data-url="https://github.com/babel/babel-eslint/issues/799" data-hovercard-type="issue" data-hovercard-url="/babel/babel-eslint/issues/799/hovercard?comment_id=567598343&amp;comment_type=issue_comment" href="https://github.com/babel/babel-eslint/issues/799#issuecomment-567598343">babel/babel-eslint#799 (comment)</a></em></p>
<hr>
<p dir="auto">Edits by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/JLHwung/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/JLHwung">@JLHwung</a></p>
<p dir="auto">If you come across this issue from search engine, see below for the solution:</p>
<ol dir="auto">
<li>uninstall <code class="notranslate">babel-eslint</code></li>
<li>install <code class="notranslate">@babel/eslint-parser</code></li>
<li>replace <code class="notranslate">babel-eslint</code> by <code class="notranslate">@babel/eslint-parser</code> in your ESLint config</li>
<li>if you use <code class="notranslate">eslint-plugin-babel</code>, do 4.a - 4.c, otherwise skip it<br>
4.a uninstall <code class="notranslate">eslint-plugin-babel</code><br>
4.b install <code class="notranslate">@babel/eslint-plugin</code><br>
4.c replace <code class="notranslate">"babel"</code> or <code class="notranslate">"eslint-plugin-babel"</code> to <code class="notranslate">"@babel"</code></li>
<li>The working ESLint config should look like <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="541313842" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/10904" data-hovercard-type="issue" data-hovercard-url="/babel/babel/issues/10904/hovercard?comment_id=691827355&amp;comment_type=issue_comment" href="https://github.com/babel/babel/issues/10904#issuecomment-691827355">#10904 (comment)</a></li>
</ol>