import only Grid

Hello,

I've seen you are building very nice component which might help me a lot, but I can't understand why can't I import only Grid. When I try to do it, webpack build breaks saying this:

> ERROR in ./~/react-redux-grid/src/index.js
> You may need an appropriate loader to handle this file type.
> | import { combineReducers } from 'redux';
> | 
> | import { ConnectedGrid } from './components/Grid.jsx';

I'm using react/redux architecture to build web app, is there a confilct between my store and your store. Can't get what's wrong even with simple example.

[bencripps]

Can you post your webpack config? It looks like you're not able to build either a jsx file, or you're not using babel-loader with the appropriate plugins. These are the loaders for js/jsx used by grid:

   {
        test: /\.js$|\.jsx$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules|\.json$/
    }

With the following babel-presets, which are in the .babelrc:

{
    "presets": [ "react", "es2015", "stage-0" ]
}

Thanks for the quick reply, here is my webpack configuration:

var path = require('path');

var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    devServer: {
        contentBase: path.resolve('build'),
        historyApiFallback: true
    },
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080',
        'webpack/hot/only-dev-server',
        './src/app/app.jsx'
    ],
    output: {
        path: path.resolve('build'),
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        root: path.resolve('src'),
        extensions: ['', '.js']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['style', 'css', 'sass']
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

I tried to add stage-0 for babel but it didn't help...

[bencripps]

You're using webpack to build your src directory -- you need to alter your exclude pattern a bit:

Updated loader config:

     {
        test: /\.jsx?$/,
        exclude: /[\\\/]node_modules[\\\/](?!react-redux-grid)/,
        loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
     },

This way, you'll exclude all the node_modules you don't want to build, except the grid -- which you're building with webpack now.

Hope this helps!

Thanks, couldn't do it with regex there is syntax error, but I just copied all the files from your library and run the app and saw that I'm missing stylus and font loader for webpack, that did the job...

[bencripps]

I updated the regex, it wad missing the ! at the beginning of the pattern. I would try and do it this way -- so that you can continually npm install/update/etc

If you don't want the fonts, you can exclude them. See the readme for more information, or let me know if you have any questions.

Thanks a lot, regex now works perfectly 👍
And stylus-loader needs to be put in webpack.config.js also