Gatsby: "gatsby build" breaks when dependencies use es6 code (which Uglify doesn't support)

Created on 30 Jan 2018  Β·  47Comments  Β·  Source: gatsbyjs/gatsby

Description

After upgrading Gatsby to 1.9.167, I'm getting the following error when I try to run gatsby build:

error Generating JavaScript bundles failed

  Error: component---src-templates-post-jsx-dbdaebf346a9292b96a8.js from UglifyJs
  SyntaxError: Unexpected token: name (isLastCharLower) [./~/camelcase/index.js:4,0]

The line mentioned in the error contains keyword let. Looks like (at least) dependencies are no longer compiled to ES5 and UglifyJS version used by Gatsby doesn't understand ES6+, so it throws an error.

The same app works fine with 1.9.166. It's most likely caused by some changes introduced in https://github.com/gatsbyjs/gatsby/pull/3369, other changes introduced in this version don't look suspicious.

To replicate this issue create a new Gatsby project, run yarn add camelcase, import and call camelcase in any component and run gatsby build.

question or discussion

Most helpful comment

After sleeping on it, I've decided that @KyleAMathews plugin name makes much more sense, so have moved the plugin to https://www.npmjs.com/package/gatsby-plugin-compile-es6-packages

I hope you find it useful πŸ˜„

Also closing this issue now, as using this plugin and configuring it with the npm packages that have es6 code in them will allow them to be compiled by Babel.

All 47 comments

i am also seeing this. except for me it's running out of memory when trying to build the JS bundles, however pinning to the version you mentioned 1.9.166 works fine...
@szimek when you say some code isn't being compiled to ES5, do you know which code? I'd like to see if ES5-ing it would fix the error with the newer versions to prove your theory...

In my case it's caused by camelcase package (which is a dependency of a markdown to html library I'm using), but there are others available only in ES6 as well. This error has already been reported https://github.com/sindresorhus/camelcase/issues/21 and it won't be "fixed" - more info about that https://github.com/sindresorhus/ama/issues/446, which makes perfect sense from the maintainer point of view.

However, this means that all dependencies should also be compiled by Babel to ES5, because they might be written in ES6, so even if Gatsby started using UglifyJS2, which does support ES6 syntax, it would break in older browsers that don't support ES6.

Experiencing this too - big dealbreaker as far as I'm concerned.

Gatsby has never compiled code in node_modules to es5. If you're seeing problems then it's because either an existing dependency of yours started shipping es6 code or (more likely) you added a new dependency with es6 cod which broke uglify.

CRA will be compiling code in node_modules w/ babel starting in their v2 which we can consider as well.

https://github.com/facebook/create-react-app/pull/3776

@szimek that PR only affects the Typescript plugin. We haven't changed anything related to Babel in a long time.

@alexjsdev are you using the typescript plugin?

