[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
        }
    }
};

[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

[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>
|     )
|   }

[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.

[Author]

Posts