Mapbox-gl-js: Production build with Webpack 4 error

[grillorafael]

mapbox-gl-js version: 0.45.0

browser: Firefox Quantum

Steps to Trigger Behavior

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const tsImportPluginFactory = require('ts-import-plugin');
const theme = require('./theme');

const conf = {
    source: path.resolve(__dirname, process.env.SOURCE_DIR),
    target: path.resolve(__dirname, process.env.TARGET_DIR),
    dev: process.env.NODE_ENV === 'development'
};

const IS_PRODUCTION = !conf.dev;

const plugins = [
    new HtmlWebpackPlugin({ template: 'index.html' }),
    new CleanWebpackPlugin(conf.target, { allowExternal: true }),
    // new webpack.NoEmitOnErrorsPlugin(),
];

module.exports = {
    watch: conf.dev,
    mode: IS_PRODUCTION ? 'production' : 'development',
    entry: path.resolve(conf.source, './App.tsx'),
    output: {
        path: conf.target,
        publicPath: "/assets/",
        filename: IS_PRODUCTION ? '[name].[hash].js' : '[name].js',
    },
    plugins,
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    },
    devtool: IS_PRODUCTION ? "source-map" : "inline-source-map", // todo: decide on the best option
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: "ts-loader",
                options: {
                    transpileOnly: true,
                    getCustomTransformers: () => ({
                        before: [ tsImportPluginFactory({
                            libraryName: 'antd',
                            libraryDirectory: 'es',
                            style: true
                        }) ]
                    })
                }
            },
            {
                test: /\.(s*)css$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'less-loader',
                        options: {
                            modifyVars: theme.colors,
                            javascriptEnabled: true,
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                exclude: /node_modules/,
                use: ['file-loader']
            },
            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/',
                    }
                }]
            },
        ]
    }
};

Generates ReferenceError: t is not defined when running the production build with webpack 4.

Works just fine with 0.44.2

[anandthakker]

@grillorafael can you clarify how you're including the mapbox-gl module in your source? Better yet, if you could provide minimal, self-contained demonstration of this issue, that would help us diagnose and solve it more quickly.

[grillorafael]

I attached a sample project. When running in dev mode it works just fine and when running in prod mode it gives that error.

mapbox-sample.zip

[mike-marcacci]

I'm experiencing this too. On upgrading to 0.45.0 from 0.45.2 I get several errors in the console in Chrome (I suspect one for each worker):

this.parent.getWorkerSource(...)[a[2]] is not a function
    at Ma.receive (blob:http://localhost:3000/c3408085-1173-4234-bfef-47ecdda464e3:1)

Mapbox is imported with import mapboxgl from "mapbox-gl"; and pulls in the minified /dist/mapbox-gl.js. I've also tried importing mapbox-gl/dist/mapbox-gl-dev.js, which has the same effect. The problem line appears to be this line.

[mike-marcacci]

Ah, ok, so the problem is the const keys = data.type.split('.'); As of 0.45.0 it has become illegal to use a period character in your source/layer names. This is definitely a bug, as this is a pattern we use pretty extensively.

Mapbox should probably escape periods (and any other special characters) before serializing, and then unescape them when deserializing.

EDIT: looking at the git blame, it appears that this has been in place for a while... perhaps something else has caused it to become problematic just now?

EDIT2: Ok, so it looks like the bug was likely introduced in 373f5c4bef3fd118d6390ab01a3eb7d208793940

[grillorafael]

Hi @mike-marcacci I believe the problem you have is unrelated to mine

[mike-marcacci]

@grillorafael woops! You're right, sorry to derail the thread. I filed a new issue #6660

[grillorafael]

Hi @anandthakker I don't know if my build have something wrong in it so if you could give it a quick check.

[anandthakker]

Looks like this is a bug caused by minification -- if you turn that off, the issue does not occur.

In particular, it's most likely related to the way we're constructing the Blob URL for the web worker script using Function.prototype.toString(). The Uglify docs state that the compiler assumes:

The code doesn't expect the contents of Function.prototype.toString() or Error.prototype.stack to be anything in particular.

This assumption is not true of mapbox-gl-js.

[anandthakker]

Actual minimal demonstration: https://gist.github.com/anandthakker/6db8a871ccbbaba8afd7deeb483731ef

[grillorafael]

Thanks Anand! I’ll give it a try tomorrow and close the issue right after.

[grillorafael]

Hi @anandthakker seems to be working just fine. Thanks!

[shinstudio]

I think the issue should be addressed properly. I am facing the same issue and the bundle file size w/wo minification is immense.
@anandthakker any plan to address the issue so that mapbox-gl can be safely minified for production deplopyment?

[jfirebaugh]

@shinstudio The package on npm is minified -- package.json main field points to dist/mapbox-gl.js, which is minified.

[shinstudio]

@jfirebaugh Duh, I was using 0.45.0-beta.1... after switching to 0.45.0 I was able to minify it without the issue. sorry for the noise!