<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong><br>
In time I pass the object, which contains the literal declared parameter called class, to the React component, I receive SyntaxError.</p>
<p dir="auto">&lt;div attrs={{class: 'A'}}&gt;Children&lt;/div&gt;</p>
<p dir="auto"><strong>Expected behavior/code</strong><br>
Expected behavior is to get the correct parsed attributes like { class: 'A'}</p>
<p dir="auto"><strong>Babel Configuration (.babelrc, package.json, cli command)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        useBuiltIns: 'usage',
      },
    ],
    '@babel/preset-flow',
    '@babel/preset-react',
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-optional-chaining',
    [
      '@babel/plugin-transform-runtime',
      {
        useESModules: true,
      },
    ],
  ],
  env: {
    test: {
      presets: ['@babel/preset-env'],
      plugins: ['babel-plugin-require-context-hook', '@babel/plugin-transform-runtime'],
    },
  },
}
"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">presets</span>: <span class="pl-kos">[</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">'@babel/preset-env'</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">modules</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
        <span class="pl-c1">useBuiltIns</span>: <span class="pl-s">'usage'</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-s">'@babel/preset-flow'</span><span class="pl-kos">,</span>
    <span class="pl-s">'@babel/preset-react'</span><span class="pl-kos">,</span>
  <span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-s">'@babel/plugin-proposal-class-properties'</span><span class="pl-kos">,</span>
    <span class="pl-s">'@babel/plugin-proposal-export-default-from'</span><span class="pl-kos">,</span>
    <span class="pl-s">'@babel/plugin-proposal-nullish-coalescing-operator'</span><span class="pl-kos">,</span>
    <span class="pl-s">'@babel/plugin-proposal-optional-chaining'</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span>
      <span class="pl-s">'@babel/plugin-transform-runtime'</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">useESModules</span>: <span class="pl-c1">true</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-c1">env</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">test</span>: <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-kos">,</span>
      <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span><span class="pl-s">'babel-plugin-require-context-hook'</span><span class="pl-kos">,</span> <span class="pl-s">'@babel/plugin-transform-runtime'</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></pre></div>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>Babel version(s): 7.1.2</li>
<li>Node/npm version: 8.12.0/6.4.1</li>
<li>OS: OS X 10.14</li>
<li>Lerna</li>
<li>How you are using Babel: loader</li>
</ul>
<p dir="auto"><strong>Additional context/Screenshots</strong><br>
Examining revealed, that if I would write an object with JSON, it works: &lt;div attrs={{'class': 'A'}}&gt;Children<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4025552/46867936-f6d47d00-ce26-11e8-8897-7291bc20782f.png"><img width="1334" alt="screenshot 2018-10-12 at 13 55 59" src="https://user-images.githubusercontent.com/4025552/46867936-f6d47d00-ce26-11e8-8897-7291bc20782f.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Bug Report</h2>
<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="&lt;Select prop={{ class: 'test' }} /&gt;;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Select</span> <span class="pl-c1">prop</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">class</span>: <span class="pl-s">'test'</span> <span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Current Behavior</strong></p>
<p dir="auto">With the latest version of <code class="notranslate">@babel/parser@7.1.3</code> it fails with the error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="SyntaxError: /Users/serdiuk/coding/test/test.js: Unexpected token, expected &quot;jsxTagEnd&quot;"><pre class="notranslate"><code class="notranslate">SyntaxError: /Users/serdiuk/coding/test/test.js: Unexpected token, expected "jsxTagEnd"
</code></pre></div>
<p dir="auto"><strong>Expected behavior/code</strong></p>
<p dir="auto">With <code class="notranslate">@babel/parser@7.1.2</code> and bellow it works:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="React.createElement(Select, {
  prop: {
    class: 'test'
  }
});"><pre class="notranslate"><code class="notranslate">React.createElement(Select, {
  prop: {
    class: 'test'
  }
});
</code></pre></div>
<p dir="auto"><strong>Babel Configuration (.babelrc, package.json, cli command)</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
    &quot;presets&quot;: [&quot;@babel/preset-react&quot;]
}
"><pre class="notranslate"><span class="pl-kos">{</span>
    <span class="pl-s">"presets"</span>: <span class="pl-kos">[</span><span class="pl-s">"@babel/preset-react"</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(s): <code class="notranslate">@babel/core@7.1.2</code></li>
<li>Node/npm version: <code class="notranslate">v8.9.4</code></li>
<li>OS: OSX 10.12.6</li>
<li>Monorepo: n/a</li>
<li>How you are using Babel: cli, but also happens in <code class="notranslate">babel-loader</code></li>
</ul>
<p dir="auto"><strong>Possible Solution</strong></p>
<p dir="auto">As a current workaround I can write the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const prop = { class: 'test' };
&lt;Select prop={prop} /&gt;;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">prop</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">class</span>: <span class="pl-s">'test'</span> <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">Select</span> <span class="pl-c1">prop</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">prop</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This works with any version. But this is still an issue, because it fails to parse the code, that is supposed to be valid Javascript.</p>