🐛Parcel do not transpile some ES6+ code in node_modules

[item4]

Choose one: is this a 🐛 bug report or 🙋 feature request?

🐛bug

🎛 Configuration (.babelrc, package.json, cli command)

// .babelrc
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["IE 9"]
      }
    }]
  ],
}

// package.json
{
  "name": "pc",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "parcel-bundler": "^1.6.2"
  },
  "private": true,
  "scripts": {
    "build": "parcel build src/index.js"
  },
  "dependencies": {
    "sweetalert2": "^7.17.0"
  }
}

# command
$ yarn build

🤔 Expected Behavior

build result must have no arrow function in because I'm set target to IE 9 and IE 9 do not support arrow function.

😯 Current Behavior

I can find arrow function easliy in build result.

💁 Possible Solution

use webpack (webpack@4 and babel@7)

🔦 Context

I tried to use babel-preset-env, babel-preset-latest, babel-plugin-es2015-arrow-function(blabla) but there is no effect.

💻 Code Sample

import swal from 'sweetalert2';

(async () => {
  await swal('hello');
})().then();

🌍 Your Environment

Software	Version(s)
Parcel	parcel-bundler@1.6.2 and 1.7.0
Node	v9.7.1
npm/Yarn	yarn 1.5.1
Operating System	macOS 10.13.3

[mischnic]

sweetalert2/package.json:

{
  // ...
  "main": "dist/sweetalert2.all.js",
  "jsnext:main": "src/sweetalert2.js",
  // ...
}

I think parcel uses jsnext:main if available (so here the source which contains arrow functions). I'm not sure if dependencies are compiled with babel?

[isacjunior]

Probably the problem is not in the arrow function.
Try bundler this code:

const double = n => n * 2

[mischnic]

The problem here is that code in node_modules contains arrow functions (see my previous comment) and isn't getting transpiled. It works for "user" code.

[256dpi]

I just experienced a similar situation. One of my npm dependencies (jsesc) uses es6 syntax. The dependency is not transpiled according to my projectes .babelrc. I believe parcel does not transpile modules within node_modules by default. Is there a way to whitelist modules for transpilation?

[item4]

I tested again in ^1.7.0 but there is no fix.
I feel Parcel do not transpile some code in dependency.
Is it correct action by design or wrong behavior? If it is correct action, close this issue, but if it is wrong behavior, please change issue label. I do not intend question. @davidnagli

[mischnic]

The problem is that parcel isn't using/choosing the transpiled dependency code (main)

{
  // ...
  "main": "dist/sweetalert2.all.js",
  "jsnext:main": "src/sweetalert2.js",
  // ...
}

[TrySound]

This is the problem of the package. Jsnext main should specify esm transpired format, not source. Also it's deprecated in favor of module field.

[mischnic]

Quite a controversial topic:
jsforum/jsforum#5

But does jsnext:main mean 'entry point written with potentially unsupported ES6/7 features', or 'entry point that runs in existing engines, except for the import/export statements'? It's unclear. It sounds as though you can use ES6/7 features, the assumption being that it points to your source code, and that a consumer (such as a bundler) takes responsibility for transpiling it (e.g. with Babel):

{
 "main": "dist/some-package.js",
 "jsnext:main": "src/index.js"
}

But that's problematic. What if src/index.js uses stage 0 features? some-package might have a build process that transpiles those features, but does that mean that all consumers of some-package have to be similarly equipped? (Yes, .babelrc makes that possible, but it's still a weird and brittle process, and it may become rather more complex with Babel 6.)

A better solution: jsnext:main could instead refer to an ES6-module entry point that is otherwise ready to use:

[item4]

I got it. I will make issue to sweetalert2.

[bugzpodder]

so currently I have a main app (parcel build src/index.js --target=node) and a node_module package (linked from part of monorepo) that includes ES6 code (eg import), I am not able to get parcel to transpile it despite having .babelrc.
I read in the the issue that I could have engines: node or some browserslist specified in package.json but not able to work. Can anyone tell me what the correct config would be:
// package.json
{
"name": "@app/foo",
"version": "0.1.0",
"browserslist": ["last 2 Chrome versions"],
"engines": { "node" : ">= 8.9.3" }
}

// index.js
import _ from "lodash";
....