Ошибка 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
        })
 ]
 };

0 ответов

Другие вопросы по тегам