Error when trying to modify Webpack plugins

[kylegach]

I copy/pasted the example code from the README into a brand-new gatsby-node.js:

var ExtractTextPlugin = require("extract-text-webpack-plugin");

exports.modifyWebpackConfig = function(config, env) {
  if(env === 'static') {
    config.removeLoader('css');
    config.loader('css', function(cfg) {
      cfg.test = /\.css$/;
      cfg.loader = ExtractTextPlugin.extract('css?minimize');
      return cfg
    })
    config.plugin('extract-css',
                  ExtractTextPlugin,
                  ["styles.css", { allChunks: true }]);
  }
}

Which outputs this error after running gatsby develop (using Gatsby 0.10.0):

/Users/Kyle/Sites/kylegach_com/node_modules/gatsby/dist/utils/develop.js:68
    var compiler = (0, _webpack2.default)(compilerConfig.resolve());
                                                        ^

TypeError: Cannot read property 'resolve' of undefined
  at /Users/Kyle/Sites/kylegach_com/node_modules/gatsby/dist/utils/develop.js:68:57
  at /Users/Kyle/Sites/kylegach_com/node_modules/gatsby/dist/utils/glob-pages.js:36:12
  at f (/Users/Kyle/Sites/kylegach_com/node_modules/once/once.js:17:25)
  at Glob.<anonymous> (/Users/Kyle/Sites/kylegach_com/node_modules/glob/glob.js:146:7)
  at emitOne (events.js:90:13)
  at Glob.emit (events.js:182:7)
  at Glob._finish (/Users/Kyle/Sites/kylegach_com/node_modules/glob/glob.js:194:8)
  at done (/Users/Kyle/Sites/kylegach_com/node_modules/glob/glob.js:179:14)
  at Glob._processGlobStar2 (/Users/Kyle/Sites/kylegach_com/node_modules/glob/glob.js:631:12)
  at /Users/Kyle/Sites/kylegach_com/node_modules/glob/glob.js:620:10
  at RES (/Users/Kyle/Sites/kylegach_com/node_modules/inflight/inflight.js:23:14)
  at f (/Users/Kyle/Sites/kylegach_com/node_modules/once/once.js:17:25)
  at lstatcb_ (/Users/Kyle/Sites/kylegach_com/node_modules/glob/glob.js:513:7)
  at RES (/Users/Kyle/Sites/kylegach_com/node_modules/inflight/inflight.js:23:14)
  at f (/Users/Kyle/Sites/kylegach_com/node_modules/once/once.js:17:25)
  at FSReqWrap.oncomplete (fs.js:82:15)

Eventually, I'm trying to change the production css loader & plugins to use both extract-text-webpack-plugin and purifycss-webpack-plugin... but I get the error before even attempting that.

Thanks for the help.

[KyleAMathews]

Perhaps it's because you're not returning the config? That'd explain why compilerConfig is undefined... we should throw an error for this actually... adding this to #204

Also on PurifyCSS, I haven't used this but with Gatsby, wouldn't this need to be run after the pages are built? Or does the plugin know how to scan React.js components for className?

[kylegach]

Perhaps it's because you're not returning the config? That'd explain why compilerConfig is undefined...

Oh, duh. Thanks for the help. I just submitted a PR to correct the README to work out of the box.

As best I can tell, the PurifyCSS plugin knows to scan all React “views”, but I’ve no idea how it does so. Purify itself appears to be disappointingly simple in its workings, merely searching for strings anywhere in the source instead of selectively doing so within, e.g. className attribute values. The maintainer says it has optimizations for JS files, but I’m having some issues that would indicate it’s still not working as well I hoped it might.

[KyleAMathews]

Hmm... that is weird.

Thanks for the PR! If you're feeling up to more PRs, add an invariant to the return value of modifyWebpackConfig would save future people from being blocked by this issue.

gatsby/lib/utils/webpack.config.js

Line 339 in dd2e960

return modifyWebpackConfig(module(config), stage)

[Necmttn]

@kylegach Did you able to make it work purifycss with gatsby. I have nasty off unused css.. i'm beign to lazy to clean it one by one.

[kylegach]

@Necmttn — Nope. I haven’t had time to try again. If you look at my issue there, it looks like others have attempted a fix.

It’s worth noting that purifycss-webpack-plugin and gatsby worked together just fine, btw. The issue I had was in the quality of purifycss’ results with my relatively-crazy CSS classes. If you’re using a more traditional CSS architecture/naming system, e.g. BEM, you should be fine.