Parcel: 🐛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 | [email protected] 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:
https://github.com/jsforum/jsforum/issues/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";
....

[rodoabad]

To effectively transpile ES6 modules in node_modules, does each package need to have a .babelrc file? I'm using lerna and I'm trying to bootstrap and link packages.

[rodoabad]

@bugzpodder I'm having the same problem. Are you able to resolve your issue?

[bugzpodder]

By switching to webpack 4. Newer releases of parcel might have resolved it? or just downgrade it to an old version for now?

[DeMoorJasper]

@rodoabad @bugzpodder This has been resolved a couple versions ago https://github.com/parcel-bundler/parcel/pull/1101

[rodoabad]

Oh dear lordy. OK. For some reason, module is also being used if you have it. I'll try that from #1101. Thanks, @DeMoorJasper

[hansoksendahl]

If like me you came here trying to determine how to transpile linked packages in a lerna monorepo, let me save you some time clicking links.

The PR which added this feature is here.

The linked repository will need to have a source property defined in its package.json file. It will also need to have its own .babelrc file if you are using any babel transpiled language features in that package.

1. Treat all files as source code, don't change the resolution

{
  "main": "foo.js",
  "source": true
}

1. When compiling from source, use bar.js as the entry point

{
  "main": "foo.js",
  "source": "bar.js"
}

3.When compiling from source, alias specific files

{
  "main": "foo.js",
  "source": {
    "./foo.js": "./bar.js",
    "./baz.js": "./yay.js"
  }
}

1. When compiling from source, alias using glob patterns

{
  "main": "foo.js",
  "source": {
    "./lib/**": "./src/$1"
  }
}

[DeMoorJasper]

Feel free to contribute to the docs, to save people the search as well @hansoksendahl https://github.com/parcel-bundler/website