[英]Trouble adding styled-components to 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)
App組件如下所示:
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';
刪除import styled from 'styled-components';
的行import styled from 'styled-components';
並將AppWrapper
替換為可正常工作的div。
我已經使用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"
}
}
知道發生了什么嗎?
我認為styled-components 4.1.3不能與react 15.5.4一起使用。
嘗試增強依賴性,然后運行npm install。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.