Ошибка CSSModules во время выполнения (ошибка консоли Chrome).
Я получаю следующую ошибку при запуске приложения в консоли Chrome:
warning.js?6327:33 Warning: React.createElement: type is invalid --
expected a string (for built-in components) or a class/function (for composite components) but got: object.
printWarning @ warning.js?6327:33
warning @ warning.js?6327:57
createElement @ ReactElementValidator.js?f652:190
(anonymous) @ index.js?dadc:6
(anonymous) @ bundled.js:1085
__webpack_require__ @ bundled.js:20
(anonymous) @ bundled.js:63
(anonymous) @ bundled.js:66
invariant.js?7313:42 Uncaught Error: Element type is invalid: expected
a string (for built-in components) or a class/function (for composite
components) but got: object.
at invariant (invariant.js?7313:42)
at ReactCompositeComponentWrapper.instantiateReactComponent [as
_instantiateReactComponent] (instantiateReactComponent.js?e676:72)
at ReactCompositeComponentWrapper.performInitialMount
(ReactCompositeComponent.js?063f:364)
at ReactCompositeComponentWrapper.mountComponent
(ReactCompositeComponent.js?063f:255)
at Object.mountComponent (ReactReconciler.js?c56c:43)
at mountComponentIntoNode (ReactMount.js?0cc2:102)
at ReactReconcileTransaction.perform (Transaction.js?91bc:141)
at batchedMountComponentIntoNode (ReactMount.js?0cc2:124)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js?91bc:141)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js?bdd7:60)
Это происходит только тогда, когда я использую CSSModules
в моем компоненте:
var React = require('react');
var CSSModules = require('react-css-modules');
var ReactRouter = require('react-router-dom');
var Router = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
var Index = require('../pages/Index');
var SideBar = require('../component/SideBar');
var styles = require('../scss/components/App.scss');
class App extends React.Component {
render () {
return (
<Router>
<div className="default-neat-grid ">
<div className="row-fluid">
<SideBar />
<div className="span10">
<Route path="/" component={Index} />
</div>
</div>
</div>
</Router>
);
};
}
//module.exports = App;
export default CSSModules(App, styles);
Мой webpack.config.js:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : __dirname + '/app/index.js',
devtool: 'eval-source-map',
module : {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
}),
}
]
},
output: {
filename : 'bundled.js',
path : __dirname + '/build'
},
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 200
},
plugins: [
new ExtractTextPlugin({
filename: 'app.css',
allChunks: true
})
]
};