search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.47k stars 2.27k forks source link

Produces invalid code for Vue SFC with inline import in data property when --experimental-scope-hoisting is used together with minification #2747

Closed n0v1 closed 1 year ago

n0v1 commented 5 years ago

🐛 bug report

When using parcel (latest version 1.12.0) to bundle a Vue.js app that has an inline import (using parcel-plugin-inlinesvg) as a data property with option --experimental-scope-hoisting, the generated bundle is non-functional.

It works when disabling minification through the --no-minify option.

🤔 Expected Behavior

The generated bundle should work no matter whether scope hoisting/minification is used or not.

😯 Current Behavior

Console error:

js.07725bad.js:formatted:709 ReferenceError: $rLiX$$interop$default is not defined
    at i.data (js.07725bad.js:formatted:3565)
    at Ad (js.07725bad.js:formatted:1903)
    at zd (js.07725bad.js:formatted:1891)
    at xd (js.07725bad.js:formatted:1869)
    at i.Ld.e._init (js.07725bad.js:formatted:2012)
    at new i (js.07725bad.js:formatted:2084)
    at je (js.07725bad.js:formatted:1264)
    at init (js.07725bad.js:formatted:1202)
    at js.07725bad.js:formatted:2455
    at o (js.07725bad.js:formatted:2473)

Non-functional code in generated bundle (with --experimental-scope-hoisting and active minification):

var tf = {};
tf = "<svg width=\"24\" height=\"24\"><path d=\"M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z\"/></svg>";
var Qg = zg(tf);
var ea = {
    name: "SvgIcon",
    data: ()=>({
        svg: $rLiX$$interop$default.d
    })
};

💻 Code Sample

reproduction repository. See branch vue-data-minification-scope-hoisting-bug and readme.

This is the source code of the failing Vue component:

import iconBugReport from 'material-design-icons/action/svg/production/ic_bug_report_24px.svg';

export default {
  name: 'SvgIcon',

  data () {
    return {
      svg: iconBugReport,
    };
  },
};

The non-minified code (--experimental-scope-hoisting --no-minify) looks like this:

// ASSET: ../node_modules/material-design-icons/action/svg/production/ic_bug_report_24px.svg
var $rLiX$exports = {};
$rLiX$exports = '<svg width="24" height="24"><path d="M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/></svg>';
var $SCM$export$default = {
  name: 'SvgIcon',

  data() {
    var $rLiX$$interop$default = $parcel$interopDefault($rLiX$exports);
    return {
      svg: $rLiX$$interop$default.d
    };
  }

};

🌍 Your Environment

Software Version(s)
Parcel 1.12.0
Node 10.15.1
npm/Yarn 6.4.1
Operating System Windows 10 Pro
mischnic commented 5 years ago

Reproduction (with parcel-plugin-inlinesvg) and browserslist: Chrome > 69:

import iconBugReport from 'material-design-icons/action/svg/production/ic_bug_report_24px.svg';

console.log({
  name: 'SvgIcon',

  data () {
    return {
      svg: iconBugReport,
    };
  },
}.data());

This code

(function () {
function $parcel$interopDefault(a) {
  return a && a.__esModule ? {
    d: a.default
  } : {
    d: a
  };
}

// ASSET: ../../node_modules/material-design-icons/action/svg/production/ic_bug_report_24px.svg
var $IAH$exports = {};
$IAH$exports = '<svg width="24" height="24"><path d="M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/></svg>';
console.log({
  name: 'SvgIcon',

  data() {
    var $IAH$$interop$default = $parcel$interopDefault($IAH$exports);
    return {
      svg: $IAH$$interop$default.d
    };
  }

}.data());
})();

