search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.32k forks source link

Struggling to add extract-text-webpack-plugin to Gatsby v1 #9029

Closed BLBaylis closed 6 years ago

BLBaylis commented 6 years ago

I'd like to preface this by saying my Webpack and Node knowledge is unfortunately very limited. With that said, the first place I visited is the Gatsby doc page for add custom Webpack configs. This told me to export a function from gatsby-node.js called modifyWebpackConfig. Additionally, I would need to use webpack-configurator.

I installed this and checked out the docs for that, which literally has an example that uses extract-text-webpack-plugin. So I copy/pasted that into the example on the Gatsby doc to get the following in my gatsby-node.js: 

var ExtractTextPlugin = require('extract-text-webpack-plugin')

exports.modifyWebpackConfig = ({ config, stage }) => {
  switch (stage) {
    case 'develop':
      config.loader(
        'sass',
        {
          test: /\.scss$/,
          queries: {
            css: {
              sourceMap: true,
            },
            sass: {
              sourceMap: true,
            },
          },
        },
        function(config) {
          var loaders = []

          for (var key in config.queries)
            loaders.push(key + '?' + JSON.stringify(config.queries[key]))

          config.loader = ExtractTextPlugin.extract(loaders.join('!'))

          return config
        }
      )
      break
  }

  return config
}

I've only got a case for develop, because I figure once that works I can add the others. Upon running gatsby develop I get the following:

There were errors with your webpack config:

[1] module.loaders.8.loader string.base , "loader" must be a string

[2] module.loaders.8.queries object.allowUnknown , "queries" is not allowed

[3] module.loaders.8 object.xor , "value" contains a conflict between exclusive peers [loaders, loader]

Your Webpack config does not appear to be valid. This could be because of something you added or a plugin. If you don't recognize the invalid keys listed above try removing plugins and rebuilding to identify the culprit.

I can add more info if needed, but I assume my code is just wrong. If someone is able to put me out of my misery on this one I would be very grateful!

DSchau commented 6 years ago

@BLBaylis it looks like you just want to add sass capabilities to your project, right?

If that's the case, I'd recommend using our officially supported gatsby-plugin-sass

We already support extracting CSS files, so the idea is that you just use that plugin, and you get those benefits for free!

I'm going to close this out as answered, but please feel free to re-open if this doesn't solve your issue or if you need any more assistance. Thanks!!

BLBaylis commented 6 years ago

@DSchau Thanks for taking a look, but I already have sass and its relevant plugin installed fine. I'm trying to deal with a flash of unstyled content issue and one solution I'm trying out is from this article, which involves adding the extract-text-webpack-plugin.

Edit : Also I'm not seeing an option to reopen this issue.

DSchau commented 6 years ago

@BLBaylis not a problem, I've re-opened it!

Aare you able to reproduce this with a repo or at least a link to your site? We've seen issues intermittently about a flash of unstyled content with something like a CSS in JS library--which have since been fixed--but rarely with SASS.

For context, we already add the extract-text-plugin. Here's the code in v2 and v1

BLBaylis commented 6 years ago

This is the live site (unfinished) https://blbaylis.github.io/my-portfolio/. The repo is here. I guess that the extract-text-plugin isn't the right path if it is already being used. Additionally, it could be material-ui, I have seen issues involving it (though mostly with gatsby v2).

DSchau commented 6 years ago

@BLBaylis the CSS is inlined, as you'd expect. I see a number of style tags come in after the page loads relating to JSS.

screen shot 2018-10-11 at 9 58 15 am

I'd recommend checking out one of these two plugins (in order of likelihood of it working!):

BLBaylis commented 6 years ago

I've tried material-ui plugin previously and was unable to run gatsby develop. IIRC, there was a lot of error messages involving @babel/runtime, which I assumed was a result of that plugin being for material v1. I will look into that again, but I'll try the jss plugin first which I haven't tried before.

Thanks for having a look!

BLBaylis commented 6 years ago

@DSchau Installing the jss plugin and adding it to gatsby-config ran ok, but didn't prevent the FOUC. Without removing the jss plugin, I also added the material plugin, which resulting in a crazy amount of errors after running gatsby develop. They are the same as when I tried the plugin without the jss plugin.

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

Error: Module not found: Error: Cannot resolve module '@babel/runtime/core-js/object/keys' in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\material-ui\styles
  resolve module @babel/runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\material-ui\styles
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\material-ui\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\material-ui\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules
      C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel doesn't exist (module as directory)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
    looking for modules in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules
      resolve 'file' or 'directory' runtime/core-js/object/keys in C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel
        resolve file
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx doesn't exist
        resolve directory
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys doesn't exist (directory default file)
          C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys\package.json doesn't exist (directory description file)
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\material-ui\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\gatsby\node_modules\@babel]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.js]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
  [C:\Users\Brad\Desktop\Coding\brad-portfolio\node_modules\@babel\runtime\core-js\object\keys.jsx]
   @ ./~/material-ui/styles/withStyles.js 14:35-80
DSchau commented 6 years ago

That was quite the ordeal. Fixed in the above PR, as best as I can tell.

Please let me know if you need anything else!