I would have thought so too @KyleAMathews, but I can verify that it builds correctly on Gatsby 1.9.166 but not on the latest (1.9.178 at time of writing), so whether or not the dependency in question has changed is irrelevant (and it hasn't, I checked).

@ryami333 fair enough β€” could you post a link to a site reproducing this problem? All the example sites and gatsbyjs.org are still building correctly AFAIK so something reproducing this would be great.

I'll see what I can do, but it might take a little while. In the meantime, I verified that the break is between builds 1.9.166 and 1.9.167.

@KyleAMathews no we are not using typescript, just the out of the box gatsby starter setup, with what was the latest Gatsby at the time which was 1.9.176 (i believe). We would get an UglifyJS running out of memory error when Gatsby would try to compile our JS bundles, but then i found this thread and based on @szimek suggestion tried pinning the version to 1.9.166 and voila! it works... I'm not sure what changed, do you have a changelog for each version, or like a tagged merged commit for each where I could try to help figure this out? I really don't want to leave the version pinned.

On a side note, I tried updating to the latest a few days ago (1.9.177) and although gatsby would successfully run develop if i ran a build it would hang on createPagesStatefully forever... so different behavior (than the uglify JS error but still no functional build)

Thanks for all your help! And btw Gatsby is truly genius!

@KyleAMathews just saw that there's a newer version 1.9.178 and it looked like there was a fix merged for the hanging i was talking about... well it's true it doesn't hang there anymore but this is back now 😒:

```
error Generating JavaScript bundles failed

Error: app-45a58aeb1a29bc012abd.js from UglifyJs
RangeError: Maximum call stack size exceeded```

@alexjsdev is your issue actually related to the OP? Have you verified that your dependency is indeed ES6?

@KyleAMathews I've created a demo repo here, based on gatsby-starter-default.

  • Commit 1, initial commit (fresh gatsby-starter-default).
  • Commit 2, demonstrate successful build with ES6 dependency on 1.9.166.
  • Commit 3, demonstrate failing build with 1.9.167.
  • Commit 4, demonstrate failing build on latest release.

@KyleAMathews

Gatsby has never compiled code in node_modules to es5.

You're right. Turns out that Gatsby 1.9.166 and earlier versions silently skip the minification of a file, if it uses ES6 syntax after bundling, e.g. when I use camelcase library in one of pages. If I use it in pages/index.js, all files will be minified except public/component---src-pages-index-js-xxx.js. Gatsby 1.9.167 and later versions throw an error in this case.

According to https://github.com/facebook/create-react-app/issues/1125#issuecomment-357015165 it's not safe to run Babel 6 on node_modules and Babel 7 will be added in Gatsby v2, right?

Here's PR that adds compiling dependencies with babel-preset-env to create-react-app: https://github.com/facebook/create-react-app/pull/3776

I can also confirm that this is happening.

In my particular case, it is caused by a let used in buble, a dependency included within react-live.

Downgrading to 1.9.166 does fix the problem. Haven't dug into what the proper fix should be.

@szimek yeah, planning on copying CRA's implementation for Gatsby v2.

Folks running into this β€” what do think we should do? Remove the error? Add easy way to compile problematic packages? Just removing the error doesn't really solve much as now you're shipping unminified es6 code which is a) slower cause it's unminified and b) will break older browsers that don't support whatever es6 features are used in the code.

Why isn't using an es6-compatible version of Uglify an option?

Get Outlook for Androidhttps://aka.ms/ghei36


From: Kyle Mathews notifications@github.com
Sent: Tuesday, February 6, 2018 4:14:17 PM
To: gatsbyjs/gatsby
Cc: Mitch Ryan; Mention
Subject: Re: [gatsbyjs/gatsby] "gatsby build" breaks when dependencies use es6 code (which Uglify doesn't support) (#3780)

Folks running into this β€” what do think we should do? Remove the error? Add easy way to compile problematic packages? Just removing the error doesn't really solve much as now you're shipping unminified es6 code which is a) slower cause it's unminified and b) will break older browsers that don't support whatever es6 features are used in the code.

β€”
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/gatsbyjs/gatsby/issues/3780#issuecomment-363297162, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AL5z_PbtaWjW47jYiSPvh-WYBO8U7MFfks5tR8OJgaJpZM4Ry0kI.

That could be a possibility too β€” I haven't researched it. Actually, just researched it :-) and it looks like it might require webpack v3 β€” so we should do this upgrade along with the remainder of the Gatsby v2 work https://github.com/facebook/create-react-app/pull/3618

Why isn't using an es6-compatible version of Uglify an option?

There are 2 issues. When Gatsby switches to babel-preset-env it will need to use ES6-compatible minifier (most likely UglifyJS2), because user's code can end up with ES6+ syntax as well. However, if I configure babel-preset-env to support IE9 or Safari 9, I'd expect all code to work in these browsers, including third-party code that might use ES6+ syntax, not just the code I wrote.

