gatsby-browser.js error Expected an assignment or function call and instead saw an expression no-unused-expressions

Turns out Webpack doesn't like mixing es5 with es6 in the gatsby-browser.js file.

I added both the shouldUpdateScroll API in es5 as well as the onClientEntry API in es6, and received the following error: error  Expected an assignment or function call and instead saw an expression  no-unused-expressions.


exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition
}) => {
  const currentPosition = getSavedScrollPosition(location)
  window.scrollTo(...(currentPosition || [0, 0]))
  return false
}

// IntersectionObserver polyfill for gatsby-background-image (Safari, IE)
export const onClientEntry = () => {
  if (!(`IntersectionObserver` in window)) {
    import(`intersection-observer`)
    console.log(`# IntersectionObserver is polyfilled!`)
  }
}

I vaguely remembered encountering this issue in the past, and remembered that mixing exports and export doesn't work. I changed my code to below, but still received the same error.


exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition
}) => {
  const currentPosition = getSavedScrollPosition(location)
  window.scrollTo(...(currentPosition || [0, 0]))
  return false
}

// IntersectionObserver polyfill for gatsby-background-image (Safari, IE)
exports.onClientEntry = () => {
  if (!(`IntersectionObserver` in window)) {
    import(`intersection-observer`)
    console.log(`# IntersectionObserver is polyfilled!`)
  }
}

Finally it clicked. I'm still using an es6 module import. Switched that to an es5 require and problem solved.


exports.shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition
}) => {
  const currentPosition = getSavedScrollPosition(location)
  window.scrollTo(...(currentPosition || [0, 0]))
  return false
}

// IntersectionObserver polyfill for gatsby-background-image (Safari, IE)
exports.onClientEntry = () => {
  if (!(`IntersectionObserver` in window)) {
    require(`intersection-observer`)
    console.log(`# IntersectionObserver is polyfilled!`)
  }
}