Can't guess what module is causing a syntax error

baptisteArno commented 2 years ago

[x] I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
[x] I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ

Describe the bug I get a Syntax Error on IE11, so I'm following the procedure from the FAQ:

add config.optimization.minimize = false; to you next.config.js's Webpack configuration
run a production build
run it on the browser throwing the error
open the console, jump to the line where it failed
goes a little bit up in the lines of code, and check the Webpack comments telling you which module is affected

But I can't find what module is affected. Here is what I see:

/***/ }),

/***/ 5130:
/***/ (function(module, exports, __webpack_require__) {

/* provided dependency */ var process = __webpack_require__(4406);
/* eslint-env browser */

/**
 * This is the web browser implementation of `debug()`.
 */

exports.formatArgs = formatArgs;
exports.save = save;
exports.load = load;
exports.useColors = useColors;
exports.storage = localstorage();
// 👇 The below arrow function is causing the issue
exports.destroy = (() => {
    let warned = false;

    return () => {
        if (!warned) {
            warned = true;
            console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
        }
    };
})();

I know it's a bit out of scope. But I thought maybe at a glance, you know what is this?

Next.js version: 11.0.
Node.js version: 14
Operating System: Windows
Webpack 4 or 5: 5

martpie commented 2 years ago

Can you post more of the bundle? More "up" :) (paste 200 lines, its fine (might even not be enough)

baptisteArno commented 2 years ago

Thank you 🙏 There you go:

(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([[966],{

/***/ 9609:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.withSuperJSONPage = exports.withSuperJSONProps = void 0;
var superjson_1 = __webpack_require__(384);
var hoistNonReactStatics = __webpack_require__(3463);
var React = __webpack_require__(2784);
function withSuperJSONProps(gssp, exclude) {
    if (exclude === void 0) { exclude = []; }
    return function withSuperJSON() {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        return __awaiter(this, void 0, void 0, function () {
            var result, excludedPropValues, _a, json, meta, props;
            return __generator(this, function (_b) {
                switch (_b.label) {
                    case 0: return [4 /*yield*/, gssp.apply(void 0, args)];
                    case 1:
                        result = _b.sent();
                        if (!('props' in result)) {
                            return [2 /*return*/, result];
                        }
                        if (!result.props) {
                            return [2 /*return*/, result];
                        }
                        excludedPropValues = exclude.map(function (propKey) {
                            var value = result.props[propKey];
                            delete result.props[propKey];
                            return value;
                        });
                        _a = superjson_1.default.serialize(result.props), json = _a.json, meta = _a.meta;
                        props = json;
                        if (meta) {
                            props._superjson = meta;
                        }
                        exclude.forEach(function (key, index) {
                            var excludedPropValue = excludedPropValues[index];
                            if (typeof excludedPropValue !== 'undefined') {
                                props[key] = excludedPropValue;
                            }
                        });
                        return [2 /*return*/, __assign(__assign({}, result), { props: props })];
                }
            });
        });
    };
}
exports.withSuperJSONProps = withSuperJSONProps;
function withSuperJSONPage(Page) {
    function WithSuperJSON(serializedProps) {
        var _superjson = serializedProps._superjson, props = __rest(serializedProps, ["_superjson"]);
        return (React.createElement(Page, __assign({}, superjson_1.default.deserialize({ json: props, meta: _superjson }))));
    }
    hoistNonReactStatics(WithSuperJSON, Page);
    return WithSuperJSON;
}
exports.withSuperJSONPage = withSuperJSONPage;
//# sourceMappingURL=tools.js.map

/***/ }),

/***/ 9966:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {

module.exports = __webpack_require__(9609)

/***/ }),

/***/ 5881:
/***/ (function(module) {

/**
 * Helpers.
 */

var s = 1000;
var m = s * 60;
var h = m * 60;
var d = h * 24;
var w = d * 7;
var y = d * 365.25;

/**
 * Parse or format the given `val`.
 *
 * Options:
 *
 *  - `long` verbose formatting [false]
 *
 * @param {String|Number} val
 * @param {Object} [options]
 * @throws {Error} throw an error if val is not a non-empty string or a number
 * @return {String|Number}
 * @api public
 */

module.exports = function(val, options) {
  options = options || {};
  var type = typeof val;
  if (type === 'string' && val.length > 0) {
    return parse(val);
  } else if (type === 'number' && isFinite(val)) {
    return options.long ? fmtLong(val) : fmtShort(val);
  }
  throw new Error(
    'val is not a non-empty string or a valid number. val=' +
      JSON.stringify(val)
  );
};

/**
 * Parse the given `str` and return milliseconds.
 *
 * @param {String} str
 * @return {Number}
 * @api private
 */

function parse(str) {
  str = String(str);
  if (str.length > 100) {
    return;
  }
  var match = /^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i.exec(
    str
  );
  if (!match) {
    return;
  }
  var n = parseFloat(match[1]);
  var type = (match[2] || 'ms').toLowerCase();
  switch (type) {
    case 'years':
    case 'year':
    case 'yrs':
    case 'yr':
    case 'y':
      return n * y;
    case 'weeks':
    case 'week':
    case 'w':
      return n * w;
    case 'days':
    case 'day':
    case 'd':
      return n * d;
    case 'hours':
    case 'hour':
    case 'hrs':
    case 'hr':
    case 'h':
      return n * h;
    case 'minutes':
    case 'minute':
    case 'mins':
    case 'min':
    case 'm':
      return n * m;
    case 'seconds':
    case 'second':
    case 'secs':
    case 'sec':
    case 's':
      return n * s;
    case 'milliseconds':
    case 'millisecond':
    case 'msecs':
    case 'msec':
    case 'ms':
      return n;
    default:
      return undefined;
  }
}

/**
 * Short format for `ms`.
 *
 * @param {Number} ms
 * @return {String}
 * @api private
 */

function fmtShort(ms) {
  var msAbs = Math.abs(ms);
  if (msAbs >= d) {
    return Math.round(ms / d) + 'd';
  }
  if (msAbs >= h) {
    return Math.round(ms / h) + 'h';
  }
  if (msAbs >= m) {
    return Math.round(ms / m) + 'm';
  }
  if (msAbs >= s) {
    return Math.round(ms / s) + 's';
  }
  return ms + 'ms';
}

/**
 * Long format for `ms`.
 *
 * @param {Number} ms
 * @return {String}
 * @api private
 */

function fmtLong(ms) {
  var msAbs = Math.abs(ms);
  if (msAbs >= d) {
    return plural(ms, msAbs, d, 'day');
  }
  if (msAbs >= h) {
    return plural(ms, msAbs, h, 'hour');
  }
  if (msAbs >= m) {
    return plural(ms, msAbs, m, 'minute');
  }
  if (msAbs >= s) {
    return plural(ms, msAbs, s, 'second');
  }
  return ms + ' ms';
}

/**
 * Pluralization helper.
 */

function plural(ms, msAbs, n, name) {
  var isPlural = msAbs >= n * 1.5;
  return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');
}

/***/ }),

/***/ 5130:
/***/ (function(module, exports, __webpack_require__) {

/* provided dependency */ var process = __webpack_require__(4406);
/* eslint-env browser */

/**
 * This is the web browser implementation of `debug()`.
 */

exports.formatArgs = formatArgs;
exports.save = save;
exports.load = load;
exports.useColors = useColors;
exports.storage = localstorage();
// 👇 The below arrow function is causing the issue
exports.destroy = (() => {
    let warned = false;

    return () => {
        if (!warned) {
            warned = true;
            console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
        }
    };
})();

martpie commented 2 years ago

I'm a bit blind there, maybe try to go more up (libs can be pretty long), and look for some /* harmony import */ hint maybe 🤔

baptisteArno commented 2 years ago

I've given the full beginning of the file here.

I only found /* harmony default export */ at the end of the file.

So no clue? 😢

baptisteArno commented 2 years ago

Good news, it comes from superjson-next in my babel config:

{
  "presets": ["next/babel"],
  "plugins": ["superjson-next"]
}

But it seems I can't transpile it

baptisteArno commented 2 years ago

Ok so I got rid of the babel config and manually imported superjson in my project but it still has this syntax error even when transpiling the module

martpie / next-transpile-modules

Can't guess what module is causing a syntax error #227