@KyleAMathews Could be possible setup an Uglify ES6-compatible on gatsby-node.js?

Just as workaround to avoid not update gatsby dependency.

Looks like, if I don't update gatsby this error appears:

GraphQL Error There was an error while compiling your site's GraphQL queries.
  Error: Cannot use GraphQLSchema "[object Object]" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

EDIT: In my case looks a very isolate problem related with a subdependency from react-live
I opened an issue https://github.com/FormidableLabs/react-live/issues/61. If you want to reproduce the problem just:

git clone -b update [email protected]:microlinkhq/www.git
npm install && npm run build

@Kikobeats it's best to fix your dependency by compiling it to es5. Not updating Gatsby just means your build succeeds not that the underlying problem, that your code isn't minifying and that it's not runnable on older browsers, is fixed.

Working on fixes for this in Gatsby v2. We'll be compiling all code in node_modules + upgrading to the latest version of uglify.

@KyleAMathews I'm agree!

Actually I think this dependency is compiled to ES5
https://github.com/Rich-Harris/buble/blob/master/package.json#L5

Actually it's a ES5 compiler πŸ€”

Oh, I think I found the point:

error Generating JavaScript bundles failed


  Error: ./~/buble/dist/buble.deps.js
  Module parse failed: /Users/josefranciscoverdugambin/Projects/microlink/microlink-www/node_modules/buble/dist/buble.deps.js Unexpected token (5:0)
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected token (5:0)

so gatsby is trying to resolve the deps file. Actually it's a javascript file (real file name is something like buble.deps.js).

Could be possible add a webpack setup for avoid transpiling this file? just ignore it

I can't seem to get a build to finish. v1.9.166 doesn't have the UglifyJS issue, but it does have the duplicate GraphQL issue like in #4154. I attempted to upgrade Gatsby to 1.9.223 and modify the Webpack config to transpile node_modules to ES5 but ran into a bunch of issues along the way.

Does anyone have a workaround? I'm completely stuck.

Hey @chadwatson πŸ‘‹ Can I get a bit more info about your setup - if you create a new issue and fill out the issue template that'll be a good place to start. And if you're able to share your code that's even better!

@m-allanson thanks for your help. Filing a new issue would just be a dupe of this one though, wouldn't it? I feel like it would be helpful to just keep it in this thread.

Here are my dependencies:

"dependencies": {
  "gatsby": "1.9.131",
  "gatsby-image": "1.0.24",
  "gatsby-link": "^1.6.21",
  "gatsby-plugin-favicon": "^2.0.0",
  "gatsby-plugin-react-helmet": "^1.0.5",
  "gatsby-plugin-sitemap": "^1.2.5",
  "gatsby-plugin-styled-components": "^1.0.5",
  "gatsby-remark-images": "1.5.32",
  "gatsby-source-filesystem": "1.5.8",
  "gatsby-transformer-remark": "1.7.21",
  "gatsby-transformer-sharp": "1.6.14",
  "immutable": "^3.8.2",
  "prop-types": "^15.6.0",
  "ramda": "^0.25.0",
  "react": "^16.0.0",
  "react-measure": "^2.0.2",
  "react-motion": "^0.5.2",
  "recompose": "^0.26.0",
  "showdown": "^1.8.1",
  "styled-components": "^2.2.1",
  "typography": "^0.16.6"
}

gatsby-node.js

const path = require('path')
const { over, lensProp, assoc } = require('ramda')

