Webpack error when trying to use styled-components - reactjs

Question

As soon as I import styled-components (import styled from 'styled-components';) into my react app I get the following error:
Uncaught TypeError: __webpack_require__.i(...) is not a function
at Object.eval (styled-components.br…er.esm.js?60a8:1670)
at eval (318:2534)
at Object.<anonymous> (bundle.js:3892)
at __webpack_require__ (bundle.js:20)
at eval (app.js?fbdb:5)
at Object.<anonymous> (bundle.js:1609)
at __webpack_require__ (bundle.js:20)
at eval (index.js?c3ed:7)
at Object.<anonymous> (bundle.js:1967)
at __webpack_require__ (bundle.js:20)
(anonymous) # styled-components.br…er.esm.js?60a8:1670
(anonymous) # 318:2534
(anonymous) # bundle.js:3892
__webpack_require__ # bundle.js:20
(anonymous) # app.js?fbdb:5
(anonymous) # bundle.js:1609
__webpack_require__ # bundle.js:20
(anonymous) # index.js?c3ed:7
(anonymous) # bundle.js:1967
__webpack_require__ # bundle.js:20
(anonymous) # bundle.js:77
(anonymous) # bundle.js:80
My webpack.config file looks like this:
var path = require('path');
var LiveReloadPlugin = require('webpack-livereload-plugin');
module.exports = {
entry: './client/src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'client/src/public/dist')
},
context: __dirname,
devtool: 'source-map',
resolve: {
extensions: ['.js', '.jsx', '.json', '*']
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-1'],
sourceMap: true
}
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new LiveReloadPlugin({appendScriptTag: true})
]
};
Any idea what could be causing this?
Here is my package.json:
{
"name": "cryptoApp",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"lint": "./node_modules/eslint/bin/eslint.js client/src",
"build-watch": "npm run build -- -w -d",
"start": "node server/index.js",
"start-watch": "nodemon server/index.js --watch server --watch db",
"dev": "cross-env NODE_ENV=development concurrently --kill-others --prefix \"[{name}]\" --names \"BUILD,SERVE\" -c \"bgBlack.bold.green,bgBlack.bold.red\" \"npm run build-watch\" \"npm run start-watch\""
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.16.2",
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.1",
"connect-session-sequelize": "^4.1.0",
"express": "^4.15.2",
"express-session": "^1.15.3",
"nodemon": "^1.11.0",
"passport": "^0.3.2",
"passport-google-oauth2": "^0.1.6",
"pg": "^6.2.4",
"pg-hstore": "^2.3.2",
"prop-types": "^15.6.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"redux-devtools-extension": "^2.13.0",
"redux-logger": "^3.0.1",
"redux-thunk": "^2.2.0",
"sequelize": "^4.4.0",
"styled-components": "^4.1.3",
"volleyball": "^1.4.1",
"webpack-livereload-plugin": "^0.11.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-eslint": "^10.0.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"concurrently": "^3.4.0",
"cross-env": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^5.13.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
}
}

Answer 1

Look at the following line in the error traceback:
at Object.eval (styled-components.br…er.esm.js?60a8:1670)
Lets take a look at that line in node_modules/styled-components/dist/styled-components.browser.esm.js. You'll see the following:
var ThemeContext = createContext();
createContext was introduced to the context api in React v16.x, see here. As per your package.json, you are using React v15.5.4, hence the error.
You have 2 options: (1) upgrade react to v16.x or (2) downgrade styled-components to v3.x - this will do it because styled-components v3.x uses the old react context api.
Also, you can read here about why your code breaks when using multiple versions of react at the same time.