Gatsby: [v2] Error with gatsby-browser.js. Regarding mixture of CommonJS and ES6.

[rtm619]

Hi all,

I'm facing an issue with gatsby-browser.js regarding mixture of ES6 and CommonJS.
Can anyone look at the code and tell me exactly where I'm mixing them up?

import picturefill from 'picturefill';

export function onClientEntry() {
  picturefill();
}

export function onRouteUpdate() {
  window.scrollTo(0, 0); // When moving to another page it will always go top
  picturefill();
  console.log('ReactDOM.render has executed');
  if (process.env.GATSBY_ENV !== 'production') {
    let ev = document.createElement('script');
    ev.type = 'text/javascript';
    ev.async = true;
    ev.setAttribute('data-ev-tag-pid', 8000);
    ev.setAttribute('data-ev-tag-ocid', 2067);
    ev.src =
      ('https:' == document.location.protocol ? 'https://' : 'http://') +
      'some.url/eg/tag.js';
    let s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ev, s);
  }
}

const windowWidth = window.innerWidth;

export function shouldUpdateScroll(args) {
  return args.prevRouterProps == null || windowWidth < 750 ? true : false;
}

Console Log :

success open and validate gatsby-config — 0.020 s
error This plugin file is using both CommonJS and ES6 module systems together which we don't support.
You'll need to edit the file to use just one or the other.

plugin: D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/gatsby-browser.js

This didn't cause a problem in Gatsby v1 so you might want to review the migration doc for this:
https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#convert-to-either-pure-commonjs-or-pure-es6

Expected result

Successful load of plugins

Actual result

Error in gatsby-browser.js

Environment

System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Binaries:
Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 41.16299.248.0
npmPackages:
gatsby: ^2.0.0-beta.85 => 2.0.0-beta.85
gatsby-image: ^1.0.55 => 1.0.55
gatsby-link: ^2.0.0-beta.12 => 2.0.0-beta.17
gatsby-plugin-canonical-urls: ^1.0.18 => 1.0.18
gatsby-plugin-google-analytics: ^2.0.0-beta.4 => 2.0.0-beta.5
gatsby-plugin-google-tagmanager: ^1.0.19 => 1.0.19
gatsby-plugin-i18n: ^0.4.2 => 0.4.2
gatsby-plugin-manifest: ^2.0.2-beta.4 => 2.0.2-beta.4
gatsby-plugin-offline: ^2.0.0-beta.9 => 2.0.0-beta.9
gatsby-plugin-purify-css: ^2.2.1 => 2.2.1
gatsby-plugin-react-helmet: ^3.0.0-beta.4 => 3.0.0-beta.4
gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0
gatsby-plugin-sharp: ^2.0.0-beta.7 => 2.0.0-beta.7
gatsby-plugin-sitemap: ^2.0.0-beta.3 => 2.0.0-beta.3
gatsby-source-contentful: ^2.0.1-beta.15 => 2.0.1-beta.15
gatsby-transformer-remark: ^2.1.1-beta.6 => 2.1.1-beta.6
gatsby-transformer-sharp: ^2.1.1-beta.6 => 2.1.1-beta.6

[KyleAMathews]

Looks like a bug — I just added this check yesterday — I'll look into it in a bit.

[KyleAMathews]

Sorry about that — I didn't test this new check very throughly. Fix released in 2.0.0-beta.87

[hiteshsahu]

still facing it in "gatsby": "^2.0.17",

[nicomfe]

I'm having this issue as well, tried 2.0.0-beta.87 and 2.0.21

In my case it's complaining about using these 2 libraries in the same file "smooth-anchorate" and "react-ga"

Even If I leave only the react-ga dependency it fails with the same error.

[nicomfe]

I realised this wasnt a problem in my dependencies but the way I import them. As the error says you should not mix commonJS and ES6

I had:

import { smoothAnchorate } from 'smooth-anchorate'
import ReactGA from 'react-ga'

ReactGA.initialize('xxxx')

exports.onRouteUpdate = (state) => {
  smoothAnchorate()
  ReactGA.pageview(state.location.pathname)
}

I fixed it by updating to all commonJS code:

const { smoothAnchorate } = require('smooth-anchorate')
const ReactGA = require('react-ga')

ReactGA.initialize('xxxx')

exports.onRouteUpdate = (state) => {
  smoothAnchorate()
  ReactGA.pageview(state.location.pathname)
}

[mstys]

Error still exist on version 2.0.34 but native es6 export works well, so seems to me that the docs need to be updated.

```
const onClientEntry = () => {
if (typeof window !== 'undefined') {
console.log('run')
}
};

export {
onClientEntry
}