gets mangled into (second occurrence of $IAH$$interop$default wasn't renamed):

(function() {
    function a(a) {
        return a && a.__esModule ? { d: a.default } : { d: a };
    }
    var b = {};
    b =
        '<svg width="24" height="24"><path d="M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/></svg>';
    var c = a(b);
    console.log((() => ({ svg: $IAH$$interop$default.d }))());
})();

Once again, using babel's scope.rename instead of Parcel's rename function works: https://github.com/parcel-bundler/parcel/blob/95dfb33c9f2d4a3ebc14077f4a8cbbcdef5911b1/packages/core/parcel-bundler/src/scope-hoisting/mangler.js#L37

Running this in astexplorer (might not be 100% equivalent to Parcel's AST state) doesn't rename $IAH$$interop$default at all: https://astexplorer.net/#/gist/597c453c092fa1fd7b9e96e7d63b2dac/13ecc7da0ef6d7395c0137415bd3ec5fba87e902

Not sure why it seemed fixed here: https://github.com/parcel-bundler/parcel/issues/1996#issuecomment-468942141

n0v1 commented 5 years ago

Maybe it was fixed in master by that time but another commit now reintroduced the bug? I'll try different commits from the last days.

n0v1 commented 5 years ago

This is really weird: When I run my tests against a local parcel-bundler package from cloned parcel mono repo via yarn link, this error does not occur. But when using parcel-bundler version 1.12.0 (that should also contain the fix) from the npm/yarn registry, the error is reproducible. Did something go wrong while publishing v1.12.0?

n0v1 commented 5 years ago

I just compared the parcel-bundler package from master (95dfb33c9f2d4a3ebc14077f4a8cbbcdef5911b1) to the published one (v.1.12.0, same commit id in package.json) and noticed that the file node_modules/.bin/terser differs (red is master, green is published):

--- C:/_devel/git/parcel/packages/core/parcel-bundler/node_modules/.bin/terser  Fri Mar  8 14:11:21 2019
+++ C:/_devel/git/parcel-scope-hoisting-bug/node_modules/parcel-bundler/node_modules/.bin/terser    Fri Mar  8 14:13:54 2019
@@ -1,4 +1,4 @@
-#! /usr/bin/env node
+#!/usr/bin/env node
 // -*- js -*-

 "use strict";
@@ -10,17 +10,13 @@
 var path = require("path");
 var program = require("commander");

-var bundle_path = __dirname + "/../dist/bundle.js";
-if (fs.existsSync(bundle_path)) {
-    var UglifyJS = require(bundle_path)
-    if (process.env.TERSER_DEBUG) {
-        try {
-            require("source-map-support").install();
-        } catch (err) {}
-    }
-} else {
-    var UglifyJS = require("../tools/node.js");
-}
+var bundle_path = __dirname + (process.env.TERSER_NO_BUNDLE ?
+    "/../dist/bundle.js" :
+    "/../dist/bundle.min.js");
+var UglifyJS = require(bundle_path);
+try {
+    require("source-map-support").install();
+} catch (err) {}

 var skip_keys = [ "cname", "inlined", "parent_scope", "scope", "uses_eval", "uses_with" ];
 var files = {};
@@ -122,9 +118,6 @@
     } else {
         if (typeof program.mangleProps != "object") program.mangleProps = {};
         if (!Array.isArray(program.mangleProps.reserved)) program.mangleProps.reserved = [];
-        require("../tools/domprops.json").forEach(function(name) {
-            UglifyJS.push_uniq(program.mangleProps.reserved, name);
-        });
     }
     if (typeof options.mangle != "object") options.mangle = {};
     options.mangle.properties = program.mangleProps;
@@ -317,7 +310,7 @@
     if (Array.isArray(glob)) {
         return [].concat.apply([], glob.map(simple_glob));
     }
-    if (glob && glob.match(/\*|\?/)) {
+    if (glob && glob.match(/[*?]/)) {
         var dir = path.dirname(glob);
         try {
             var entries = fs.readdirSync(dir);
master node_modules/.bin/terser ```js #! /usr/bin/env node // -*- js -*- "use strict"; require("../tools/exit.js"); var fs = require("fs"); var info = require("../package.json"); var path = require("path"); var program = require("commander"); var bundle_path = __dirname + "/../dist/bundle.js"; if (fs.existsSync(bundle_path)) { var UglifyJS = require(bundle_path) if (process.env.TERSER_DEBUG) { try { require("source-map-support").install(); } catch (err) {} } } else { var UglifyJS = require("../tools/node.js"); } var skip_keys = [ "cname", "inlined", "parent_scope", "scope", "uses_eval", "uses_with" ]; var files = {}; var options = { compress: false, mangle: false }; program.version(info.name + " " + info.version); program.parseArgv = program.parse; program.parse = undefined; if (process.argv.indexOf("ast") >= 0) program.helpInformation = describe_ast; else if (process.argv.indexOf("options") >= 0) program.helpInformation = function() { var text = []; var options = UglifyJS.default_options(); for (var option in options) { text.push("--" + (option == "output" ? "beautify" : option == "sourceMap" ? "source-map" : option) + " options:"); text.push(format_object(options[option])); text.push(""); } return text.join("\n"); }; program.option("-p, --parse ", "Specify parser options.", parse_js()); program.option("-c, --compress [options]", "Enable compressor/specify compressor options.", parse_js()); program.option("-m, --mangle [options]", "Mangle names/specify mangler options.", parse_js()); program.option("--mangle-props [options]", "Mangle properties/specify mangler options.", parse_js()); program.option("-b, --beautify [options]", "Beautify output/specify output options.", parse_js()); program.option("-o, --output ", "Output file (default STDOUT)."); program.option("--comments [filter]", "Preserve copyright comments in the output."); program.option("--config-file ", "Read minify() options from JSON file."); program.option("-d, --define [=value]", "Global definitions.", parse_js("define")); program.option("--ecma ", "Specify ECMAScript release: 5, 6, 7 or 8."); program.option("-e, --enclose [arg[,...][:value[,...]]]", "Embed output in a big function with configurable arguments and values."); program.option("--ie8", "Support non-standard Internet Explorer 8."); program.option("--keep-classnames", "Do not mangle/drop class names."); program.option("--keep-fnames", "Do not mangle/drop function names. Useful for code relying on Function.prototype.name."); program.option("--module", "Input is an ES6 module"); program.option("--name-cache ", "File to hold mangled name mappings."); program.option("--rename", "Force symbol expansion."); program.option("--no-rename", "Disable symbol expansion."); program.option("--safari10", "Support non-standard Safari 10."); program.option("--source-map [options]", "Enable source map/specify source map options.", parse_source_map()); program.option("--timings", "Display operations run time on STDERR."); program.option("--toplevel", "Compress and/or mangle variables in toplevel scope."); program.option("--verbose", "Print diagnostic messages."); program.option("--warn", "Print warning messages."); program.option("--wrap ", "Embed everything as a function with “exports” corresponding to “name” globally."); program.arguments("[files...]").parseArgv(process.argv); if (program.configFile) { options = JSON.parse(read_file(program.configFile)); } if (!program.output && program.sourceMap && program.sourceMap.url != "inline") { fatal("ERROR: cannot write source map to STDOUT"); } [ "compress", "enclose", "ie8", "mangle", "module", "safari10", "sourceMap", "toplevel", "wrap" ].forEach(function(name) { if (name in program) { options[name] = program[name]; } }); if ("ecma" in program) { if (program.ecma != (program.ecma | 0)) fatal("ERROR: ecma must be an integer"); options.ecma = program.ecma | 0; } if (program.beautify) { options.output = typeof program.beautify == "object" ? program.beautify : {}; if (!("beautify" in options.output)) { options.output.beautify = true; } } if (program.comments) { if (typeof options.output != "object") options.output = {}; options.output.comments = typeof program.comments == "string" ? program.comments : "some"; } if (program.define) { if (typeof options.compress != "object") options.compress = {}; if (typeof options.compress.global_defs != "object") options.compress.global_defs = {}; for (var expr in program.define) { options.compress.global_defs[expr] = program.define[expr]; } } if (program.keepClassnames) { options.keep_classnames = true; } if (program.keepFnames) { options.keep_fnames = true; } if (program.mangleProps) { if (program.mangleProps.domprops) { delete program.mangleProps.domprops; } else { if (typeof program.mangleProps != "object") program.mangleProps = {}; if (!Array.isArray(program.mangleProps.reserved)) program.mangleProps.reserved = []; require("../tools/domprops.json").forEach(function(name) { UglifyJS.push_uniq(program.mangleProps.reserved, name); }); } if (typeof options.mangle != "object") options.mangle = {}; options.mangle.properties = program.mangleProps; } if (program.nameCache) { options.nameCache = JSON.parse(read_file(program.nameCache, "{}")); } if (program.output == "ast") { options.output = { ast: true, code: false }; } if (program.parse) { if (!program.parse.acorn && !program.parse.spidermonkey) { options.parse = program.parse; } else if (program.sourceMap && program.sourceMap.content == "inline") { fatal("ERROR: inline source map only works with built-in parser"); } } if (~program.rawArgs.indexOf("--rename")) { options.rename = true; } else if (!program.rename) { options.rename = false; } var convert_path = function(name) { return name; }; if (typeof program.sourceMap == "object" && "base" in program.sourceMap) { convert_path = function() { var base = program.sourceMap.base; delete options.sourceMap.base; return function(name) { return path.relative(base, name); }; }(); } if (program.verbose) { options.warnings = "verbose"; } else if (program.warn) { options.warnings = true; } if (program.args.length) { simple_glob(program.args).forEach(function(name) { files[convert_path(name)] = read_file(name); }); run(); } else { var chunks = []; process.stdin.setEncoding("utf8"); process.stdin.on("data", function(chunk) { chunks.push(chunk); }).on("end", function() { files = [ chunks.join("") ]; run(); }); process.stdin.resume(); } function convert_ast(fn) { return UglifyJS.AST_Node.from_mozilla_ast(Object.keys(files).reduce(fn, null)); } function run() { UglifyJS.AST_Node.warn_function = function(msg) { print_error("WARN: " + msg); }; if (program.timings) options.timings = true; try { if (program.parse) { if (program.parse.acorn) { files = convert_ast(function(toplevel, name) { return require("acorn").parse(files[name], { ecmaVersion: 2018, locations: true, program: toplevel, sourceFile: name, sourceType: options.module || program.parse.module ? "module" : "script" }); }); } else if (program.parse.spidermonkey) { files = convert_ast(function(toplevel, name) { var obj = JSON.parse(files[name]); if (!toplevel) return obj; toplevel.body = toplevel.body.concat(obj.body); return toplevel; }); } } } catch (ex) { fatal(ex); } var result = UglifyJS.minify(files, options); if (result.error) { var ex = result.error; if (ex.name == "SyntaxError") { print_error("Parse error at " + ex.filename + ":" + ex.line + "," + ex.col); var col = ex.col; var lines = files[ex.filename].split(/\r?\n/); var line = lines[ex.line - 1]; if (!line && !col) { line = lines[ex.line - 2]; col = line.length; } if (line) { var limit = 70; if (col > limit) { line = line.slice(col - limit); col = limit; } print_error(line.slice(0, 80)); print_error(line.slice(0, col).replace(/\S/g, " ") + "^"); } } if (ex.defs) { print_error("Supported options:"); print_error(format_object(ex.defs)); } fatal(ex); } else if (program.output == "ast") { if (!options.compress && !options.mangle) { result.ast.figure_out_scope({}); } print(JSON.stringify(result.ast, function(key, value) { if (value) switch (key) { case "thedef": return symdef(value); case "enclosed": return value.length ? value.map(symdef) : undefined; case "variables": case "functions": case "globals": return value.size() ? value.map(symdef) : undefined; } if (skip_key(key)) return; if (value instanceof UglifyJS.AST_Token) return; if (value instanceof UglifyJS.Dictionary) return; if (value instanceof UglifyJS.AST_Node) { var result = { _class: "AST_" + value.TYPE }; if (value.block_scope) { result.variables = value.block_scope.variables; result.functions = value.block_scope.functions; result.enclosed = value.block_scope.enclosed; } value.CTOR.PROPS.forEach(function(prop) { result[prop] = value[prop]; }); return result; } return value; }, 2)); } else if (program.output == "spidermonkey") { print(JSON.stringify(UglifyJS.minify(result.code, { compress: false, mangle: false, output: { ast: true, code: false } }).ast.to_mozilla_ast(), null, 2)); } else if (program.output) { fs.writeFileSync(program.output, result.code); if (result.map) { fs.writeFileSync(program.output + ".map", result.map); } } else { print(result.code); } if (program.nameCache) { fs.writeFileSync(program.nameCache, JSON.stringify(options.nameCache)); } if (result.timings) for (var phase in result.timings) { print_error("- " + phase + ": " + result.timings[phase].toFixed(3) + "s"); } } function fatal(message) { if (message instanceof Error) message = message.stack.replace(/^\S*?Error:/, "ERROR:") print_error(message); process.exit(1); } // A file glob function that only supports "*" and "?" wildcards in the basename. // Example: "foo/bar/*baz??.*.js" // Argument `glob` may be a string or an array of strings. // Returns an array of strings. Garbage in, garbage out. function simple_glob(glob) { if (Array.isArray(glob)) { return [].concat.apply([], glob.map(simple_glob)); } if (glob && glob.match(/\*|\?/)) { var dir = path.dirname(glob); try { var entries = fs.readdirSync(dir); } catch (ex) {} if (entries) { var pattern = "^" + path.basename(glob) .replace(/[.+^$[\]\\(){}]/g, "\\$&") .replace(/\*/g, "[^/\\\\]*") .replace(/\?/g, "[^/\\\\]") + "$"; var mod = process.platform === "win32" ? "i" : ""; var rx = new RegExp(pattern, mod); var results = entries.filter(function(name) { return rx.test(name); }).map(function(name) { return path.join(dir, name); }); if (results.length) return results; } } return [ glob ]; } function read_file(path, default_value) { try { return fs.readFileSync(path, "utf8"); } catch (ex) { if ((ex.code == "ENOENT" || ex.code == "ENAMETOOLONG") && default_value != null) return default_value; fatal(ex); } } function parse_js(flag) { return function(value, options) { options = options || {}; try { UglifyJS.minify(value, { parse: { expression: true }, compress: false, mangle: false, output: { ast: true, code: false } }).ast.walk(new UglifyJS.TreeWalker(function(node) { if (node instanceof UglifyJS.AST_Assign) { var name = node.left.print_to_string(); var value = node.right; if (flag) { options[name] = value; } else if (value instanceof UglifyJS.AST_Array) { options[name] = value.elements.map(to_string); } else { options[name] = to_string(value); } return true; } if (node instanceof UglifyJS.AST_Symbol || node instanceof UglifyJS.AST_PropAccess) { var name = node.print_to_string(); options[name] = true; return true; } if (!(node instanceof UglifyJS.AST_Sequence)) throw node; function to_string(value) { return value instanceof UglifyJS.AST_Constant ? value.getValue() : value.print_to_string({ quote_keys: true }); } })); } catch(ex) { if (flag) { fatal("Error parsing arguments for '" + flag + "': " + value); } else { options[value] = null; } } return options; } } function parse_source_map() { var parse = parse_js(); return function(value, options) { var hasContent = options && "content" in options; var settings = parse(value, options); if (!hasContent && settings.content && settings.content != "inline") { print_error("INFO: Using input source map: " + settings.content); settings.content = read_file(settings.content, settings.content); } return settings; } } function skip_key(key) { return skip_keys.indexOf(key) >= 0; } function symdef(def) { var ret = (1e6 + def.id) + " " + def.name; if (def.mangled_name) ret += " " + def.mangled_name; return ret; } function format_object(obj) { var lines = []; var padding = ""; Object.keys(obj).map(function(name) { if (padding.length < name.length) padding = Array(name.length + 1).join(" "); return [ name, JSON.stringify(obj[name]) ]; }).forEach(function(tokens) { lines.push(" " + tokens[0] + padding.slice(tokens[0].length - 2) + tokens[1]); }); return lines.join("\n"); } function print_error(msg) { process.stderr.write(msg); process.stderr.write("\n"); } function print(txt) { process.stdout.write(txt); process.stdout.write("\n"); } function describe_ast() { var out = UglifyJS.OutputStream({ beautify: true }); function doitem(ctor) { out.print("AST_" + ctor.TYPE); var props = ctor.SELF_PROPS.filter(function(prop){ return !/^\$/.test(prop); }); if (props.length > 0) { out.space(); out.with_parens(function(){ props.forEach(function(prop, i){ if (i) out.space(); out.print(prop); }); }); } if (ctor.documentation) { out.space(); out.print_string(ctor.documentation); } if (ctor.SUBCLASSES.length > 0) { out.space(); out.with_block(function(){ ctor.SUBCLASSES.forEach(function(ctor, i){ out.indent(); doitem(ctor); out.newline(); }); }); } }; doitem(UglifyJS.AST_Node); return out + "\n"; } ```
published node_modules/.bin/terser ```js #!/usr/bin/env node // -*- js -*- "use strict"; require("../tools/exit.js"); var fs = require("fs"); var info = require("../package.json"); var path = require("path"); var program = require("commander"); var bundle_path = __dirname + (process.env.TERSER_NO_BUNDLE ? "/../dist/bundle.js" : "/../dist/bundle.min.js"); var UglifyJS = require(bundle_path); try { require("source-map-support").install(); } catch (err) {} var skip_keys = [ "cname", "inlined", "parent_scope", "scope", "uses_eval", "uses_with" ]; var files = {}; var options = { compress: false, mangle: false }; program.version(info.name + " " + info.version); program.parseArgv = program.parse; program.parse = undefined; if (process.argv.indexOf("ast") >= 0) program.helpInformation = describe_ast; else if (process.argv.indexOf("options") >= 0) program.helpInformation = function() { var text = []; var options = UglifyJS.default_options(); for (var option in options) { text.push("--" + (option == "output" ? "beautify" : option == "sourceMap" ? "source-map" : option) + " options:"); text.push(format_object(options[option])); text.push(""); } return text.join("\n"); }; program.option("-p, --parse ", "Specify parser options.", parse_js()); program.option("-c, --compress [options]", "Enable compressor/specify compressor options.", parse_js()); program.option("-m, --mangle [options]", "Mangle names/specify mangler options.", parse_js()); program.option("--mangle-props [options]", "Mangle properties/specify mangler options.", parse_js()); program.option("-b, --beautify [options]", "Beautify output/specify output options.", parse_js()); program.option("-o, --output ", "Output file (default STDOUT)."); program.option("--comments [filter]", "Preserve copyright comments in the output."); program.option("--config-file ", "Read minify() options from JSON file."); program.option("-d, --define [=value]", "Global definitions.", parse_js("define")); program.option("--ecma ", "Specify ECMAScript release: 5, 6, 7 or 8."); program.option("-e, --enclose [arg[,...][:value[,...]]]", "Embed output in a big function with configurable arguments and values."); program.option("--ie8", "Support non-standard Internet Explorer 8."); program.option("--keep-classnames", "Do not mangle/drop class names."); program.option("--keep-fnames", "Do not mangle/drop function names. Useful for code relying on Function.prototype.name."); program.option("--module", "Input is an ES6 module"); program.option("--name-cache ", "File to hold mangled name mappings."); program.option("--rename", "Force symbol expansion."); program.option("--no-rename", "Disable symbol expansion."); program.option("--safari10", "Support non-standard Safari 10."); program.option("--source-map [options]", "Enable source map/specify source map options.", parse_source_map()); program.option("--timings", "Display operations run time on STDERR."); program.option("--toplevel", "Compress and/or mangle variables in toplevel scope."); program.option("--verbose", "Print diagnostic messages."); program.option("--warn", "Print warning messages."); program.option("--wrap ", "Embed everything as a function with “exports” corresponding to “name” globally."); program.arguments("[files...]").parseArgv(process.argv); if (program.configFile) { options = JSON.parse(read_file(program.configFile)); } if (!program.output && program.sourceMap && program.sourceMap.url != "inline") { fatal("ERROR: cannot write source map to STDOUT"); } [ "compress", "enclose", "ie8", "mangle", "module", "safari10", "sourceMap", "toplevel", "wrap" ].forEach(function(name) { if (name in program) { options[name] = program[name]; } }); if ("ecma" in program) { if (program.ecma != (program.ecma | 0)) fatal("ERROR: ecma must be an integer"); options.ecma = program.ecma | 0; } if (program.beautify) { options.output = typeof program.beautify == "object" ? program.beautify : {}; if (!("beautify" in options.output)) { options.output.beautify = true; } } if (program.comments) { if (typeof options.output != "object") options.output = {}; options.output.comments = typeof program.comments == "string" ? program.comments : "some"; } if (program.define) { if (typeof options.compress != "object") options.compress = {}; if (typeof options.compress.global_defs != "object") options.compress.global_defs = {}; for (var expr in program.define) { options.compress.global_defs[expr] = program.define[expr]; } } if (program.keepClassnames) { options.keep_classnames = true; } if (program.keepFnames) { options.keep_fnames = true; } if (program.mangleProps) { if (program.mangleProps.domprops) { delete program.mangleProps.domprops; } else { if (typeof program.mangleProps != "object") program.mangleProps = {}; if (!Array.isArray(program.mangleProps.reserved)) program.mangleProps.reserved = []; } if (typeof options.mangle != "object") options.mangle = {}; options.mangle.properties = program.mangleProps; } if (program.nameCache) { options.nameCache = JSON.parse(read_file(program.nameCache, "{}")); } if (program.output == "ast") { options.output = { ast: true, code: false }; } if (program.parse) { if (!program.parse.acorn && !program.parse.spidermonkey) { options.parse = program.parse; } else if (program.sourceMap && program.sourceMap.content == "inline") { fatal("ERROR: inline source map only works with built-in parser"); } } if (~program.rawArgs.indexOf("--rename")) { options.rename = true; } else if (!program.rename) { options.rename = false; } var convert_path = function(name) { return name; }; if (typeof program.sourceMap == "object" && "base" in program.sourceMap) { convert_path = function() { var base = program.sourceMap.base; delete options.sourceMap.base; return function(name) { return path.relative(base, name); }; }(); } if (program.verbose) { options.warnings = "verbose"; } else if (program.warn) { options.warnings = true; } if (program.args.length) { simple_glob(program.args).forEach(function(name) { files[convert_path(name)] = read_file(name); }); run(); } else { var chunks = []; process.stdin.setEncoding("utf8"); process.stdin.on("data", function(chunk) { chunks.push(chunk); }).on("end", function() { files = [ chunks.join("") ]; run(); }); process.stdin.resume(); } function convert_ast(fn) { return UglifyJS.AST_Node.from_mozilla_ast(Object.keys(files).reduce(fn, null)); } function run() { UglifyJS.AST_Node.warn_function = function(msg) { print_error("WARN: " + msg); }; if (program.timings) options.timings = true; try { if (program.parse) { if (program.parse.acorn) { files = convert_ast(function(toplevel, name) { return require("acorn").parse(files[name], { ecmaVersion: 2018, locations: true, program: toplevel, sourceFile: name, sourceType: options.module || program.parse.module ? "module" : "script" }); }); } else if (program.parse.spidermonkey) { files = convert_ast(function(toplevel, name) { var obj = JSON.parse(files[name]); if (!toplevel) return obj; toplevel.body = toplevel.body.concat(obj.body); return toplevel; }); } } } catch (ex) { fatal(ex); } var result = UglifyJS.minify(files, options); if (result.error) { var ex = result.error; if (ex.name == "SyntaxError") { print_error("Parse error at " + ex.filename + ":" + ex.line + "," + ex.col); var col = ex.col; var lines = files[ex.filename].split(/\r?\n/); var line = lines[ex.line - 1]; if (!line && !col) { line = lines[ex.line - 2]; col = line.length; } if (line) { var limit = 70; if (col > limit) { line = line.slice(col - limit); col = limit; } print_error(line.slice(0, 80)); print_error(line.slice(0, col).replace(/\S/g, " ") + "^"); } } if (ex.defs) { print_error("Supported options:"); print_error(format_object(ex.defs)); } fatal(ex); } else if (program.output == "ast") { if (!options.compress && !options.mangle) { result.ast.figure_out_scope({}); } print(JSON.stringify(result.ast, function(key, value) { if (value) switch (key) { case "thedef": return symdef(value); case "enclosed": return value.length ? value.map(symdef) : undefined; case "variables": case "functions": case "globals": return value.size() ? value.map(symdef) : undefined; } if (skip_key(key)) return; if (value instanceof UglifyJS.AST_Token) return; if (value instanceof UglifyJS.Dictionary) return; if (value instanceof UglifyJS.AST_Node) { var result = { _class: "AST_" + value.TYPE }; if (value.block_scope) { result.variables = value.block_scope.variables; result.functions = value.block_scope.functions; result.enclosed = value.block_scope.enclosed; } value.CTOR.PROPS.forEach(function(prop) { result[prop] = value[prop]; }); return result; } return value; }, 2)); } else if (program.output == "spidermonkey") { print(JSON.stringify(UglifyJS.minify(result.code, { compress: false, mangle: false, output: { ast: true, code: false } }).ast.to_mozilla_ast(), null, 2)); } else if (program.output) { fs.writeFileSync(program.output, result.code); if (result.map) { fs.writeFileSync(program.output + ".map", result.map); } } else { print(result.code); } if (program.nameCache) { fs.writeFileSync(program.nameCache, JSON.stringify(options.nameCache)); } if (result.timings) for (var phase in result.timings) { print_error("- " + phase + ": " + result.timings[phase].toFixed(3) + "s"); } } function fatal(message) { if (message instanceof Error) message = message.stack.replace(/^\S*?Error:/, "ERROR:") print_error(message); process.exit(1); } // A file glob function that only supports "*" and "?" wildcards in the basename. // Example: "foo/bar/*baz??.*.js" // Argument `glob` may be a string or an array of strings. // Returns an array of strings. Garbage in, garbage out. function simple_glob(glob) { if (Array.isArray(glob)) { return [].concat.apply([], glob.map(simple_glob)); } if (glob && glob.match(/[*?]/)) { var dir = path.dirname(glob); try { var entries = fs.readdirSync(dir); } catch (ex) {} if (entries) { var pattern = "^" + path.basename(glob) .replace(/[.+^$[\]\\(){}]/g, "\\$&") .replace(/\*/g, "[^/\\\\]*") .replace(/\?/g, "[^/\\\\]") + "$"; var mod = process.platform === "win32" ? "i" : ""; var rx = new RegExp(pattern, mod); var results = entries.filter(function(name) { return rx.test(name); }).map(function(name) { return path.join(dir, name); }); if (results.length) return results; } } return [ glob ]; } function read_file(path, default_value) { try { return fs.readFileSync(path, "utf8"); } catch (ex) { if ((ex.code == "ENOENT" || ex.code == "ENAMETOOLONG") && default_value != null) return default_value; fatal(ex); } } function parse_js(flag) { return function(value, options) { options = options || {}; try { UglifyJS.minify(value, { parse: { expression: true }, compress: false, mangle: false, output: { ast: true, code: false } }).ast.walk(new UglifyJS.TreeWalker(function(node) { if (node instanceof UglifyJS.AST_Assign) { var name = node.left.print_to_string(); var value = node.right; if (flag) { options[name] = value; } else if (value instanceof UglifyJS.AST_Array) { options[name] = value.elements.map(to_string); } else { options[name] = to_string(value); } return true; } if (node instanceof UglifyJS.AST_Symbol || node instanceof UglifyJS.AST_PropAccess) { var name = node.print_to_string(); options[name] = true; return true; } if (!(node instanceof UglifyJS.AST_Sequence)) throw node; function to_string(value) { return value instanceof UglifyJS.AST_Constant ? value.getValue() : value.print_to_string({ quote_keys: true }); } })); } catch(ex) { if (flag) { fatal("Error parsing arguments for '" + flag + "': " + value); } else { options[value] = null; } } return options; } } function parse_source_map() { var parse = parse_js(); return function(value, options) { var hasContent = options && "content" in options; var settings = parse(value, options); if (!hasContent && settings.content && settings.content != "inline") { print_error("INFO: Using input source map: " + settings.content); settings.content = read_file(settings.content, settings.content); } return settings; } } function skip_key(key) { return skip_keys.indexOf(key) >= 0; } function symdef(def) { var ret = (1e6 + def.id) + " " + def.name; if (def.mangled_name) ret += " " + def.mangled_name; return ret; } function format_object(obj) { var lines = []; var padding = ""; Object.keys(obj).map(function(name) { if (padding.length < name.length) padding = Array(name.length + 1).join(" "); return [ name, JSON.stringify(obj[name]) ]; }).forEach(function(tokens) { lines.push(" " + tokens[0] + padding.slice(tokens[0].length - 2) + tokens[1]); }); return lines.join("\n"); } function print_error(msg) { process.stderr.write(msg); process.stderr.write("\n"); } function print(txt) { process.stdout.write(txt); process.stdout.write("\n"); } function describe_ast() { var out = UglifyJS.OutputStream({ beautify: true }); function doitem(ctor) { out.print("AST_" + ctor.TYPE); var props = ctor.SELF_PROPS.filter(function(prop){ return !/^\$/.test(prop); }); if (props.length > 0) { out.space(); out.with_parens(function(){ props.forEach(function(prop, i){ if (i) out.space(); out.print(prop); }); }); } if (ctor.documentation) { out.space(); out.print_string(ctor.documentation); } if (ctor.SUBCLASSES.length > 0) { out.space(); out.with_block(function(){ ctor.SUBCLASSES.forEach(function(ctor, i){ out.indent(); doitem(ctor); out.newline(); }); }); } }; doitem(UglifyJS.AST_Node); return out + "\n"; } ```
mischnic commented 5 years ago

The terser binary isn't used by parcel. I'm noticed something else however: this happens only with a .browserslistrc with Chrome > 69 (and if parcel is installed as a dependency), removing the file fixes it

Broken with Chrome > 69 (before mangling):

function $parcel$interopDefault(a) {
  return a && a.__esModule ? {
    d: a.default
  } : {
    d: a
  };
}

// ASSET: ic_bug_report_24px.svg
var $XwZ$exports = {};
$XwZ$exports = '<svg width="24" height="24">...</svg>';
var $XwZ$$interop$default = $parcel$interopDefault($XwZ$exports);
// ASSET: index.js
console.log((() => ({
  svg: $XwZ$$interop$default.d
}))());

Working without Chrome > 69 (before mangling):

function $parcel$interopDefault(a) {
  return a && a.__esModule ? {
    d: a.default
  } : {
    d: a
  };
}

// ASSET: ic_bug_report_24px.svg
var $XwZ$exports = {};
$XwZ$exports = '<svg width="24" height="24">...</svg>';
var $XwZ$$interop$default = $parcel$interopDefault($XwZ$exports);
// ASSET: index.js
console.log({   // <-------------------- difference
  svg: $XwZ$$interop$default.d
});
n0v1 commented 5 years ago

Good catch @mischnic. So it seems to have something to do with ES6 shorthand method definitions.

I installed @babel/plugin-transform-shorthand-properties to transform such expressions and created a .babelrc like this:

// .babelrc

{
  "presets": [
    ["@babel/preset-env"],
  ],
  "plugins": [
    "@babel/plugin-transform-shorthand-properties",
  ],
}

-> Error persists

I then deleted the .browserslistrc and added the browser targets to .babelrc instead:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "70",
        },
      },
    ],
  ],
  "plugins": [
    "@babel/plugin-transform-shorthand-properties",
  ],
}

