Question

我正在尝试将样式化组件添加到一些React样板代码中。加载首页时，在控制台中出现以下错误：

df = pd.concat([big_df, small_df]).sort_values(['A', 'B'])

App组件如下：

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;并用div替换了import styled from 'styled-components';，它会按预期工作。

我已经使用npm安装了AppWrapper。

我的webpack配置如下：

styled-components

这是我的package.json

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

知道发生了什么吗？

Answer 1

我认为

样式化组件4.1.3无法与react 15.5.4配合使用。

尝试增强依赖性并运行npm install。

无法将样式化组件添加到React

1 个答案: