Question

将样式化组件（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"
  }
}

Answer 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）升级到v16.x或（2）将样式化的组件降级到v3.x-这样做是因为样式-components v3.x使用旧的react上下文api。

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

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

1 个答案: