Webpack Module Parse Failed

[r3d3llionParticipant]

Please can anyone point out what I’m doing wrong, I have been trying for a few hours now to integrate the React JQWidgets into my React / Webpack 2 project.

I have bundled the jqx-all.js file from “node_modules/jqwidgets-framework/jqwidget/jqx-all.js” and injected it into main HTML page,
and I have used the es6 import statement to import the “react_jqxgrid.js” into one of my components.

When I run “npm start” I receive this webpack error, it seems to be because the React JQWidgets need transpiling with the babel-loader.

Below is my webpack.config.js:

module.exports = {
    devtool: isProd ? 'source-map' : 'cheap-module-source-map',
    context: sourcePath,

    entry: {
        pages: pages,
        vendor: [
            'react',
            'react-dom',
            'react-router',
            'react-router-redux',
            'isomorphic-fetch',
            'es6-promise',
            'object-assign',
            'redux',
            'react-redux',
            'redux-saga',
            'lodash'
        ],
        jqwidgets: [
            'jqwidgets-framework/jqwidgets/jqx-all.js'    
        ]
    },

    output: {
        path: staticsPath,
        filename: '[name].bundle.js',
        publicPath: '/',
    },

    module: {
        rules: [
        {
            test: /\.json$/,
            loader: 'json-loader'
        }, 
        {
            test: /\.html$/,
            use: {
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]'
                }
            }
        }, 
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, 
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, 
        {
            test: /\.(js|jsx)$/,
            include: [
              path.resolve(__dirname, 'client'),
              path.resolve(__dirname, 'node_modules/jqwidgets-framework')
            ],
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true
                }
            }]
        }, 
        {
            test: /\.(gif|png|jpg|jpeg|svg)(\?[a-z0-9]+)?$/,
            use: 'file-loader'
        }, 
        {
            test: /\.(woff|woff2|eot|ttf)$/,
            loader: 'url-loader?limit=100000'
        }]
    },

    resolve: {
        extensions: ['.js', '.jsx'],
        modules: [
            sourcePath,
            'node_modules'
        ]
    },

    plugins: plugins,

    devServer: {
        contentBase: './client',
        historyApiFallback: true,
        port: 8080,
        hot: true,
        compress: isProd,
        stats: {
            colors: true
        }
    }
};

This is my react component:

import React from 'react';
import ReactDOM from 'react-dom';
import JqxGrid from 'jqwidgets-framework/jqwidgets-react/react_jqxgrid.js';

class MyListComponent extends React.Component {
  
 render () {
   
    var data = [
        {
          "fullName": "Some Person",
          "dateOfBirth": "01/03/1990"
        }
    ];
    var source = {
        datatype: 'json',
        localdata: data,
        datafields:
        [
            {
                fullName: 'fullName', dateOfBirth: 'dateOfBirth'
            }
        ]
    };
    
    let dataAdapter = new $.jqx.dataAdapter(source);
    
    let columns =
      [
        { text: 'Full Name', datafield: 'fullName' },
        { text: 'Date of Birth', datafield: 'dateOfBirth', cellsformat: 'D' }
      ];
     
    return (
      <JqxGrid 
        width={500} 
        height={500} 
        source={dataAdapter} 
        columns={columns}
      />
    );
    
    return null;
  }
}

export default MyListComponent;

Below is the error I receive:

Module parse failed: /home/ubuntu/workspace/node_modules/jqwidgets-framework/jqwidgets-react/react_jqxgrid.js Unexpected token (1126:6)
You may need an appropriate loader to handle this file type.
|     this.componentSelector = id;
| ;    return (
|       <div id={id}>{this.value ? null : this.props.value}{this.props.children}</div>
|     )
|   }

[Ivo ZhulevParticipant]

Hi r3d3llion,

Could you try adding presets: ['es2015', 'react'] in the query under loader: 'babel-loader' – should look like this:

use: [{
    loader: 'babel-loader',
    query: {
       presets: ['es2015', 'react'],
       cacheDirectory: true
    }
 }]

P.S Make sure you have installed this dependencies -> babel-preset-es2015 and babel-preset-react

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[r3d3llionParticipant]

Thanks for you reply, I have updated my webpack.config as per your suggestion but I am still receiving the same error:

ERROR in ./~/jqwidgets-framework/jqwidgets-react/react_jqxgrid.js
Module parse failed: /home/ubuntu/workspace/node_modules/jqwidgets-framework/jqwidgets-react/react_jqxgrid.js Unexpected token (1126:6)
You may need an appropriate loader to handle this file type.
|     this.componentSelector = id;
| ;    return (
|       <div id={id}>{this.value ? null : this.props.value}{this.props.children}</div>
|     )
|   }

This is what my webpack.config.js file looks like now:

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const nodeEnv = process.env.NODE_ENV || 'development';
const isProd = nodeEnv === 'production';

const sourcePath = path.join(__dirname, './client');
const staticsPath = path.join(__dirname, './static');

const extractCssPlugin = new ExtractTextPlugin({
    filename: 'style.css',
    disable: false,
    allChunks: true
});

const plugins = [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: Infinity,
        filename: 'vendor.bundle.js'
    }),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(nodeEnv)
        }
    }),
    new HtmlWebpackPlugin({
        template: sourcePath + '/index.ejs',
        production: isProd,
        inject: true,
    }),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
];

const pages = [
    'index',
    'pages/Login/LoginPage',
];

if (isProd) {
    plugins.push(
        new webpack.DefinePlugin({
            'process.env': {
                // This has effect on the react lib size
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            debug: false
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                screw_ie8: true,
                conditionals: true,
                unused: true,
                comparisons: true,
                sequences: true,
                dead_code: true,
                evaluate: true,
                if_return: true,
                join_vars: true,
            },
            output: {
                comments: false
            },
        }),
        extractCssPlugin
    );

    pages.unshift(
        'webpack-dev-server/client?https://0.0.0.0:8080',
        'webpack/hot/only-dev-server'
    );
}
else {
    plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    );
}

module.exports = {
    devtool: isProd ? 'source-map' : 'cheap-module-source-map',
    context: sourcePath,

    entry: {
        pages: pages,
        vendor: [
            'react',
            'react-dom',
            'react-router',
            'react-router-redux',
            'isomorphic-fetch',
            'es6-promise',
            'object-assign',
            'redux',
            'react-redux',
            'redux-saga',
            'lodash'
        ],
        jqwidgets: [
            'jqwidgets-framework/jqwidgets/jqx-all.js'    
        ]
    },

    output: {
        path: staticsPath,
        filename: '[name].bundle.js',
        publicPath: '/',
    },

    module: {
        rules: [
        {
            test: /\.json$/,
            loader: 'json-loader'
        }, 
        {
            test: /\.html$/,
            use: {
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]'
                }
            }
        }, 
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, 
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, 
        {
            test: /\.(js|jsx)$/,
            include: [
              path.resolve(__dirname, 'client'),
              path.resolve(__dirname, 'node_modules/jqwidgets-framework')
            ],
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                    cacheDirectory: true
                }
            }]
        }, 
        {
            test: /\.(gif|png|jpg|jpeg|svg)(\?[a-z0-9]+)?$/,
            use: 'file-loader'
        }, 
        {
            test: /\.(woff|woff2|eot|ttf)$/,
            loader: 'url-loader?limit=100000'
        }]
    },

    resolve: {
        extensions: ['.js', '.jsx'],
        modules: [
            sourcePath,
            'node_modules'
        ]
    },

    plugins: plugins,

    devServer: {
        contentBase: './client',
        historyApiFallback: true,
        port: 8080,
        hot: true,
        compress: isProd,
        stats: {
            colors: true
        }
    }
};

Below is what my packages.json file looks like:

{
  "name": "MyClient",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "author": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --host $IP --port $PORT --config webpack.config.js",
    "prod": "node build.js production server",
    "build": "node build.js production filesystem"
  },
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-core": "6.16.0",
    "babel-loader": "6.2.7",
    "babel-plugin-react-intl": "^2.3.1",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-regenerator": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "6.22.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.16.0",
    "compression-webpack-plugin": "^0.3.2",
    "css-loader": "0.14.5",
    "eslint": "^3.16.1",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.10.0",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "0.8.5",
    "html-webpack-plugin": "2.26.0",
    "json-loader": "^0.5.4",
    "node-sass": "3.12.2",
    "redux-devtools": "^3.3.2",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.2.0",
    "resolve-url-loader": "^2.0.0",
    "sass-loader": "3.2.3",
    "style-loader": "0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "2.2.0",
    "webpack-dev-server": "2.2.0"
  },
  "dependencies": {
    "babel-runtime": "6.22.0",
    "bootstrap": "^4.0.0-alpha.6",
    "es6-promise": "^4.0.5",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.1.1",
    "jqwidgets-framework": "^4.6.2",
    "jwt-decode": "^2.1.0",
    "lodash": "^4.17.4",
    "object-assign": "^4.1.1",
    "prop-types": "^15.5.10",
    "radium": "^0.18.1",
    "react": "15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-bs-notifier": "^4.0.0",
    "react-burger-menu": "^1.10.14",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "2.8.0",
    "react-router-breadcrumbs": "^2.0.0",
    "react-router-redux": "^4.0.8",
    "react-split-pane": "^0.1.58",
    "react-window-resize-listener": "^1.1.0",
    "redux": "^3.6.0",
    "redux-form": "^6.5.0",
    "redux-polyglot": "^0.5.0",
    "redux-saga": "^0.14.3",
    "store": "^1.3.20"
  }
}

If I can get this working I will be buying a developer license as you seem to be the only decent commercial framework provider that produces React components.

[Ivo ZhulevParticipant]

Hi r3d3llion,

Could you try removing path.resolve(__dirname, 'node_modules/jqwidgets-framework') from the same place and tell me what happens?

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[r3d3llionParticipant]

After removing path.resolve(__dirname, 'node_modules/jqwidgets-framework') from my webpack.config.js file, I get the same error:

ERROR in ./~/jqwidgets-framework/jqwidgets-react/react_jqxgrid.js
Module parse failed: /home/ubuntu/workspace/node_modules/jqwidgets-framework/jqwidgets-react/react_jqxgrid.js Unexpected token (1126:6)
You may need an appropriate loader to handle this file type.
|     this.componentSelector = id;
| ;    return (
|       <div id={id}>{this.value ? null : this.props.value}{this.props.children}</div>
|     )
|   }

[Ivo ZhulevParticipant]

Hi r3d3llion,

Okey try replacing your whole babel part with:

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: [{
        loader: 'babel-loader',
        options: {
            presets: ['es2015', 'react'],
            cacheDirectory: true
        }
    }]
}

If this does not work, please send me your project(I’ll have just to install the packages and run it).

P.S. By your project I mean the bear minimum by which ill get that error.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[r3d3llionParticipant]

Hey Ivo, thanks for looking at this, here is a repository that can reproduce the issue mentioned above:

https://github.com/jmckniff/jqwidgets-issue

[Ivo ZhulevParticipant]

Hi r3d3llion,

The problem is very stupid, don’t know how we haven’t seen it by now.

The react_jqxgrid.js file is located in node_modules and it is ignored by the babel-loader, because we have exclude: [/node_modules/].
That’s why it throws that error… Just move the needed ‘react_jqxXXXX.js’ files in the client folder or include the jqwidgets-framework while still ignoring the node_modules.

P.S. For the deprecation warning – it will be okay in the next major release.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[r3d3llionParticipant]

That’s fixed it thanks Ivo!

Its worth pointing out that exclude: /node_modules/ seems to ignore include: ['node_modules/jqwidgets-framework/jqwidgets-react']
The exclude needs look like exclude: 'node_modules'

Here is what my final webpack.config.js looks like:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const sourcePath = path.join(__dirname, './client');
const staticsPath = path.join(__dirname, './static');

const plugins = [
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: Infinity,
        filename: 'vendor.bundle.js'
    }),
    new HtmlWebpackPlugin({
        template: sourcePath + '/index.ejs',
        production: false,
        inject: true,
    }),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
];

