webpack can't load deck.gl

[ptchiangchloe]

Hi, I have trouble to bundle deck.gl into my app, The error I got is:

ERROR in ./node_modules/deck.gl/package.json Module parse failed: Unexpected token (5:9) You may need an appropriate loader to handle this file type. | | { | "_from": "deck.gl", | "_id": "deck.gl@4.1.5", | "_inBundle": false,

Here is my webpack config:

webpack.common.js:

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var pkgBower = require('./package.json');

var baseHref = process.env.WP_BASE_HREF ? process.env.WP_BASE_HREF : '/';

module.exports = {

    entry: {
        'vendor': './app/vendor.jsx',
        'app': './app/app.jsx'
    },

    resolve: {
        modules: [path.join(__dirname, ''), 'node_modules', 'bower_components'],
        extensions: ['.js', '.jsx'],
        alias: {
            moment$: 'moment/moment.js',
            d3$: 'd3/d3.min.js'
        }
    },

    module: {
        rules: [
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'raw-loader'
            },
            {
                test: /\.geojson$/,
                exclude: /node_modules/,
                loader: 'json-loader'
            },
            {
                test: /jquery\.flot\.resize\.js$/,
                use: 'imports-loader?this=>window'
            }, {
                test: /\.js/,
                use: 'imports-loader?define=>false'
            }, {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: 'react-hot-loader'
            }, {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015', 'react'],
                        compact: false
                    }
                }
            }, {
                test: /\.css$/,
                exclude: path.join(process.cwd(), '/app'),
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                })
            }, {
                test: /\.css$/,
                include: path.join(process.cwd(), '/app'),
                use: 'raw-loader'
            }, {
                test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
                use: 'url-loader?prefix=font/&limit=10000'
            }, {
                test: /\.(png|jpg|gif)$/,
                use: 'url-loader?limit=10000'
            }, {
                test: /\.scss$/,
                use: [{
                        loader: 'style-loader'
                    }, {
                        loader: 'css-loader'
                    },/*{
                        loader: 'rtlcss-loader' // uncomment for RTL
                    },*/
                    {
                        loader: 'sass-loader',
                        options: {
                            outputStyle: 'expanded'
                        }
                    }
                ]
            }, {
                test: /[\\\/]bower_components[\\\/]modernizr[\\\/]modernizr\.js$/,
                loader: "imports?this=>window!exports?window.Modernizr"
            }
        ]
            // , noParse: [/\.min\.js/]
    },

    resolveLoader: {
        alias: {
            'rtlcss-loader': path.join(__dirname, 'rtlcss-loader.js')
        }
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor[hash:6].js' }),
        new HtmlWebpackPlugin({
            template: 'app/index.html',
            baseUrl: baseHref
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.moment': 'moment',
            'moment': 'moment'
        }),
        // https://github.com/moment/moment/issues/2979#issuecomment-189899510
        new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
        new webpack.DefinePlugin({
            WP_BASE_HREF: JSON.stringify(baseHref)
        })
    ]
};

webpack.dev.js:

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var path = require('path');
const resolve = require('path').resolve;

const backendServer = "http://localhost:9000"

module.exports = webpackMerge(commonConfig, {
    devtool: '#source-map',

    // entry: {
    //     dev: 'webpack/hot/dev-server'
    // },

    output: {
        path: path.resolve(__dirname, '../public/bundles/'),
        filename: '[name].bundle.js'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('[name].css')
    ],

    devServer: {
        proxy:
        [{
            context: ["/api", "/assets"],
            target: backendServer
        }],
        historyApiFallback: true,
        stats: 'minimal',
        inline: true,
        hot: true,
        contentBase: [
          __dirname,
          resolve(__dirname, '../')
        ]
    }
});

package.json:

