Menu
I'm getting the following error in my browser:
Uncaught Error: Invariant Violation: The
styleprop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
This is when running webpack-dev-server and going to localhost:8080.
./modules/main.js:
/** @jsx React.DOM */
var React = require('react');
var HoverAction = require('./HoverAction/HoverAction');
var Application = React.createClass({
render: function() {
return (
<div>
<HoverAction title="favorite" />
</div>
);
}
});
if (typeof window !== 'undefined') {
React.render(<Application />, document.getElementById('app'));
}
./modules/HoverAction/HoverActions.js:
/** @jsx React.DOM */
'use strict';
var StyleSheet = require('react-style');
var React = require('react');
var HoverActionStyles = StyleSheet.create({
normal: {
height: '200px',
width: '200px',
border: '1px solid black'
}
});
var HoverActionTitleStyle = StyleSheet.create({
normal: {
textAlign: 'center',
fontSize: '10px'
}
});
var HoverAction = React.createClass({
render: function() {
return (
<div style={HoverActionStyles.normal}>
<div ></div>
<div style={HoverActionTitleStyle.normal} >{this.props.title}</div>
</div>
);
}
});
module.exports = HoverAction;
index.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="bundle.css">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
webpack.config.js:
'use strict';
var ReactStylePlugin = require('react-style-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
module.exports = {
devtool: 'sourcemap',
entry: './modules/main.js',
output: {
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loaders: [
ReactStylePlugin.loader(),
'jsx-loader?harmony'
]
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader')
// loader: 'style-loader!css-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
} // inline base64 URLs for <=8k images, direct URLs for the rest
]
},
plugins: [
new ReactStylePlugin('bundle.css'),
new webpack.DefinePlugin({
'process.env': {
// To enable production mode:
// NODE_ENV: JSON.stringify('production')
}
})
]
};
package.json:
{
"name": "webpack-howto-example",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"bundle-loader": "^0.5.4",
"css-loader": "^0.12.0",
"file-loader": "^0.8.1",
"jsx-loader": "^0.13.2",
"less": "^2.5.0",
"less-loader": "^2.2.0",
"react-style": "^0.5.5",
"react-style-webpack-plugin": "0.4.0",
"style-loader": "^0.12.1",
"url-loader": "^0.5.5",
"webpack": "^1.8.10",
"webpack-dev-server": "^1.8.2"
},
"dependencies": {
"react": "^0.13.2",
"react-router": "^0.13.2"
}
}
490
I used the style attribute in JSX file like this
style={{textTransform: 'uppercase'}}
and it worked for me
104
React Style requires you to use the styles prop instead of style.
var HoverAction = React.createClass({
render: function() {
return (
<div styles={HoverActionStyles.normal}>
<div ></div>
<div styles={HoverActionTitleStyle.normal} >{this.props.title}</div>
</div>
);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
