Errors when adding default import of styled-components through WebPack's ProvidePlugin #3912
Description
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.