exports.createPages = ({ boundActionCreators, graphql }) => {
  const { createPage } = boundActionCreators

  return graphql(`
    {
      allMarkdownRemark(filter: {frontmatter: {title: {regex: "/^(?!.*(Home|Company)).*$/"}}}) {
        edges {
          node {
            frontmatter {
              title
              templateKey
              path
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      console.error(result.errors)
      return Promise.reject(result.errors)
    }

    if (!result.data.allMarkdownRemark) {
      return
    }

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.frontmatter.path,
        component: path.resolve(`src/templates/${String(node.frontmatter.templateKey)}.js`),
        context: {
          title: node.frontmatter.title,
        },
      })
    })
  })
}

gatsby-config.js

const siteMetadata = require('./data')

module.exports = {
  siteMetadata,
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-transformer-sharp',
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-favicon',
      options: {
        logo: './src/favicon.png',
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          favicons: true,
          firefox: true,
          twitter: true,
          windows: true,
        },
      }
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${process.cwd()}/src/pages`,
        name: 'pages'
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
              linkImagesToOriginal: false
            }
          }
        ]
      }
    }
  ],
}

I always get this error when I run gatsby build using [email protected] and above:

Error: component---src-layouts-index-js-63656bbe13c2c1576b07.js from UglifyJs
  SyntaxError: Unexpected token operator Β«*Β», expected punc Β«(Β» [./src/components/QuoteForm/index.js:289,12]

I always get this error when I run gatsby build using [email protected] and below:

GraphQL Error There was an error while compiling your site's GraphQL queries.
  Error: Cannot use GraphQLSchema "[object Object]" from another module or realm.

What I don't understand is that the site I'm trying to build is currently in production using [email protected]. It built with no problems back in November, but now that same version gives me the duplicate GraphQL error. πŸ€·β€β™‚οΈ

@chadwatson I find it clearer to try and keep to one conversation per issue, as long issue threads can become quite noisy. Anyway, here is fine too :)

You said:

I attempted to upgrade Gatsby to 1.9.223 and modify the Webpack config to transpile node_modules to ES5 but ran into a bunch of issues along the way.

What issues did you run into? Have you tried using gatsby-plugin-core-js as your first plugin? core-js is quite large so it's not an ideal answer, but maybe it'll get you to a site that builds.

Alternatively, in your file /src/components/QuoteForm/index.js, it seems there's a dependency using es6 code. If you temporarily remove the dependency does your site build?

As you're using React v16, you might want to add gatsby-plugin-react-next too.

@m-allanson I threw gatsby-plugin-core-js and gatsby-plugin-react-next into my gatsby-config.js, and I'm still getting the uglify error.

I double checked my deps in that file see if any of them are providing ES6 code, and none of them appear to be ([email protected], [email protected], [email protected], and [email protected]).

Here's what I did to modify the webpack config in gatsby-node.js:

exports.modifyWebpackConfig = ({ config, stage }) => {
  const program = {
    directory: __dirname,
    browserslist: ['> 1%', 'last 2 versions', 'IE >= 9'],
  }

  return generateBabelConfig(program, stage).then(babelConfig => {
    config.removeLoader('js').loader('js', {
      test: /\.jsx?$/,
      loader: 'babel',
      query: babelConfig,
    })
  })
}

Basically, I'm just not excluding node_modules. When I run gatsby build with that I get

