parcel-bundler / parcel

The zero configuration build tool for the web. ๐Ÿ“ฆ๐Ÿš€
https://parceljs.org
MIT License
43.49k stars 2.27k forks source link

parcel 2: @parcel/transformer-js/src/esmodule-helpers.js is not being transpiled correctly when building for IE11 #7830

Closed MoonSangJin closed 2 years ago

MoonSangJin commented 2 years ago

๐Ÿ› bug report

Parcel includes an internal file when building for IE11 (@parcel/transformer-js/src/esmodule-helpers.js), but that file is not transpiled (arrow function is not compiled)

The error is the following: SCRIPT1022: syntax error

๐ŸŽ› Configuration (.babelrc, package.json, cli command)

package.json

"scripts": {
    "start-rake:ie11": "npm run start-rake:clean && parcel tests/html/rakeApp.html --target ie11 --https --dist-dir dist/output/rake"
  },
  "targets": {
    "ie11": {
      "engines": {
        "browsers": [
          "ie 11"
        ]
      }
    }
  },
  "devDependencies": {
    "@babel/cli": "^7.16.8",
    "@babel/core": "^7.16.12",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-transform-object-assign": "^7.16.7",
    "@babel/plugin-transform-reserved-words": "^7.16.7",
    "@babel/plugin-transform-runtime": "^7.16.10",
    "@babel/preset-env": "^7.16.11",
    "@parcel/babel-plugin-transform-runtime": "^2.3.2",
    "@parcel/babel-preset-env": "^2.3.2",
    "babel-plugin-minify-mangle-names": "^0.5.0",
    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
    "babel-plugin-transform-es3-property-literals": "^6.22.0",
    "babel-plugin-transform-member-expression-literals": "^6.9.4",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "babel-plugin-transform-remove-debugger": "^6.9.4",
    "cross-env": "^7.0.3",
    "del": "^6.0.0",
    "docdash": "^1.2.0",
    "jasmine": "^4.0.2",
    "jasmine-core": "^4.0.0",
    "jsdoc": "^3.6.10",
    "karma": "^6.3.12",
    "karma-chrome-launcher": "^3.1.0",
    "karma-env-preprocessor": "^0.1.1",
    "karma-jasmine": "^4.0.1",
    "karma-parcel": "^0.5.2",
    "karma-spec-reporter": "^0.0.33",
    "npm-run-all": "^4.1.5",
    "parcel": "^2.3.2",
    "uuid": "^8.3.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "dotenv": "^14.3.2",
    "es5-shim": "^4.6.4",
    "gulp": "^4.0.2",
    "gulp-es3ify": "^0.0.1",
    "gulp-rename": "^2.0.0",
    "js-cookie": "^3.0.1",
    "promise-polyfill": "^8.2.1"
  }

.babelrc actually nothing

{
    "presets": [],
    "plugins": [
        /*[ "transform-remove-console" ],
        [ "transform-remove-debugger"],
        [ "transform-es3-property-literals" ],
        [ "transform-es3-member-expression-literals" ],
        [ "@babel/plugin-transform-object-assign"],
        [ "@babel/plugin-transform-reserved-words" ],
        [ "@babel/plugin-proposal-class-properties",{},"debugging@babel/plugin-proposal-class-properties" ]*/
    ]
}

cli command

npm run start-rake:ie11

๐Ÿค” Expected Behavior

I want the code for parcelHelpers below to work in IE11, not arrow functions. Bundled files cause errors in IE11 because of codes like parcelHelpers' ()=>_applyDecoratedDescriptorDefault.default .

๐Ÿ˜ฏ Current Behavior

var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
parcelHelpers.defineInteropFlag(exports);
parcelHelpers.export(exports, "applyDecoratedDescriptor", ()=>_applyDecoratedDescriptorDefault.default
);
parcelHelpers.export(exports, "arrayWithHoles", ()=>_arrayWithHolesDefault.default
);
parcelHelpers.export(exports, "arrayWithoutHoles", ()=>_arrayWithoutHolesDefault.default
);
parcelHelpers.export(exports, "assertThisInitialized", ()=>_assertThisInitializedDefault.default
);
parcelHelpers.export(exports, "asyncGenerator", ()=>_asyncGeneratorDefault.default
);
parcelHelpers.export(exports, "asyncGeneratorDelegate", ()=>_asyncGeneratorDelegateDefault.default
);
parcelHelpers.export(exports, "asyncIterator", ()=>_asyncIteratorDefault.default
);
parcelHelpers.export(exports, "asyncToGenerator", ()=>_asyncToGeneratorDefault.default
);
parcelHelpers.export(exports, "awaitAsyncGenerator", ()=>_awaitAsyncGeneratorDefault.default
);
parcelHelpers.export(exports, "awaitValue", ()=>_awaitValueDefault.default
);
parcelHelpers.export(exports, "classCallCheck", ()=>_classCallCheckDefault.default
);
parcelHelpers.export(exports, "classNameTDZError", ()=>_classNameTdzErrorDefault.default
);
parcelHelpers.export(exports, "classPrivateFieldGet", ()=>_classPrivateFieldGetDefault.default
);
parcelHelpers.export(exports, "classPrivateFieldLooseBase", ()=>_classPrivateFieldLooseBaseDefault.default
);
parcelHelpers.export(exports, "classPrivateFieldSet", ()=>_classPrivateFieldSetDefault.default
);
parcelHelpers.export(exports, "classPrivateMethodGet", ()=>_classPrivateMethodGetDefault.default
);
parcelHelpers.export(exports, "classPrivateMethodSet", ()=>_classPrivateMethodSetDefault.default
);
parcelHelpers.export(exports, "classStaticPrivateFieldSpecGet", ()=>_classStaticPrivateFieldSpecGetDefault.default
);
parcelHelpers.export(exports, "classStaticPrivateFieldSpecSet", ()=>_classStaticPrivateFieldSpecSetDefault.default
);
parcelHelpers.export(exports, "construct", ()=>_constructDefault.default
);
parcelHelpers.export(exports, "createClass", ()=>_createClassDefault.default
);
parcelHelpers.export(exports, "decorate", ()=>_decorateDefault.default
);
parcelHelpers.export(exports, "defaults", ()=>_defaultsDefault.default
);
parcelHelpers.export(exports, "defineEnumerableProperties", ()=>_defineEnumerablePropertiesDefault.default
);
parcelHelpers.export(exports, "defineProperty", ()=>_definePropertyDefault.default
);
parcelHelpers.export(exports, "extends", ()=>_extendsDefault.default
);
parcelHelpers.export(exports, "get", ()=>_getDefault.default
);
parcelHelpers.export(exports, "getPrototypeOf", ()=>_getPrototypeOfDefault.default
);
parcelHelpers.export(exports, "inherits", ()=>_inheritsDefault.default
);
parcelHelpers.export(exports, "inheritsLoose", ()=>_inheritsLooseDefault.default
);
parcelHelpers.export(exports, "initializerDefineProperty", ()=>_initializerDefinePropertyDefault.default
);
parcelHelpers.export(exports, "initializerWarningHelper", ()=>_initializerWarningHelperDefault.default
);
parcelHelpers.export(exports, "_instanceof", ()=>_instanceofDefault.default
);
parcelHelpers.export(exports, "interopRequireDefault", ()=>_interopRequireDefaultDefault.default
);
parcelHelpers.export(exports, "interopRequireWildcard", ()=>_interopRequireWildcardDefault.default
);
parcelHelpers.export(exports, "isNativeFunction", ()=>_isNativeFunctionDefault.default
);
parcelHelpers.export(exports, "iterableToArray", ()=>_iterableToArrayDefault.default
);
parcelHelpers.export(exports, "iterableToArrayLimit", ()=>_iterableToArrayLimitDefault.default
);
parcelHelpers.export(exports, "iterableToArrayLimitLoose", ()=>_iterableToArrayLimitLooseDefault.default
);
parcelHelpers.export(exports, "jsx", ()=>_jsxDefault.default
);
parcelHelpers.export(exports, "newArrowCheck", ()=>_newArrowCheckDefault.default
);
parcelHelpers.export(exports, "nonIterableRest", ()=>_nonIterableRestDefault.default
);
parcelHelpers.export(exports, "nonIterableSpread", ()=>_nonIterableSpreadDefault.default
);
parcelHelpers.export(exports, "objectSpread", ()=>_objectSpreadDefault.default
);
parcelHelpers.export(exports, "objectWithoutProperties", ()=>_objectWithoutPropertiesDefault.default
);
parcelHelpers.export(exports, "objectWithoutPropertiesLoose", ()=>_objectWithoutPropertiesLooseDefault.default
);
parcelHelpers.export(exports, "possibleConstructorReturn", ()=>_possibleConstructorReturnDefault.default
);
parcelHelpers.export(exports, "readOnlyError", ()=>_readOnlyErrorDefault.default
);
parcelHelpers.export(exports, "set", ()=>_setDefault.default
);
parcelHelpers.export(exports, "setPrototypeOf", ()=>_setPrototypeOfDefault.default
);
parcelHelpers.export(exports, "skipFirstGeneratorNext", ()=>_skipFirstGeneratorNextDefault.default
);
parcelHelpers.export(exports, "slicedToArray", ()=>_slicedToArrayDefault.default
);
parcelHelpers.export(exports, "slicedToArrayLoose", ()=>_slicedToArrayLooseDefault.default
);
parcelHelpers.export(exports, "superPropBase", ()=>_superPropBaseDefault.default
);
parcelHelpers.export(exports, "taggedTemplateLiteral", ()=>_taggedTemplateLiteralDefault.default
);
parcelHelpers.export(exports, "taggedTemplateLiteralLoose", ()=>_taggedTemplateLiteralLooseDefault.default
);
parcelHelpers.export(exports, "_throw", ()=>_throwDefault.default
);
parcelHelpers.export(exports, "toArray", ()=>_toArrayDefault.default
);
parcelHelpers.export(exports, "toConsumableArray", ()=>_toConsumableArrayDefault.default
);
parcelHelpers.export(exports, "toPrimitive", ()=>_toPrimitiveDefault.default
);
parcelHelpers.export(exports, "toPropertyKey", ()=>_toPropertyKeyDefault.default
);
parcelHelpers.export(exports, "typeOf", ()=>_typeOfDefault.default
);
parcelHelpers.export(exports, "wrapAsyncGenerator", ()=>_wrapAsyncGeneratorDefault.default
);
parcelHelpers.export(exports, "wrapNativeSuper", ()=>_wrapNativeSuperDefault.default
);
parcelHelpers.export(exports, "createSuper", ()=>_createSuperDefault.default
);
parcelHelpers.export(exports, "isNativeReflectConstruct", ()=>_isNativeReflectConstructDefault.default
);

