<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Next.JS should successfully compile without any errors/warnings.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto"><code class="notranslate">Parse errors in imported module '../lib/Apollo/withData': Unexpected token = (24:24)  import/no-named-as-default</code><br>
<code class="notranslate">Parse errors in imported module '../lib/Apollo/withData': Unexpected token = (24:24)  import/no-named-as-default-member</code></p>
<p dir="auto">Next.JS + ESLint is outputting an error with the following message:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/74a1685c35410c6b19c7bf20af42c4cf0c42f30f18484ef992626de1e32f8743/68747470733a2f2f692e696d6775722e636f6d2f724b6f636774472e706e67"><img src="https://camo.githubusercontent.com/74a1685c35410c6b19c7bf20af42c4cf0c42f30f18484ef992626de1e32f8743/68747470733a2f2f692e696d6775722e636f6d2f724b6f636774472e706e67" alt="Error" data-canonical-src="https://i.imgur.com/rKocgtG.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">N/A</p>
<h2 dir="auto">Context</h2>
<p dir="auto">I am trying to get Next.JS working with the ApolloClient.. and also with the new _app.js functionality. However I am getting the following error above when I try to use <code class="notranslate">withData</code> in my <code class="notranslate">_app.js</code> file. I have researched this error and it seems to be something to do with Babel and the static properties that can only be used with ES7? However I am using the decoratorsLegacy option that I found in one of the example projects in nextjs. Does anyone know how I can fix this?</p>
<p dir="auto">.babelrc</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;next/babel&quot;,
    [&quot;@babel/preset-stage-0&quot;, { &quot;decoratorsLegacy&quot;: true }]
  ]
}"><pre class="notranslate"><code class="notranslate">{
  "presets": [
    "next/babel",
    ["@babel/preset-stage-0", { "decoratorsLegacy": true }]
  ]
}
</code></pre></div>
<p dir="auto">utils.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export function isAuthPath(path) {
  // Other routes can be added like /forgot-password, etc
  return path === '/login' || path === '/signup'
}"><pre class="notranslate"><code class="notranslate">export function isAuthPath(path) {
  // Other routes can be added like /forgot-password, etc
  return path === '/login' || path === '/signup'
}
</code></pre></div>
<p dir="auto">_app.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react'
import App, { Container } from 'next/app'

import { isAuthPath } from '../lib/utils'

import redirect from '../lib/redirect'
import withData from '../lib/Apollo/withData'
import checkLoggedIn from '../lib/Apollo/checkLoggedIn'

class MyApp extends App {
  static async getInitialProps({ Component, ctx }, apolloClient) {
    let pageProps = {}

    const { loggedInUser } = await checkLoggedIn(ctx, apolloClient)

    // Check whether path is an &quot;authorization&quot; specific page
    const auth = isAuthPath(ctx.asPath)

    if (!loggedInUser.me) {
      // User is not logged in. Redirect to Login.
      if (!auth) redirect(ctx, '/login')
    } else if (auth) {
      // User is logged in. Redirect to Dashboard.
      redirect(ctx, '/')
    }

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  componentDidCatch(error, errorInfo) {
    super.componentDidCatch(error, errorInfo)
  }

  render() {
    const { Component, pageProps } = this.props
    return (
      &lt;Container&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/Container&gt;
    )
  }
}

export default withData(MyApp)"><pre class="notranslate"><code class="notranslate">import React from 'react'
import App, { Container } from 'next/app'

import { isAuthPath } from '../lib/utils'

import redirect from '../lib/redirect'
import withData from '../lib/Apollo/withData'
import checkLoggedIn from '../lib/Apollo/checkLoggedIn'

class MyApp extends App {
  static async getInitialProps({ Component, ctx }, apolloClient) {
    let pageProps = {}

    const { loggedInUser } = await checkLoggedIn(ctx, apolloClient)

    // Check whether path is an "authorization" specific page
    const auth = isAuthPath(ctx.asPath)

    if (!loggedInUser.me) {
      // User is not logged in. Redirect to Login.
      if (!auth) redirect(ctx, '/login')
    } else if (auth) {
      // User is logged in. Redirect to Dashboard.
      redirect(ctx, '/')
    }

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  componentDidCatch(error, errorInfo) {
    super.componentDidCatch(error, errorInfo)
  }

  render() {
    const { Component, pageProps } = this.props
    return (
      &lt;Container&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/Container&gt;
    )
  }
}

export default withData(MyApp)
</code></pre></div>
<p dir="auto">withData.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React from 'react'
import cookie from 'cookie'
import PropTypes from 'prop-types'
import { ApolloProvider, getDataFromTree } from 'react-apollo'
import Head from 'next/head'

import initApollo from './initApollo'

function parseCookies(ctx = {}, options = {}) {
  return cookie.parse(
    ctx.req &amp;&amp; ctx.req.headers.cookie
      ? ctx.req.headers.cookie
      : document.cookie,
    options
  )
}

function getComponentDisplayName(Component) {
  return Component.displayName || Component.name || 'Component'
}

export default ComposedComponent =&gt;
  class WithData extends React.Component {
    static displayName = `WithData(${getComponentDisplayName(
      ComposedComponent
    )})`
    static propTypes = {
      serverState: PropTypes.object.isRequired
    }

