尝试使用样式组件时出现 Webpack 错误答案

【问题标题】：Webpack error when trying to use styled-components尝试使用样式组件时出现 Webpack 错误
【发布时间】：2019-07-01 02:24:06
【问题描述】：

一旦我将 styled-components (import styled from 'styled-components';) 导入我的 react 应用程序，我就会收到以下错误：

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

我的 webpack.config 文件如下所示：

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})
  ]
};

知道是什么原因造成的吗？

这是我的 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"
  }
}

【问题讨论】：

你使用的是什么 webpack 版本？
"webpack-livereload-plugin": "^0.11.0" "webpack": "^2.4.1"
你能给我们看看你的 package.json 吗？我正在尝试重现错误。
非常感谢您的努力。我基本上使用这个样板代码github.com/Crizzooo/fullstack-react-boilerplate
根本原因是整个前端生态系统是一堆热气腾腾的????。解决方案：考虑一个压力较小的职业。

标签： reactjs webpack styled-components

【解决方案1】：

查看错误回溯中的以下行：

at Object.eval (styled-components.br…er.esm.js?60a8:1670)

让我们看看node_modules/styled-components/dist/styled-components.browser.esm.js 中的那一行。您将看到以下内容：

var ThemeContext = createContext();

createContext 在 React v16.x 中被引入到上下文 api，参见 here。根据您的package.json，您使用的是 React v15.5.4，因此出现错误。

您有 2 个选择：(1) 升级 react 到 v16.x 或 (2) 将 styled-components 降级到 v3.x - 因为 styled -components v3.x 使用旧的 react context api。

此外，您可以阅读here，了解为什么同时使用多个版本的 react 时您的代码会中断。

【讨论】：

太棒了。谢谢。