error Generating JavaScript bundles failed


  Error: ./~/gatsby/~/gatsby-react-router-scroll/index.js
  Module build failed: ReferenceError: Unknown plugin "dev-expression" specified in "/Users/chadwatson/git/620tubs/node_modules/gatsby/node_modules/gatsby-rea  ct-router-scroll/.babelrc" at 0, attempted to resolve relative to "/Users/chadwatson/git/620tubs/node_modules/gatsby/node_modules/gatsby-react-router-scroll  "
      at /Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
      at Array.map (<anonymous>)
      at Function.normalisePlugins (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
      at OptionManager.mergeOptions (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
      at OptionManager.init (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
      at transpile (/Users/chadwatson/git/620tubs/node_modules/babel-loader/lib/index.js:46:20)
      at /Users/chadwatson/git/620tubs/node_modules/babel-loader/lib/fs-cache.js:79:18
      at ReadFileContext.callback (/Users/chadwatson/git/620tubs/node_modules/babel-loader/lib/fs-cache.js:15:14)
      at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:421:13)
   @ ./.cache/production-app.js 17:31-6

So I added babel-plugin-dev-expression, which produces

error Generating JavaScript bundles failed


  Error: ./~/gatsby/~/gatsby-react-router-scroll/index.js
  Module build failed: Error: Couldn't find preset "../../.babelrc.js" relative to directory "/Users/chadwatson/git/620tubs/node_modules/gatsby/node_modules/g  atsby-react-router-scroll"
      at /Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
      at Array.map (<anonymous>)
      at OptionManager.resolvePresets (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/index.js:212:65)
      at new File (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/file/index.js:135:24)
      at Pipeline.transform (/Users/chadwatson/git/620tubs/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
      at transpile (/Users/chadwatson/git/620tubs/node_modules/babel-loader/lib/index.js:46:20)
      at /Users/chadwatson/git/620tubs/node_modules/babel-loader/lib/fs-cache.js:79:18
      at ReadFileContext.callback (/Users/chadwatson/git/620tubs/node_modules/babel-loader/lib/fs-cache.js:15:14)
      at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:421:13)
   @ ./.cache/production-app.js 17:31-68

These are the same issues I was running into when I mentioned modifying the webpack config in my original comment.

Thanks again for your help.

Hmm. Are you using gatsby-plugin-core-js and modifying the webpack config in your gatsby-node.js? What happens if you remove your modifyWebpackConfig from gatsby-node.js?

I tried gatsby-plugin-core-js without modifyWebpackConfig first and still got the same uglify error. Then I threw the modifyWebpackConfig back in and started getting the errors I mentioned in my last comment.

It looks like @chadwatson's error was fixed by following these steps to add async / await support: https://github.com/gatsbyjs/gatsby/issues/3931#issuecomment-364414141

@m-allanson thank you so much for your help!

Did anyone found a solution for this? I'm having the same problem. Here are my gatsby.config

module.exports =  {
  siteMetadata: {
    title: '4Humans',
  },
  plugins: [
    `gatsby-plugin-react-next`,
    `gatsby-plugin-core-js`,
    'gatsby-plugin-react-helmet',
    `gatsby-plugin-sass`,
    `gatsby-plugin-typescript`
  ],
}

and my dependencies

"dependencies": {
    "gatsby": "^1.9.166",
    "gatsby-link": "^1.6.40",
    "gatsby-plugin-catch-links": "^1.0.22",
    "gatsby-plugin-core-js": "^1.0.2",
    "gatsby-plugin-google-analytics": "^1.0.31",
    "gatsby-plugin-mailchimp": "^2.2.3",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-react-next": "^1.0.11",
    "gatsby-plugin-sass": "^1.0.26",
    "gatsby-plugin-sharp": "^1.6.46",
    "gatsby-plugin-typescript": "^1.4.20",
    "gatsby-source-filesystem": "^1.5.36",
    "gatsby-transformer-remark": "^1.7.41",
    "gatsby-transformer-sharp": "^1.6.26",
    "react-helmet": "^5.2.0",
    "react-particles-js": "^2.2.0",
    "tslint": "^5.10.0",
    "typescript": "^2.9.2",
    "typography-theme-grand-view": "^0.15.10"
  },

Hi all. I'm having similar issue with 'query-string' package. I'm fine with not having my site working on older browsers... what are people doing to get to solution where it just skips over the ES6 packages? I saw @KyleAMathews is pushing out v2 (woohoo! thanks dude!) but that's causing other errors for me so wanted to find a solution while v2 settles in :)

@natesjacobs I solved my problem my removing async/await from my app. Apparently, the v1 does not support it yet. Check if you have any and change it to the good old callbacks ;-)

@natesjacobs I ran into the same issue and had to use query-string@5.

I had same issue upgrading to to a module dependency that uses let and const. The solution that finally worked for me was whitelisting specific modules in the babel loader via the weback config. I used the example in the docs as a starting point, and ended up with something like this in gatsby-node.js:


exports.modifyWebpackConfig = ({ config, stage }) => {
  // https://www.gatsbyjs.org/docs/add-custom-webpack-config/#modifying-the-babel-loader
  const program = {
    directory: __dirname,
    browserslist: ["> 1%", "last 2 versions", "IE >= 9"]
  };

  return generateBabelConfig(program, stage).then(babelConfig => {
    config.removeLoader("js").loader("js", {
      test: /\.jsx?$/,
      exclude: modulePath => {
        return (
          /node_modules/.test(modulePath) &&
          // whitelist specific es6 modules
          !/node_modules\/(react-docgen|ast-types|recast)/.test(modulePath)
        );
      },
      loader: "babel",
      query: babelConfig
    });
  });
}

We'll be compiling all code in node_modules

@KyleAMathews Won't that significantly increase the build time? Sticking with exclude and just whitelisting (like I've done above) prevents babel from evaluating more than it needs to, right? Maybe just needs to be documented. Plus I think the webpack + uglify upgrade takes care of this specific issue anyway.

