javascript - 向 React 添加样式组件时遇到问题

Question

我正在尝试将样式组件添加到一些 react 样板代码中。当我加载主页时，我在控制台中收到以下错误:

Uncaught TypeError: __webpack_require__.i(...) is not a function
    at Object.eval (styled-components.browser.esm.js?60a8:1670)
    at eval (313:2534)
    at Object.<anonymous> (bundle.js:3837)
    at __webpack_require__ (bundle.js:20)
    at eval (index.js?b50c:62)
    at Object.<anonymous> (bundle.js:1620)
    at __webpack_require__ (bundle.js:20)
    at eval (index.js?c3ed:7)
    at Object.<anonymous> (bundle.js:1908)
    at __webpack_require__ (bundle.js:20)

应用程序组件如下所示:

import React from 'react';
import styled from 'styled-components';

const AppWrapper = styled.div`
  max-width: 100px;
`;

const App = ({ user }) => (
  <AppWrapper>
    Test app
  </AppWrapper>
);

export default App;

如果我删除行 import styled from 'styled-components'; 并用 div 替换 AppWrapper ，它会按预期工作。

我已经使用 npm 安装了 styled-components。

我的 webpack 配置如下所示:

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": "biolerplate",
  "version": "1.0.0",
  "description": "a boilerplate for react, redux, & express",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "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": {
    "@material-ui/core": "^3.9.2",
    "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",
    "immutable": "^4.0.0-rc.12",
    "nodemon": "^1.11.0",
    "passport": "^0.3.2",
    "passport-google-oauth2": "^0.1.6",
    "pg": "^6.2.4",
    "pg-hstore": "^2.3.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-helmet": "^5.2.0",
    "react-redux": "^5.0.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-select": "^2.3.0",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.1",
    "redux-thunk": "^2.2.0",
    "reselect": "^4.0.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-loader": "^7.0.0",
    "babel-plugin-styled-components": "^1.10.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-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-import-resolver-webpack": "^0.11.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "node-sass": "^4.5.2",
    "redux-devtools-extension": "^2.13.0",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1"
  }
}

知道发生了什么吗？

Answer 1

我认为 styled-components 4.1.3 无法与 React 15.5.4 一起使用。

尝试增加依赖项并运行 npm install。