background

On a certain day, after Jenkins built in the project, an error was displayed in the build output. The output is as follows

ERROR in static/js/hotTemplateManage.1bbbc115c41b7f7ccd26.js from UglifyJs Unexpected token: The name (hook) [static/js/hotTemplateManage. 1 bbbc115c41b7f7ccd26. Js: 17404] the ERROR in static/js/templateManage.e90b3eb370ff27ea8d3c.js from UglifyJs Unexpected token: The name (hook) [static/js/templateManage. E90b3eb370ff27ea8d3c. Js: 17404, 8]Copy the code

Analysis of the

From the output, UglifyJs reported an error, or a syntax error

Look for the package after the code to see dist/static/js/hotTemplateManage. 1 bbbc115c41b7f7ccd26. Js line 17404

    let hook; // This is the error line
    if (moduleIdentifier) {
        // server build
        hook = function (context) {
            / / 2.3 injection
            context =
                context || // cached call
                    (this.$vnode && this.$vnode.ssrContext) || // stateful
                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
            // 2.2 with runInNewContext: true
            if(! context &&typeof__VUE_SSR_CONTEXT__ ! = ='undefined') {
                context = __VUE_SSR_CONTEXT__;
            }
            // inject component styles
            if (style) {
                style.call(this, createInjectorSSR(context));
            }
            // register component module identifier for async chunk inference
            if(context && context._registeredComponents) { context._registeredComponents.add(moduleIdentifier); }};// used by ssr in case component is cached and beforeCreate
        // never gets called
        options._ssrRegister = hook;
    }
    else if (style) {
        hook = shadowMode
            ? function (context) {
                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
            }
            : function (context) {
                style.call(this, createInjector(context));
            };
    }
    if (hook) {
        if (options.functional) {
            // register for functional component in vue file
            const originalRender = options.render;
            options.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context);
            };
        }
        else {
            // inject component registration as beforeCreate hook
            constexisting = options.beforeCreate; options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; }}return script;
}

/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function() {
  var _obj, _obj$1;
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "div",
    {
      directives: [{name: "observe-visibility".rawName: "v-observe-visibility".value: _vm.handleVisibilityChange,
          expression: "handleVisibilityChange"}].staticClass: "vue-recycle-scroller".class:
        ((_obj = {
          ready: _vm.ready,
          "page-mode": _vm.pageMode
        }),
        (_obj["direction-" + _vm.direction] = true),
        _obj),
      on: {
        "&scroll": function($event) {
          return _vm.handleScroll($event)
        }
      }
    },
    [
      _vm.$slots.before
        ? _c(
            "div",
            { staticClass: "vue-recycle-scroller__slot" },
            [_vm._t("before")].2
          )
        : _vm._e(),
      _vm._v(""),
      _c(
        "div",
        {
          ref: "wrapper".staticClass: "vue-recycle-scroller__item-wrapper".style:
            ((_obj$1 = {}),
            (_obj$1[_vm.direction === "vertical" ? "minHeight" : "minWidth"] =
              _vm.totalSize + "px"),
            _obj$1)
        },
        _vm._l(_vm.pool, function(view) {
Copy the code

The code shows that:

  • 1 is not code written by the developer, more like code packaged in a package

  • 2. Babel-loader is configured in the project. Why is let not converted to var

  • 3. Compared with other packaged JS, it is found that hottemplatemage. js and templatemage. js are not compressed after UglifyJs error, and let in other JS without error is converted to var. It seems that Babel syntax conversion is ok

  • Vue-recycle -scroller__item-wrapper class is called in the js context. Vue-virtual-scroller package is added to the node

  • Node_modules /vue-virtual-scroller/dist/ vue-virtual-scroll.umd. js: node_modules/vue-virtual-scroller/dist/vue-virtual-scroller. The code let syntax in this package does not convert to var

Comprehensive above

A => Babel syntax conversion is ok, Babel configuration is ok

B => There is a packing problem

C => node_modules/vue-virtual-scroller

To solve the problem

Since node_modules/vue-virtual-scroller’s let syntax is not converted to var, it would be good to include this package directly in the babel-loader package scope

  • 1 first findbabel-loaderconfiguration
{
    test: /\.js$/,
    use: isProduction ? {
        loader: 'babel-loader'.options: {
            cacheDirectory: true[{}} :loader: 'cache-loader'.options: {
            cacheDirectory: resolve('.cache-loader')}}, {loader: 'babel-loader'.options: {
            cacheDirectory: true}}].include: [
        resolve('/node_modules/vue-virtual-scroller'),
        resolve('/node_modules/css-vars-ponyfill'),
        isProduction ? resolve('/node_modules/highlight.js') : [],
        resolve('src')].exclude: /(node_modules\/(? ! vue-virtual-scroller))|(node_modules\/(? ! css-vars-ponyfill))|(node_modules\/(? ! highlight.js))/
}
Copy the code

Include already contains vue-virtual-scroller, but exclude also contains /node_modules/vue-virtual-scroller. In this case, the priority of exclude is higher than that of include. So /node_modules/vue-virtual-scroller is not processed by babel-loader.

The solution

Just kill the exclude configuration

{
    test: /\.js$/,
    use: isProduction ? {
        loader: 'babel-loader'.options: {
            cacheDirectory: true[{}} :loader: 'cache-loader'.options: {
            cacheDirectory: resolve('.cache-loader')}}, {loader: 'babel-loader'.options: {
            cacheDirectory: true}}].include: [
        resolve('/node_modules/vue-virtual-scroller'),
        resolve('/node_modules/css-vars-ponyfill'),
        isProduction ? resolve('/node_modules/highlight.js') : [],
        resolve('src')].//exclude: /(node_modules\/(? ! vue-virtual-scroller))|(node_modules\/(? ! css-vars-ponyfill))|(node_modules\/(? ! highlight.js))/
}
Copy the code

The NPM run build error was resolved successfully

[Note] If quoted, please indicate the source ha, I all copyright ha