-> Build fails with

 E:\Development\Git\parcel-scope-hoisting-bug\src\js\index.js: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]
    at assertNoDuplicates (E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\config-descriptors.js:205:13)
    at createDescriptors (E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\config-descriptors.js:114:3)
    at createPluginDescriptors (E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\config-descriptors.js:105:10)
    at alias (E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\config-descriptors.js:63:49)
    at cachedFunction (E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\caching.js:33:19)
    at plugins.plugins (E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\config-descriptors.js:28:77)
    at mergeChainOpts (E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\config-chain.js:319:26)
    at E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\config-chain.js:283:7
    at buildRootChain (E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\config-chain.js:68:29)
    at loadPrivatePartialConfig (E:\Development\Git\parcel-scope-hoisting-bug\node_modules\@babel\core\lib\config\partial.js:85:55)

This seems strange to me. Why does this error occur only after deleting the .browserslistrc? Does the existence of this file lead to another code path?

Without the plugin in .babelrc or with ["@babel/plugin-transform-shorthand-properties", {}, "unique-name"], everything seems to work as expected.

May be loosely related to /TrySound/rollup-plugin-terser/issues/12.

Update: Specifying the browser targets inside package.json also works around this issue and seems cleaner:

"browserslist": [
  "Chrome > 69"
],
mischnic commented 1 year ago

Parcel 1 is deprecated now