Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Next.JS should successfully compile without any errors/warnings.

Current Behavior

Parse errors in imported module '../lib/Apollo/withData': Unexpected token = (24:24) import/no-named-as-default

Parse errors in imported module '../lib/Apollo/withData': Unexpected token = (24:24) import/no-named-as-default-member

Next.JS + ESLint is outputting an error with the following message:

Steps to Reproduce (for bugs)

N/A

Context

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 withData in my _app.js 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?

.babelrc

{
"presets": [
"next/babel",
["@babel/preset-stage-0", { "decoratorsLegacy": true }]
]
}

utils.js

export function isAuthPath(path) {
// Other routes can be added like /forgot-password, etc
return path === '/login' || path === '/signup'
}

_app.js

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 (
<Container>
<Component {...pageProps} />
</Container>
)
}
}

export default withData(MyApp)

withData.js

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 && ctx.req.headers.cookie
? ctx.req.headers.cookie
: document.cookie,
options
)
}

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

export default ComposedComponent =>
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: () => 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 && 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 = (
<ApolloProvider client={apollo}>
<ComposedComponent url={url} {...composedInitialProps} />
</ApolloProvider>
)
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: () => parseCookies().token
})
}

render() {
return (
<ApolloProvider client={this.apollo}>
<ComposedComponent {...this.props} />
</ApolloProvider>
)
}
}

Your Environment

Tech
Version

next
6.0.2

node
9.11.1

OS
Windows 10

browser
Google Chrome

etc

Issue 2:
Bug report

Describe the bug

When running next.js in dev mode and clicking on a link, the error Unhandled Rejection (TypeError): Cannot read property 'call' of undefined until the linked page has been refreshed at least once. It seems to be related to using sass, css and typescript exports.

To Reproduce

Follow the readme in this repository: https://github.com/leanovate/nextjs-hmr-bug

Expected behavior

When clicking the link, the linked page appears and no error is thrown.

Screenshots

System information

OS: macOs

Browser: Chrome version 70.0.3538.77

Version of Next.js: 7.0.2