Errors when adding default import of styled-components through WebPack's ProvidePlugin

[jakubgs]

Description

I'm trying to add styled-components as a default import using WebPack's ProvidePlugin but when I try to use the import it fails.

Environment

Gatsby version: ^1.9.158
Node.js version: v8.9.4
Operating System: Debian Testing (Buster)

File contents (if changed):

gatsby-config.js:

module.exports = {
  plugins: [
    'gatsby-plugin-styled-components',
  ],
};

package.json:

{
  "name": "test",
  "description": "test",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "gatsby": "^1.9.158",
    "gatsby-link": "^1.6.34",
    "gatsby-plugin-styled-components": "^2.0.5",
    "styled-components": "^3.1.6"
  },
  "devDependencies": {}
}

gatsby-node.js:

const webpack = require('webpack');

exports.modifyWebpackConfig = ({config}) => {
  config._config.plugins.push(
    new webpack.ProvidePlugin({
      React: 'react',
      Style: ['styled-components', 'default'],
    })
  );
  return config;
}

gatsby-browser.js: not changed
gatsby-ssr.js: not changed

Actual result

If I don't try to use Style everything works fine. If I as much as try to console.log() it, I get this:

 ERROR  Failed to compile with 1 errors                                                                                                                                                23:57:21

 error  in ./src/pages/index.js

Module parse failed: ~/test/node_modules/babel-loader/lib/index.js?{"plugins":["~/test/node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js","~/test/node_modules/react-hot-loader/babel.js","~/test/node_modules/babel-plugin-transform-react-jsx-source/lib/index.js","~/test/node_modules/babel-plugin-add-module-exports/lib/index.js","~/test/node_modules/babel-plugin-transform-object-assign/lib/index.js"],"presets":[["~/test/node_modules/babel-preset-env/lib/index.js",{"loose":true,"uglify":true,"modules":"commonjs","targets":{"browsers":["> 1%","last 2 versions","IE >= 9"]},"exclude":["transform-regenerator","transform-es2015-typeof-symbol"]}],"~/test/node_modules/babel-preset-stage-0/lib/index.js","~/test/node_modules/babel-preset-react/lib/index.js"],"cacheDirectory":true}!~/test/src/pages/index.js this.state.current.addBlock is not a function
You may need an appropriate loader to handle this file type.
TypeError: this.state.current.addBlock is not a function
    at Parser.<anonymous> (~/test/node_modules/webpack/lib/dependencies/AMDRequireDependenciesBlockParserPlugin.js:36:24)
    at Parser.applyPluginsBailResult (~/test/node_modules/tapable/lib/Tapable.js:48:50)
    at Parser.walkCallExpression (~/test/node_modules/webpack/lib/Parser.js:727:22)
    at Parser.walkExpression (~/test/node_modules/webpack/lib/Parser.js:552:40)
    at Parser.walkExpressionStatement (~/test/node_modules/webpack/lib/Parser.js:387:7)
    at Parser.walkStatement (~/test/node_modules/webpack/lib/Parser.js:378:32)
    at Parser.<anonymous> (~/test/node_modules/webpack/lib/Parser.js:371:8)
    at Array.forEach (<anonymous>)
    at Parser.walkStatements (~/test/node_modules/webpack/lib/Parser.js:370:13)
    at Parser.parse (~/test/node_modules/webpack/lib/Parser.js:920:8)
    at Object.ModuleParserHelpers.addParsedVariable (~/test/node_modules/webpack/lib/ModuleParserHelpers.js:10:9)
    at Parser.<anonymous> (~/test/node_modules/webpack/lib/ProvidePlugin.js:36:28)
    at Parser.applyPluginsBailResult (~/test/node_modules/tapable/lib/Tapable.js:48:50)
    at Parser.walkIdentifier (~/test/node_modules/webpack/lib/Parser.js:760:21)
    at Parser.walkExpression (~/test/node_modules/webpack/lib/Parser.js:552:40)
    at Parser.<anonymous> (~/test/node_modules/webpack/lib/Parser.js:546:9)
    at Array.forEach (<anonymous>)
    at Parser.walkExpressions (~/test/node_modules/webpack/lib/Parser.js:544:14)
    at Parser.walkCallExpression (~/test/node_modules/webpack/lib/Parser.js:735:9)
    at Parser.walkExpression (~/test/node_modules/webpack/lib/Parser.js:552:40)
    at Parser.walkExpressionStatement (~/test/node_modules/webpack/lib/Parser.js:387:7)
    at Parser.walkStatement (~/test/node_modules/webpack/lib/Parser.js:378:32)

 @ ./.cache/sync-requires.js 12:50-101

Expected behavior

I should be able to use Style to created styled components in any JS module.

Steps to reproduce

Just try accessing the default import in any way, for example:

console.log(Style)

I might add the the default import for React works just fine.

[jayalfredprufrock]

I'm experiencing this issue as well and it does seem to be some kind of conflict with the styled-components gatsby plugin since I never had this problem using ProvidePlugin with React and styled-components in non gatsby projects.

Ultimately though it's not a huge deal. Perhaps when support for webpack 4 drops this problem will magically go away...

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!