    static async getInitialProps(ctx) {
      let serverState = {}

      // Setup a server-side one-time-use apollo client for initial props and
      // rendering (on server)
      let apollo = initApollo(
        {},
        {
          getToken: () =&gt; parseCookies(ctx).token
        }
      )

      // Evaluate the composed component's getInitialProps()
      let composedInitialProps = {}
      if (ComposedComponent.getInitialProps) {
        composedInitialProps = await ComposedComponent.getInitialProps(
          ctx,
          apollo
        )
      }

      // Run all graphql queries in the component tree
      // and extract the resulting data
      if (!process.browser) {
        if (ctx.res &amp;&amp; ctx.res.finished) {
          // When redirecting, the response is finished.
          // No point in continuing to render
          return
        }

        // Provide the `url` prop data in case a graphql query uses it
        const url = { query: ctx.query, pathname: ctx.pathname }
        try {
          // Run all GraphQL queries
          const app = (
            &lt;ApolloProvider client={apollo}&gt;
              &lt;ComposedComponent url={url} {...composedInitialProps} /&gt;
            &lt;/ApolloProvider&gt;
          )
          await getDataFromTree(app, {
            router: {
              query: ctx.query,
              pathname: ctx.pathname,
              asPath: ctx.asPath
            }
          })
        } catch (error) {
          // Prevent Apollo Client GraphQL errors from crashing SSR.
          // Handle them in components via the data.error prop:
          // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
        }
        // getDataFromTree does not call componentWillUnmount
        // head side effect therefore need to be cleared manually
        Head.rewind()

        // Extract query data from the Apollo's store
        serverState = apollo.cache.extract()
      }

      return {
        serverState,
        ...composedInitialProps
      }
    }

    constructor(props) {
      super(props)
      // Note: Apollo should never be used on the server side beyond the initial
      // render within `getInitialProps()` above (since the entire prop tree
      // will be initialized there), meaning the below will only ever be
      // executed on the client.
      this.apollo = initApollo(this.props.serverState, {
        getToken: () =&gt; parseCookies().token
      })
    }

    render() {
      return (
        &lt;ApolloProvider client={this.apollo}&gt;
          &lt;ComposedComponent {...this.props} /&gt;
        &lt;/ApolloProvider&gt;
      )
    }
  }"><pre class="notranslate"><code class="notranslate">import React from 'react'
import cookie from 'cookie'
import PropTypes from 'prop-types'
import { ApolloProvider, getDataFromTree } from 'react-apollo'
import Head from 'next/head'

import initApollo from './initApollo'

function parseCookies(ctx = {}, options = {}) {
  return cookie.parse(
    ctx.req &amp;&amp; ctx.req.headers.cookie
      ? ctx.req.headers.cookie
      : document.cookie,
    options
  )
}

function getComponentDisplayName(Component) {
  return Component.displayName || Component.name || 'Component'
}

export default ComposedComponent =&gt;
  class WithData extends React.Component {
    static displayName = `WithData(${getComponentDisplayName(
      ComposedComponent
    )})`
    static propTypes = {
      serverState: PropTypes.object.isRequired
    }