module.exports = {
    devtool: 'source-map',
    context: sourcePath,

    entry: {
        app: [
            'index'
        ],
        vendor: [
            'react',
            'react-dom',
            'es6-promise',
            'object-assign'
        ],
        jqx: [
            'jqwidgets-framework/jqwidgets/jqx-all.js'
        ]
    },

    output: {
        path: staticsPath,
        filename: '[name].bundle.js',
        publicPath: '/',
    },

    module: {
        rules: [{
            test: /\.html$/,
            use: {
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]'
                }
            }
        }, {
            test: /\.(js|jsx)$/,
            include: [
                path.resolve(__dirname, 'client'),
                path.resolve(__dirname, 'node_modules/jqwidgets-framework/jqwidgets-react')
            ],
            exclude: 'node_modules',
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react'],
                    cacheDirectory: true
                }
            }]
        }]
    },

    resolve: {
        extensions: ['.js', '.jsx'],
        modules: [
            sourcePath,
            'node_modules'
        ]
    },

    plugins: plugins,

    devServer: {
        contentBase: './client',
        historyApiFallback: true,
        port: 8080,
        hot: true,
        compress: false,
        stats: {
            colors: true
        }
    }
};

[Ivo ZhulevParticipant]

Hi r3d3llion,

Glad I could help

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[adrian_hdParticipant]

Hi, have the same problem, Add the above configuration and now check this:

ERROR in ./src-standard/index.js
Module parse failed: C:\Repositorios\siag-fe\src-standard\index.js Unexpected to
ken (34:14)
You may need an appropriate loader to handle this file type.
|               gFechaTrabajo : ' 31/03/2017',
|               gFechaActual: 'Jueves, 28 de Mayo de 2015',
|               gIcono: <Glyphicon glyph="glyphicon glyphicon-minus"/>,
|               startDate: moment(),
|               gContenido : <Home/>,
 @ multi (webpack)-dev-server/client?http://0.0.0.0:9020 webpack/hot/dev-server
./src-standard/index.js 

So this is my configuration:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: "./src-standard/index.js",
    output: {
        path: __dirname,
        filename: "dist/bundle.js"
    },
    devServer: {
      host: '0.0.0.0',
      port: 9020
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf|less|scss)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name : "fonts/[name]-[hash].[ext]"
                        } 
                    }
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name : "images/[name]-[hash].[ext]"
                        } 
                    }
                ]
            },
            {
                test: /\.js$|\.jsx$/,
                include: [
                    path.resolve(__dirname, 'node_modules/jqwidgets-framework/jqwidgets-react')
                ],
	        exclude: /(node_modules|bower_components)/, 
                loader: 'babel-loader',
                    options: {
                        presets: ['react', 'es2015'],
                        plugins: ['syntax-dynamic-import']
                    }
            }
        ]
    },
    resolve: {
        alias: {
            "lib-root" : __dirname + "/node_modules",
            "app-root" : __dirname + "/src-standard"
        }
    },

    plugins:[
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(true),
            VERSION: JSON.stringify("5fa3b9"),
            BROWSER_SUPPORTS_HTML5: true,
            "typeof window": JSON.stringify("object")
        })
    ]
};

Apparently I do not recognize the JSX, please tell me if I miss something

[Ivo ZhulevParticipant]

Hi adrian_hd,

Can you please post more of the code around the error?

Regards,
Ivo

[adrian_hdParticipant]

Hi of course!

The error comes up in the file index.js in the line 36, on the console:

ERROR in ./src-standard/index.js
Module parse failed: C:\Repositorios\siag-fe\src-standard\index.js Unexpected to
ken (36:14)
You may need an appropriate loader to handle this file type.
|               gFechaTrabajo : ' 31/03/2017',
|35             gFechaActual: 'Jueves, 28 de Mayo de 2015',
|36             gIcono: <Glyphicon glyph="glyphicon glyphicon-minus"/>,
|37             startDate: moment(),
|               gContenido : <Home/>,
 @ multi (webpack)-dev-server/client?http://0.0.0.0:9020 webpack/hot/dev-server
./src-standard/index.js

File index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Async from 'react-code-splitting'
import 'lib-root/bootstrap/dist/css/bootstrap.united.css';
import 'app-root/css/estilos.css';
import { Navbar, Nav, Button, NavItem, NavDropdown, MenuItem, ButtonToolbar, Dropdown, Glyphicon, Well, Panel, Grid, Row, Col} from 'react-bootstrap';
import DatePicker from 'react-datepicker';
import 'lib-root/react-datepicker/dist/react-datepicker.css';

