Need help with terser error after running gulp build

[BustosAndrew]

Since apparently a couple Box UI elements need code splitting enabled in webpack, I did my best to set that up in webpack. However, I still run into this issue after trying to include a ContentExplorer object in JSX. Here is the resulting webpack error log after running gulp build:

[23:50:34] [Webpack errors]:
[23:50:34] 67.js from Terser
Unexpected token: punc (:) [webpack://./node_modules/setimmediate/setImmediate.js:80,12][67.js:30817,18]
    at js_error (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:550:11)
    at croak (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1274:9)
    at token_error (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1282:9)
    at unexpected (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1288:9)
    at semicolon (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1326:56)
    at simple_statement (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1583:73)
    at statement (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1369:47)
    at _embed_tokens_wrapper (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1339:26)
    at block_ (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:2172:20)
    at statement (/Users/bustosman/Documents/GitHub/Box/Integration/node_modules/terser/dist/bundle.min.js:1403:29)

I doubt this is a problem with the generator, just with how the webpack config is setup. The following is the webpack config file after trying to add code splitting in the second entry point:

const webpack = require("webpack");
const Dotenv = require("dotenv-webpack");
const nodeExternals = require("webpack-node-externals");
const ESLintPlugin = require("eslint-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { IgnorePlugin } = require("webpack");
const TerserPlugin = require("terser-webpack-plugin");

const path = require("path");
const fs = require("fs");
const argv = require("yargs").argv;
const { json } = require("express");

const debug = argv.debug !== undefined;
const lint = !(argv["no-linting"] || argv.l === true);

const config = [
    {
        entry: {
            server: [path.join(__dirname, "/src/server/server.ts")]
        },
        mode: debug ? "development" : "production",
        output: {
            path: path.join(__dirname, "/dist"),
            filename: "[name].js",
            devtoolModuleFilenameTemplate: debug
                ? "[absolute-resource-path]"
                : "[]"
        },
        externals: [nodeExternals()],
        devtool: debug ? "source-map" : "source-map",
        resolve: {
            extensions: [".ts", ".tsx", ".js"],
            alias: {}
        },
        target: "node",
        node: {
            __dirname: false,
            __filename: false
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    exclude: /node_modules/,
                    use: ["ts-loader"]
                }
            ]
        },
        plugins: []
    },
    {
        entry: {
            client: [path.join(__dirname, "/src/client/client.ts")],
            sidebar:
                "./node_modules/box-ui-elements/es/elements/content-sidebar/Sidebar",
            preview:
                "./node_modules/box-ui-elements/es/elements/content-preview/ContentPreview"
        },
        mode: debug ? "development" : "production",
        output: {
            path: path.join(__dirname, "/dist/web/scripts"),
            filename: "[name].js",
            libraryTarget: "umd",
            library: "integration",
            publicPath: "/scripts/"
        },
        externals: {},
        devtool: debug ? "source-map" : "source-map",
        resolve: {
            extensions: [".ts", ".tsx", ".js"],
            alias: {}
        },
        target: "web",
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    exclude: /node_modules/,
                    use: ["ts-loader"]
                },
                {
                    test: /\.css$/i,
                    use: ["style-loader", "css-loader"]
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        // Creates `style` nodes from JS strings
                        "style-loader",
                        // Translates CSS into CommonJS
                        "css-loader",
                        // Compiles Sass to CSS
                        "sass-loader"
                    ]
                },
                {
                    test: /\.js$/,
                    loader: "babel-loader",
                    exclude: /(node_modules)/
                }
            ]
        },
        plugins: [
            new Dotenv({
                systemvars: true
            })
        ]
    },
    {
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    terserOptions: {
                        ecma: 5,
                        parse: {},
                        compress: {},
                        mangle: true, // Note `mangle.properties` is `false` by default.
                        module: false,
                        // Deprecated
                        output: null,
                        format: null,
                        toplevel: false,
                        nameCache: null,
                        ie8: false,
                        keep_classnames: undefined,
                        keep_fnames: true,
                        safari10: false
                    }
                })
            ]
        }
    }
];

if (lint !== false) {
    config[0].plugins.push(
        new ESLintPlugin({ extensions: ["ts", "tsx"], failOnError: false })
    );
    config[1].plugins.push(
        new ESLintPlugin({ extensions: ["ts", "tsx"], failOnError: false })
    );
}

module.exports = config;

Any help appreciated.

[wictorwilen]

Hi Andrew, I have no experience with Box UI elements and I'd recommend that ask in their appropriate forum. What happens if you remove the Terser plugin from your webpack?

[BustosAndrew]

Same issue. I currently await the other developer's response in their repo.