    static async getInitialProps(ctx) {
      let serverState = {}

      // Setup a server-side one-time-use apollo client for initial props and
      // rendering (on server)
      let apollo = initApollo(
        {},
        {
          getToken: () =&gt; parseCookies(ctx).token
        }
      )

      // Evaluate the composed component's getInitialProps()
      let composedInitialProps = {}
      if (ComposedComponent.getInitialProps) {
        composedInitialProps = await ComposedComponent.getInitialProps(
          ctx,
          apollo
        )
      }

      // Run all graphql queries in the component tree
      // and extract the resulting data
      if (!process.browser) {
        if (ctx.res &amp;&amp; ctx.res.finished) {
          // When redirecting, the response is finished.
          // No point in continuing to render
          return
        }

        // Provide the `url` prop data in case a graphql query uses it
        const url = { query: ctx.query, pathname: ctx.pathname }
        try {
          // Run all GraphQL queries
          const app = (
            &lt;ApolloProvider client={apollo}&gt;
              &lt;ComposedComponent url={url} {...composedInitialProps} /&gt;
            &lt;/ApolloProvider&gt;
          )
          await getDataFromTree(app, {
            router: {
              query: ctx.query,
              pathname: ctx.pathname,
              asPath: ctx.asPath
            }
          })
        } catch (error) {
          // Prevent Apollo Client GraphQL errors from crashing SSR.
          // Handle them in components via the data.error prop:
          // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
        }
        // getDataFromTree does not call componentWillUnmount
        // head side effect therefore need to be cleared manually
        Head.rewind()

        // Extract query data from the Apollo's store
        serverState = apollo.cache.extract()
      }

      return {
        serverState,
        ...composedInitialProps
      }
    }

    constructor(props) {
      super(props)
      // Note: Apollo should never be used on the server side beyond the initial
      // render within `getInitialProps()` above (since the entire prop tree
      // will be initialized there), meaning the below will only ever be
      // executed on the client.
      this.apollo = initApollo(this.props.serverState, {
        getToken: () =&gt; parseCookies().token
      })
    }

    render() {
      return (
        &lt;ApolloProvider client={this.apollo}&gt;
          &lt;ComposedComponent {...this.props} /&gt;
        &lt;/ApolloProvider&gt;
      )
    }
  }
</code></pre></div>
<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>6.0.2</td>
</tr>
<tr>
<td>node</td>
<td>9.11.1</td>
</tr>
<tr>
<td>OS</td>
<td>Windows 10</td>
</tr>
<tr>
<td>browser</td>
<td>Google Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">When running next.js in dev mode and clicking on a link, the error <code class="notranslate">Unhandled Rejection (TypeError): Cannot read property 'call' of undefined</code> until the linked page has been refreshed at least once. It seems to be related to using sass, css and typescript exports.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Follow the readme in this repository: <a href="https://github.com/leanovate/nextjs-hmr-bug">https://github.com/leanovate/nextjs-hmr-bug</a></p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">When clicking the link, the linked page appears and no error is thrown.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4339283/48205373-6bd69c00-e36c-11e8-9544-dfe4a5b41f94.gif"><img src="https://user-images.githubusercontent.com/4339283/48205373-6bd69c00-e36c-11e8-9544-dfe4a5b41f94.gif" alt="hmr-bug" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4339283/48205496-a2141b80-e36c-11e8-9adf-81b6a3adeb20.png"><img src="https://user-images.githubusercontent.com/4339283/48205496-a2141b80-e36c-11e8-9adf-81b6a3adeb20.png" alt="hmr-bug" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOs</li>
<li>Browser: Chrome version 70.0.3538.77</li>
<li>Version of Next.js: 7.0.2</li>
</ul>