import moment from 'moment';
import 'moment/locale/es';

moment.updateLocale('es', {
    weekdaysMin : ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
    months : [
        'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
        'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
    ]
});

import BotonFecha from 'app-root/componentes/BotonFecha';
import Contact from 'app-root/componentes/Contact';
import Home from 'app-root/componentes/Home';
import Footer from 'app-root/componentes/Footer';
import 'app-root/css/font-awesome-4.7.0/css/font-awesome.css';
import 'lib-root/react-select/dist/react-select.css';

import JqxGrid from 'lib-root/jqwidgets-framework/jqwidgets-react/react_jqxgrid.js';

export class App extends React.Component {
	constructor(props) {
    	super(props);
    	this.state = {
    		gFechaTrabajo : ' 31/03/2017',
35    		gFechaActual: 'Jueves, 28 de Mayo de 2015',
36    		gIcono: <Glyphicon glyph="glyphicon glyphicon-minus"/>,
37    		startDate: moment(),
    		gContenido : <Home/>,
    		gRuta : 'http://35.184.56.250:9000'
		}

		this.onSelectCatalogos = this.onSelectCatalogos.bind(this);
  	}

	onSelectFinanzas(eventKey){
		alert(<code>Alert from menu item.\neventKey: ${eventKey}</code>);

		this.setState((prevState, props) => {
			return {
		  		gContenido : <Contact/>

			};
		});
	}

	onSelectPresupuesto(eventKey){
		this.setState((prevState, props) => {

			const Proceso = (props) => <Async load={import('app-root/app/presupuesto/procesos/'+eventKey)} componentProps={props}/>
			return { gContenido : <Proceso gRuta={this.state.gRuta}/> }
		});
	}

	onSelectCatalogos(eventKey){
		this.setState((prevState, props) => {

			const Catalogo = (props) => <Async load={import('app-root/app/presupuesto/catalogos/'+eventKey)} componentProps={props}/>
			return { gContenido : <Catalogo gRuta={this.state.gRuta}/> }
		});
	}

	handleChange(date) {
	    this.setState({
	      startDate: date
	    });
    }