๐Ÿ’ Possible Solution

Is there a way to compile parcelHelpers arrow functions to work in IE11?

๐Ÿ”ฆ Context

I am developing an sdk that runs on a modern browser, ie. When using parcel-bundler, which is originally parcel v1, there was no problem using .babelrc, but the above problem occurred while migrating to v2. @babel/preset-env was also used in the original .babelrc .

This is the old babelrc file. image

I already referenced #5555, but it seems to be a different situation for me.

๐Ÿ’ป Code Sample

Sharing is difficult for security. Is there a way to convert the arrow function of parcelHelpers?

๐ŸŒ Your Environment

Software Version(s)
Parcel 2.3.2
Node 16.13.2
npm/Yarn npm 8.1.2
Operating System Mac OS(Development), Windows (Test)
MoonSangJin commented 2 years ago

The problem is assumed to be caused by adding the --no-scope-hoist option to the build. --experimental-scope-hoisting in v1 works by default in v2, but I accidentally added the --no-scope-hoist option to build. By removing that option, all arrow functions are transpiled. I found this by accident, but I'm leaving a comment in case it might be helpful to others.

And unlike package.json above, I didn't use target, I used browserlists. "browserslist": ["ie 8","Chrome 26","Firefox 16","Safari 7"] This is the browserlist I used. Now it works normally in IE11,10.