Webpack error when trying to use styled-components

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"
  }
}

Could you show us your package.json? I'm trying to reproduce the error. — nebuler
– nebuler, Commented Feb 7, 2019 at 5:32
Thanks a lot for the effort. I'm basically using this boilerplate code github.com/Crizzooo/fullstack-react-boilerplate — grabury
– grabury, Commented Feb 7, 2019 at 6:23
The root cause is that the entire frontend ecosystem is a steaming pile of 💩. Solution: Consider a less stressful career. — Steve
– Steve, Commented Jun 28, 2021 at 4:13

nebuler · Accepted Answer · 2019-02-07 06:53:39Z

8

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.

edited Feb 7, 2019 at 6:53

answered Feb 7, 2019 at 6:35

nebuler

1,5451 gold badge9 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

grabury Over a year ago

Awesome. Thank you.

Collectives™ on Stack Overflow

Webpack error when trying to use styled-components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related