Как только я импортирую styleled-компоненты (import styled from 'styled-components';) в свое приложение реагирования, я получаю следующую ошибку:
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"
}
}