"dependencies": {
    "@mapbox/mapbox-gl-traffic": "^1.0.2",
    "babel-polyfill": "6.23.0",
    "babel-runtime": "6.23.0",
    "brfs": "^1.4.3",
    "codemirror": "5.25.2",
    "compression": "1.6.2",
    "cross-env": "4.0.0",
    "d3": "4.8.0",
    "d3-array": "^1.2.1",
    "d3-color": "^1.0.3",
    "d3-request": "^1.0.6",
    "d3-scale": "^1.0.6",
    "datatables.net": "1.10.15",
    "datatables.net-bs": "1.10.15",
    "datatables.net-buttons": "1.3.1",
    "datatables.net-buttons-bs": "1.3.1",
    "datatables.net-responsive": "2.1.1",
    "datatables.net-responsive-bs": "2.1.1",
    "deck.gl": "^4.1.5",
    "ejs": "2.5.6",
    "hexgrid-heatmap": "^0.1.2",
    "highcharts": "^6.0.2",
    "history": "2.1.2",
    "immutable": "^3.8.2",
    "leaflet.heat": "^0.2.0",
    "maki": "^2.1.0",
    "mapbox-gl": "^0.40.1",
    "material-design-icons": "^3.0.1",
    "optimize-css-assets-webpack-plugin": "1.3.1",
    "pubsub-js": "1.5.6",
    "r-dom": "^2.4.0",
    "react": "^15.5.4",
    "react-bootstrap": "0.31.0",
    "react-dimensions": "^2.0.0-alpha2",
    "react-dom": "15.5.4",
    "react-dropzone": "3.13.1",
    "react-foursquare": "^1.0.0",
    "react-google-maps": "^8.3.5",
    "react-highcharts": "^13.0.0",
    "react-jsx-highcharts": "^2.0.1",
    "react-map-gl": "^3.1.0",
    "react-map-gl-heatmap-overlay": "^1.1.3",
    "react-mapbox-gl": "^2.7.0",
    "react-modal": "^3.0.4",
    "react-redux": "^5.0.6",
    "react-router": "3.0.5",
    "react-router-bootstrap": "0.23.3",
    "react-toggle-button": "^2.1.0",
    "react-transition-group": "1.1.3",
    "react-window-resize-listener": "^1.1.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "url-loader": "0.5.8",
    "webgl-heatmap": "^0.2.3"
  },
  "devDependencies": {
    "babel-core": "6.24.1",
    "babel-jest": "19.0.0",
    "babel-loader": "7.1.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "bower": "1.8.0",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.28.1",
    "cssnano": "3.10.0",
    "dotenv-webpack": "^1.5.4",
    "empty-module": "0.0.2",
    "extract-text-webpack-plugin": "3.0.1",
    "file-loader": "0.11.1",
    "html-loader": "0.4.5",
    "html-webpack-plugin": "2.29.0",
    "imports-loader": "0.7.1",
    "node-sass": "4.5.2",
    "null-loader": "0.1.1",
    "phantomjs-prebuilt": "2.1.14",
    "raw-loader": "0.5.1",
    "react-addons-test-utils": "15.5.1",
    "react-hot-loader": "1.3.1",
    "rimraf": "2.6.1",
    "rtlcss": "2.1.2",
    "sass-loader": "6.0.6",
    "style-loader": "0.17.0",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.3",
    "webpack-merge": "4.1.0"
  }

[ibgreen]

@ptchiangchloe deck.gl examples folder has many standalone examples using webpack, including hello-world-webpack2 that you can use as a working basis.

Your webpack config is rather complex so hard to say at a glance what is going wrong. But it looks like it fails when importing package.json? You seem to have overridden json loader to raw loader that is probably the problem. Can you exclude deck.gl in that rule?

@apercu

[balthazar]

I would guess adding the following rule will fix the issue

{ test: /deck.gl\/package.json$/, loader: 'json-loader' }

[ptchiangchloe]

Yes, that's working perfectly. I don't know why packjson.json and normal json need two different loaders. Do you know there is any doc referencing that?

Thanks for the help.

Han

[ibgreen]

I think the question is: why does something in your app need to load JSON with a raw loader instead of a JSON loader. Try to delete that line in your webpack to see if you can figure out which component is requiring that setup.

[ptchiangchloe]

Hi @ibgreen,

You are right, raw-loader is no longer needed in the webpack.common.js. The reason I add the rule before is that I was trying to load a json file and json-loader cause an error then I read something online says can solve the issue.

Sometimes I do feel lost in all the loaders from webpack.

Thanks for the help anyway.