<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">I've been using styled-jsx in some components and it worked well. Now I tried using it directly in a page like this:</p>
<p dir="auto"><strong>product.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import Page from './page';
import HeadInclude from './headinc';

class ProductPage extends Page {
  render() {
    return (
      &lt;div&gt;
        &lt;HeadInclude /&gt;
        &lt;h2&gt;bleh&lt;/h2&gt;
        &lt;style jsx&gt;{`
          h2 {
            color: blue;
          }
        `}
        &lt;/style&gt;
      &lt;/div&gt;
    );
  }
}

export default ProductPage;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Page</span> <span class="pl-k">from</span> <span class="pl-s">'./page'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">HeadInclude</span> <span class="pl-k">from</span> <span class="pl-s">'./headinc'</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">ProductPage</span> <span class="pl-k">extends</span> <span class="pl-v">Page</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">HeadInclude</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>bleh<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">style</span> <span class="pl-c1">jsx</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s">`</span>
<span class="pl-s">          h2 {</span>
<span class="pl-s">            color: blue;</span>
<span class="pl-s">          }</span>
<span class="pl-s">        `</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</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">export</span> <span class="pl-k">default</span> <span class="pl-v">ProductPage</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>page.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Component } from 'react';
import Local from '../src/local';

class Page extends Component {
  static getInitialProps() {
    return {
      local: Local.de_DE,
    };
  }
}

export default Page;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Local</span> <span class="pl-k">from</span> <span class="pl-s">'../src/local'</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-v">Page</span> <span class="pl-k">extends</span> <span class="pl-v">Component</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-en">getInitialProps</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">{</span>
      <span class="pl-c1">local</span>: <span class="pl-v">Local</span><span class="pl-kos">.</span><span class="pl-c1">de_DE</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">export</span> <span class="pl-k">default</span> <span class="pl-v">Page</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">If I open <code class="notranslate">localhost:3000/product</code> I suddenly get this error:</p>
<div class="highlight highlight-text-shell-session notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Error in /pages/product.js?entry
Module build failed: TypeError: /pages/product.js?entry: Cannot read property 'start' of undefined
    at processCss (/node_modules/next/node_modules/styled-jsx/dist/_utils.js:447:49)
    at PluginPass.exit (/node_modules/next/node_modules/styled-jsx/dist/babel.js:232:51)
    at newFn (/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/node_modules/babel-traverse/lib/path/context.js:117:8)
    at TraversalContext.visitQueue (/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/node_modules/babel-traverse/lib/index.js:114:17)"><pre class="notranslate"><span class="pl-c1">Error in /pages/product.js?entry</span>
<span class="pl-c1">Module build failed: TypeError: /pages/product.js?entry: Cannot read property 'start' of undefined</span>
<span class="pl-c1">    at processCss (/node_modules/next/node_modules/styled-jsx/dist/_utils.js:447:49)</span>
<span class="pl-c1">    at PluginPass.exit (/node_modules/next/node_modules/styled-jsx/dist/babel.js:232:51)</span>
<span class="pl-c1">    at newFn (/node_modules/babel-traverse/lib/visitors.js:276:21)</span>
<span class="pl-c1">    at NodePath._call (/node_modules/babel-traverse/lib/path/context.js:76:18)</span>
<span class="pl-c1">    at NodePath.call (/node_modules/babel-traverse/lib/path/context.js:48:17)</span>
<span class="pl-c1">    at NodePath.visit (/node_modules/babel-traverse/lib/path/context.js:117:8)</span>
<span class="pl-c1">    at TraversalContext.visitQueue (/node_modules/babel-traverse/lib/context.js:150:16)</span>
<span class="pl-c1">    at TraversalContext.visitMultiple (/node_modules/babel-traverse/lib/context.js:103:17)</span>
<span class="pl-c1">    at TraversalContext.visit (/node_modules/babel-traverse/lib/context.js:190:19)</span>
<span class="pl-c1">    at Function.traverse.node (/node_modules/babel-traverse/lib/index.js:114:17)</span></pre></div>
<p dir="auto">What's wrong? Everything else was working perfectly fine until I added <code class="notranslate">&lt;style jsx&gt;</code>. Also, I noticed that if I remove "jsx" so it only reads <code class="notranslate">&lt;style&gt;</code> it works as well but styles aren't scoped then. From what I understand there is an issue with babel but I don't quite understand what?</p>
<p dir="auto">I'm using:</p>
<ul dir="auto">
<li>npm 5.3.0</li>
<li>node 8.2.1</li>
<li>next 4.1.4</li>
<li>react 16.1</li>
</ul>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">I'd expect a way to configure <code class="notranslate">babel-preset-env</code> to support a narrower range of browsers, and thus use more native ES6 features. I'd like to rely on native browser implementations of classes, generators, and other commonly-supported-in-edge features. The babel-preset-env project allows for this configurability, but its encapsulation within <code class="notranslate">next/babel</code> prevents users from configuring.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">There is no route to adjusting the amount of transpilation, so ES6 code is compiled down to the lowest-common-denominator always.</p>
<h2 dir="auto">Context</h2>


<p dir="auto">My product uses generators - as part of the product - so that's one guarantee that I can rely on, and accordingly use generators in the code. Right now the over-aggressive transpilation means, among other things, that <a href="http://incaseofstairs.com/six-speed/" rel="nofollow">performance is decreased on features like for of</a>, and sourcemap debugging is less effective.</p>
<p dir="auto">I see that there <a href="https://github.com/zeit/next.js/pull/1808" data-hovercard-type="pull_request" data-hovercard-url="/vercel/next.js/pull/1808/hovercard">was already a PR suggesting this behavior</a>, but it was closed by its author. There was also <a href="https://github.com/zeit/next.js/issues/2021" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2021/hovercard">a feature request</a>, also closed. I'm more than happy to reimplement / update that PR and push this to completion, because it's important for my usecase.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>3.2.2</td>
</tr>
<tr>
<td>node</td>
<td>8.4.0</td>
</tr>
<tr>
<td>OS</td>
<td>macOS</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome</td>
</tr>
</tbody>
</table>