npm material-ui-table-edit loader

Question

I have a ReactJS project and I need to use and edit table. I found this one interesting: https://www.npmjs.com/package/material-ui-table-edit

I did npm i material-ui-table-edit --save

this is what my package.json looks like:

{
  "name": "app-2",
  "version": "1.0.0",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --watch --watch-poll --config webpack.dev.config.js --colors --content-base ./client  --history-api-fallback",
    "build": "webpack --config webpack.prod.config.js",
    "test": "jest",
    "lint": "eslint src"
  },
  "author": "",
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]
  },
  "dependencies": {
    "alt": "^0.18.4",
    "alt-container": "^1.0.2",
    "axios": "^0.11.0",
    "formsy-material-ui": "^0.4.3",
    "formsy-react": "^0.18.0",
    "lodash": "^4.11.1",
    "material-ui": "^0.15.0",
    "material-ui-table-edit": "^2.0.4",
    "moment": "^2.13.0",
    "react": "^15.0.2",
    "react-cookie": "^0.4.6",
    "react-dom": "^15.0.2",
    "react-motion": "^0.4.3",
    "react-router": "=2.5.0",
    "react-tap-event-plugin": "^1.0.0",
    "uuid": "^2.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-jest": "^12.0.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "eslint": "^2.7.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-react": "^5.1.1",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "jest-cli": "^12.0.2",
    "json-loader": "^0.5.4",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "progress-bar-webpack-plugin": "^1.6.0",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.2.0",
    "webpack-dev-server": "^1.2.0",
    "webpack-plugin-notifier": "^0.1.0"
  },
  "license": "ISC"
}

My webpack.dev.config.js:

  output: {
    path: './client',
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle.js'
  },
  debug: true,
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ProgressBarPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.CommonsChunkPlugin('common.bundle.js'),
    new webpack.NoErrorsPlugin()
  ],
  resolve: {
    modulesDirectories: ['node_modules']
  },
  module: {
    preLoaders: [
      {test: /\.jsx$/, exclude: /node_modules/, loader: 'eslint'}
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'react-hot!babel',
        exclude: /node_modules/
      },
      {
        test: /\.json?$/,
        loader: 'json'
      },
      {
        test: /\.less/,
        loader: 'style!css!less'
      },
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.html$/,
        loader: 'file?name=[path][name].[ext]&context=./src'
      }
    ]
  }
};

I am getting this error when I import it:

import EditTable from 'material-ui-table-edit';

I am getting this error:

ERROR in ./~/material-ui-table-edit/index.jsx
Module parse failed: C:\Users\karim.eltal\Documents\workspace\cgbs-attributes\web-entry\node_modules\material-ui-table-edit\index.jsx Unexpected token (68:13)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (68:13)

Answer 1

EDIT: It's possible to consume material-ui-table-edit out of the box now. Thanks to @mk. for the fix!

I left the old answer below for reference since sometimes you need to patch it up like this.

---

By the looks of it the author of the package doesn't provide it in a precompiled form. This means if you want to use it, you'll need to compile it yourself. You can achieve this with an include:

var path = require('path');    

...

{
  test: /\.jsx?$/,
  loader: 'react-hot!babel',
  include: path.join(process.cwd(), 'node_modules', 'material-ui-table-edit'),  
  exclude: /node_modules/
},

That will make your Babel setup pick it up.

Or, as David mentioned, you could consider some other alternative or poke the original author about it to see if he is willing to publish a compiled version.

Answer 2

Their library has jsx in it (bad), your loader is (rightly) skipping node_modules so it's not running their code through babel because it's in node_modules.

You will need to include their library in your loader config.

OR...

My two cents: if a package author ships code that requires transpilation, they don't know what they're doing. Couple that with 6 github stars and I'd pick another package.