Yes β€” we've actually decided to wait and see a bit more on the issue of compiling node_modules. Both because of the slowdowns and because there's a lot of active discussions around how it should work.

If anyone else comes across this issue when they are using Gatsby V2, the above examples will not work due to Gatsby API changes, but the below example did (at least for me).

exports.onCreateWebpackConfig = ({ loaders, actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: modulePath =>
            /node_modules/.test(modulePath) &&
            // whitelist specific es6 module
            !/node_modules\/@papertrailio\/js-core/.test(modulePath),
          use: loaders.js(),
        },
      ],
    },
  })
}

In the above example, the @papertrailio/js-core module included Flow definitions, so adding the above code to gatsby-node.js, and adding the gatsby-plugin-flow plugin to gatsby-config.js worked perfectly.

Could this functionality be outsourced to a plugin? Something where you could just provide a list of node_module packages that need to be transpiled. In the implementation, it just does the onCreateWebpackConfig above.

Yeah! This should totally be a plugin. Anyone up for creating it?

@KyleAMathews I will have a crack at a plugin for Gatsby V2 using something like my example above (https://github.com/gatsbyjs/gatsby/issues/3780#issuecomment-419862716)

Perhaps I should call it gatsby-plugin-es6-webpack-package?

@robwalkerco awesome! How about maybe gatsby-plugin-compile-es6-packages?

@KyleAMathews Ah, thats a good name.

I published it as gatsby-plugin-es6-webpack-modules a few hours ago and the Gatsby Plugins directory has picked it up already at https://www.gatsbyjs.org/packages/gatsby-plugin-es6-webpack-modules/~~

Could try to get the name changed though.

If anyone else finds this issue, then the plugin will help you to customise the webpack config to compile es6 modules in node_modules.

Open to PR's to improve the readme etc

After sleeping on it, I've decided that @KyleAMathews plugin name makes much more sense, so have moved the plugin to https://www.npmjs.com/package/gatsby-plugin-compile-es6-packages

I hope you find it useful πŸ˜„

Also closing this issue now, as using this plugin and configuring it with the npm packages that have es6 code in them will allow them to be compiled by Babel.

I'm working in a 'monorepo' and trying to figure out if I need @robwalkerco's plugin. The app is structured like:

monorepo-app/
  |- packages/
     | - common/
     | - gatsby-app-1/
     | - gatsby-app-2/

…where common includes shared components, libs, etc.

Should I be adding common as a package to this plugin if I'm using es6, or is there something more to it? gatsby build doesn't error with the UglifyJS message mentioned here.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

timbrandin picture timbrandin  Β·  3Comments

theduke picture theduke  Β·  3Comments

Oppenheimer1 picture Oppenheimer1  Β·  3Comments

ghost picture ghost  Β·  3Comments

totsteps picture totsteps  Β·  3Comments