Gatsby: [gatsby-plugin-netlify-cms]: Cannot find module 'uglifyjs-webpack-plugin'

[krismorf]

Description

I tried rebuilding my project but couldn't. gatsby develop and gatsby build give the same error. If I add uglifyjs-webpack-plugin the project builds without errors. I didn't change any code since my last successful build, nor could I find any recent commits referring to this module.

Expected result

Build

Actual result

Buildn't

Environment

  System:
    OS: macOS 10.14.1
    CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.2.0 - ~/.nvm/versions/node/v11.2.0/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v11.2.0/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 63.0.3
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.53 => 2.0.53 
    gatsby-image: ^2.0.20 => 2.0.20 
    gatsby-plugin-canonical-urls: ^2.0.7 => 2.0.7 
    gatsby-plugin-create-client-paths: ^2.0.2 => 2.0.2 
    gatsby-plugin-feed: ^2.0.9 => 2.0.9 
    gatsby-plugin-gtag: ^1.0.4 => 1.0.4 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.9 
    gatsby-plugin-netlify: ^2.0.5 => 2.0.5 
    gatsby-plugin-netlify-cache: ^1.0.0 => 1.0.0 
    gatsby-plugin-netlify-cms: ^3.0.7 => 3.0.7 
    gatsby-plugin-no-sourcemaps: ^2.0.1 => 2.0.1 
    gatsby-plugin-offline: ^2.0.16 => 2.0.16 
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2 
    gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0 
    gatsby-plugin-sharp: ^2.0.12 => 2.0.12 
    gatsby-plugin-sitemap: ^2.0.2 => 2.0.2 
    gatsby-plugin-styled-components: ^3.0.3 => 3.0.3 
    gatsby-remark-images: ^2.0.6 => 2.0.6 
    gatsby-source-filesystem: ^2.0.8 => 2.0.8 
    gatsby-transformer-remark: ^2.1.12 => 2.1.12 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.8 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

[pieh]

Hey, it seems like gatsby-plugin-netlify-cms is using uglifyjs-webpack-plugin without specyfying it in its dependencies. This probably worked before because we used that webpack plugin in gatsby (so uglifyjs was installed), but we moved to terser recently.

Easy fix would be to add uglifyjs-webpack-plugin to dependency of netlify cms plugin - but maybe we should also switch to terser there (and still add it to dependecies)

[pieh]

@kmorf would you be interested in creating PR for it?

[jester22]

Same error too .

[agustinmulet]

Hi, is it ok if I take care of this bug? It would be my first PR :)

@pieh one fix could be what you said, to add uglifyjs-webpack-plugin dependency, I know how to do that but if it's better to add terser I'm looking at the terser-webpack-plugin docs and I don't know how to add it to this plugin (can't find webpack.config.js file)

[pieh]

@agustinmulet That would be great!

Config is generated here - https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js

I would assume that error is thrown because of this import https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L7 which can't be resolved because uglifyjs-webpack-plugin is not actually installed. This is a little trickier than I though, because this custom webpack configuration that gatsby-plugin-netlify-cms is doing is not really using uglify plugin - it actually wants to remove that plugin from config:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L80-L89
So maybe proper fix would be change the way that plugins are removed from config so they don't use instanceof (if that's possible)

[pieh]

Well, maybe actual fix would be just to remove any occurrences of uglifyjs and bump peerDependency https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-netlify-cms/package.json#L37 to "^2.0.0" (drop beta there)

/cc @erquhart Did uglifyjs caused problems with netlify-cms? I'm just wondering why it was needed to filter it out

[erquhart]

Yeah, couldn't get uglify to exclude our code, so it kept choking. It's been a while, don't remember specifics. It does look like we need to install the plugin. We used instanceof because it felt like the safest way to exclude each plugin. A PR to improve the setup (or at least install the uglify plugin) would have my vote 👍.

[agustinmulet]

@pieh Oh I see it's more complicated than I thought, but I found this way that webpack ignores plugins, it could be useful (although I don't know where to use it haha) new webpack.IgnorePlugin(/^(fsevents|terser)$/)

[pieh]

We used instanceof because it felt like the safest way to exclude each plugin. A PR to improve the setup (or at least install the uglify plugin) would have my vote 👍.

If we add uglifyjs-webpack-plugin as dependency and import it then imported Type might not be the same as used elsewhere (depending if npm/yarn would hoist that package). So this is getting problematic and we would need conditionally import that package (only if it exists) which AFAIK is not possible with ES6 imports and we would need to switch to require to potentially wrap that in try/catch?

[pieh]

@agustinmulet webpack.IgnorePlugin, doesn't ignore plugins :) it's plugin to ignore imports in the code

[DZuz14]

How can we even go about reproducing this? I just setup a sample Gatsby site, installed netlify and gatsby netlify plugins and the develop and build commands complete successfully.

[virgilbugnariu]

Encountered the same error today when deploying the site to Netlify.
gatsby develop and gatsby build commands complete successfully locally. Deploy failed though.
Versions:
gatsby 2.0.19
netlify-cms 2.2.0

Worked after listing uglifyjs-webpack-plugin as a dependency.

[csellis]

Encountered the same error today when deploying the site to Netlify.
gatsby develop and gatsby build commands complete successfully locally. Deploy failed though.
Versions:
gatsby 2.0.19
netlify-cms 2.2.0

Worked after listing uglifyjs-webpack-plugin as a dependency.

I reproduced this.

[erquhart]

@pieh looks like this is now breaking for all users - as an immediate fix, I'm going to open a PR that just adds webpack uglify plugin to the cms plugin. We can come up with something better afterward.

[erquhart]

Ah, figured it out - the problem is that Webpack 4.26.0 moved from uglifyjs-webpack-plugin to terser-webpack-plugin. We need to check for instance of that (for now) instead.

[DZuz14]

Yolo. Nice work.