	render() {
		return (
		  <div>
		  	<header>
			    <Navbar fixedTop collapseOnSelect>
			    	<Navbar.Header>
				      <Navbar.Brand>
				        <a href="#"><Glyphicon glyph="glyphicon glyphicon-home"/></a>
				      </Navbar.Brand>
				      <Navbar.Toggle />
				    </Navbar.Header>
				    <Navbar.Collapse>
					    <Nav>
					      <NavItem eventKey='administracion' href="#">Administración</NavItem>
					      <NavDropdown eventKey='finanzas' title="Finanzas" id="basic-nav-dropdown">
					        <MenuItem eventKey='poliza' onSelect={this.onSelectFinanzas.bind(this)}>{this.state.gIcono} Póliza</MenuItem>
					        <MenuItem divider />
					        <MenuItem eventKey='procesos' onSelect={this.onSelectFinanzas.bind(this)}>{this.state.gIcono} Procesos</MenuItem>
					        <MenuItem divider />
					        <MenuItem eventKey='reportes' onSelect={this.onSelectFinanzas.bind(this)}>{this.state.gIcono} Reportes</MenuItem>
					      </NavDropdown>
					      <NavDropdown eventKey={'presupuesto'} title="Presupuesto" id="basic-nav-dropdown">
					        <MenuItem eventKey='contra_recibos_egresos' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Contra Recibos de Egresos</MenuItem>
					        <MenuItem eventKey='ordenes_pago' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Ordenes de Pago</MenuItem>
					        <MenuItem eventKey='RegistroPptoEgresosAprobado' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Registro de Presupuesto de Egresos Aprobado</MenuItem>
					        <MenuItem eventKey='LeyIngresos' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Ley de Ingresos</MenuItem>
					        <MenuItem eventKey='ModificacionesPptoEgresos' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Modificaciones al Presupuesto de Egresos</MenuItem>
					        <MenuItem divider />
					        <MenuItem eventKey='claves_programaticas' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Claves Programáticas</MenuItem>
					        <MenuItem divider />
					        <MenuItem eventKey='estado_analitico_ejecicio_presup' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Estado Analítico de Ejecicio del Presupuesto</MenuItem>
					        <MenuItem eventKey='estado_analitico_ingresos_presup' onSelect={this.onSelectPresupuesto.bind(this)}>{this.state.gIcono} Estado Analítico de Ingresos Presupuesto</MenuItem>
					      </NavDropdown>
					      <NavItem eventKey='configuracion' href="#">Configuración</NavItem>
					      <NavDropdown eventKey={'catalogos'} title="Catalogos" id="basic-nav-dropdown">
					        <MenuItem disabled>Finanzas</MenuItem>
             		        <MenuItem eventKey='PlanCuentas' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Plan de Cuentas</MenuItem>
					        <MenuItem divider />
					        <MenuItem disabled>Presupuesto</MenuItem>
					        <MenuItem eventKey='ActividadesInstitucionales' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Actividades Institucionales</MenuItem>
		    		        <MenuItem eventKey='Beneficiarios' onSelect={this.onSelectCatalogos}>{this.state.gIcono}  Beneficiarios</MenuItem>
		    		        <MenuItem eventKey='clasificacion_administrativa' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificación Administrativa</MenuItem>
		    		        <MenuItem eventKey='clasificador_funcional_gasto' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificador_Funcional Gasto</MenuItem>
		    		        <MenuItem eventKey='ClasificadorFuenteFinanciamiento' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificador Fuente de Financiamiento</MenuItem>
		    		        <MenuItem eventKey='clasificador_objeto_gasto' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificador por Objeto del Gasto</MenuItem>
		    		        <MenuItem eventKey='clasificador_tipo_gasto' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Clasificador por Tipo de Gasto</MenuItem>
		    		        <MenuItem eventKey='localidades' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Localidades</MenuItem>
		    		        <MenuItem eventKey='modalidad_programas_presupuestarios' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Modalidad y Programas Presupuestarios</MenuItem>
		    		        <MenuItem eventKey='Procedencias' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Procedencias</MenuItem>
		    		        <MenuItem eventKey='UnidadesAdministrativas' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Unidades Administrativas</MenuItem>
					      	<NavDropdown eventKey={'catalogos2'} title="Catalogos" id="basic-nav-dropdown">
					      		<MenuItem eventKey='modalidad_programas_presupuestarios2' onSelect={this.onSelectCatalogos}>{this.state.gIcono} Modalidad y Programas Presupuestarios</MenuItem>
					      	</NavDropdown>
					      </NavDropdown>
					    </Nav>
					    <Nav pullRight>
					    	<NavItem eventKey='fecha_trabajo' href="#">
					    		<DatePicker
					    			minDate={moment('01/01/2017')}
									maxDate={moment('01/01/2017').add(364, "days")}
							        customInput={<BotonFecha/>}
							        selected={this.state.startDate}
							        onChange={this.handleChange.bind(this)}
							     />
					    	</NavItem>
						    <NavDropdown eventKey='administrador' title={<span><Glyphicon glyph='glyphicon glyphicon-user'/> Administrador</span>} id="basic-nav-dropdown">
						    	<MenuItem eventKey="1"><Glyphicon glyph="glyphicon glyphicon-cog"/> Configuración</MenuItem>
						    	<MenuItem eventKey="2"><Glyphicon glyph="glyphicon glyphicon-log-out"/> Salir</MenuItem>
						    </NavDropdown>
				      	</Nav>
					</Navbar.Collapse>
				</Navbar>
			</header>
		    <div className="content">
		        {this.state.gContenido}
		    </div>
		    <Footer gFechaActual={this.state.gFechaActual}></Footer>
		  </div>
		)
	}
}

document.addEventListener('DOMContentLoaded', ()=> {
	var container = document.getElementById('contenedor');
	ReactDOM.render(
	    React.createElement(App), //clase
	    container //index.html
	);
});

[Ivo ZhulevParticipant]

Hi adrian_hd,

Try running this code please:

import React from 'react';
import ReactDOM from 'react-dom';

import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            button: <JqxButton value={'Button'} />
        }
    }

    render() {

        return (
            <div>
                {this.state.button}
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

If this works, try to run the same simple code, but with the <Glyphon />.

Awaiting your response,
Ivo

[Author]

Posts