Closed n0v1 closed 1 year 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
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.
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?
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);
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
});
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"
],
Parcel 1 is deprecated now
🐛 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:
Non-functional code in generated bundle (with
--experimental-scope-hoisting
and active minification):💻 Code Sample
reproduction repository. See branch vue-data-minification-scope-hoisting-bug and readme.
This is the source code of the failing Vue component:
The non-minified code (
--experimental-scope-hoisting --no-minify
) looks like this:🌍 Your Environment