Babel 7 support #868

verydanny · 2018-02-20T16:48:06Z

Feature request

Support Babel 7

davidnagli · 2018-02-20T16:59:12Z

Ya we should definitely work towards introducing support for Babel 7.

The weird thing that surprises me is that you didn’t get an error!

parcel/src/transforms/babel.js

Line 44 in cafb6ef

if (parseInt(babel.version, 10) !== 6) {

We currently have a check that throws an error whenever you’re using an unsupported Babel version, so I’m thinking maybe your error is getting caused by something else it’s hitting before even starting the Babel transform. Did you get a stack trace with the error?

DeMoorJasper · 2018-02-20T17:51:01Z

@davidnagli possibly because he didn't have babel 7 installed locally

verydanny · 2018-02-20T18:12:54Z

Stack trace:

Server running at http://localhost:1234 
🚨  /Users/daniel/Git/21g/1zet/src/index.js: Cannot read property 'loose' of undefined (While     at _default (/Users/daniel/Git/21g/1zet/node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js:21:23)
    at Function.memoisePluginContainer (/Users/daniel/Git/21g/1zet/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
    at Function.normalisePlugin (/Users/daniel/Git/21g/1zet/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
    at /Users/daniel/Git/21g/1zet/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/daniel/Git/21g/1zet/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/daniel/Git/21g/1zet/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at /Users/daniel/Git/21g/1zet/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /Users/daniel/Git/21g/1zet/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)

DeMoorJasper · 2018-02-20T18:16:50Z

@verydanny do you get the Unsupported babel version: ${babel.version} error if u install babel 7 in your project?

verydanny · 2018-02-20T18:20:21Z

I do not, and I do have babel 7 installed locally.

edit:

My package.json

{
  "name": "zeeto-new",
  "version": "1.0.0",
  "description": "new zeeto",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "start": "yarn parcel ./src/index.html",
    "build": "yarn parcel build ./src/index.html -d ./ --public-url ./"
  },
  "devDependencies": {
    "@angelrush/fm2": "^2.3.16",
    "@angelrush/react-components": "^2.1.5",
    "@babel/cli": "^7.0.0-beta.40",
    "@babel/core": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "@babel/preset-flow": "^7.0.0-beta.40",
    "@babel/preset-stage-0": "^7.0.0-beta.40",
    "@babel/preset-stage-1": "^7.0.0-beta.40",
    "bootstrap": "^4.0.0",
    "flow-bin": "^0.65.0",
    "identity-obj-proxy": "^3.0.0",
    "node-sass": "^4.7.2",
    "parcel-bundler": "^1.5.1"
  }
}

devongovett · 2018-02-20T19:14:04Z

Ya, because the package name is @babel/core not babel-core in babel 7, so the error wouldn't occur.

devongovett · 2018-02-20T19:23:50Z

So, we need to figure out how to support both babel 7 and babel 6 simultaneously I think. Parcel will need to build projects built with Babel 6 for a while now, but we should also support Babel 7 projects and perhaps use Babel 7 internally.

Here's what I think we should do:

Once Babel 7 releases a final version, switch to it internally for parsing, running preset-env, transforming JSX, etc.
If there is a custom .babelrc config, detect the locally installed babel version in the app (babel-core version in package.json). We will need to require that babel-core or @babel/core is installed locally in the app if you want to use a custom babelrc.
If the babel version installed in the app differs from the internal babel version used by Parcel, do two separate compiles: 1 for the internal transforms using babel 7, and one for the custom babelrc. This may require a duplicate parse + codegen step if the Babel 7 ast is incompatible with Babel 6. 😦

This doesn't sound great actually. I wonder if we can get around it somehow...

lifeiscontent · 2018-03-19T13:09:56Z

@devongovett this might also help with typescript since babel7 has first class support for it now!

elken · 2018-03-23T13:43:37Z

I think a buildtime flag (for now at least) will resolve it.

parcel --with-babel7 or something similar.

DeMoorJasper · 2018-03-23T13:50:06Z

@elken That won't be neccessary if anyone would like to add babel 7 support we could just detect the version (the same way we already do to warn unsupported babel versions, with adding @babel/core to the check) and just try to support both.
Not sure how we'd achieve this, Devon already explained how he would approach it. Would be nice to not have to parse and generate 2 times.

jeroenptrs · 2018-04-06T09:19:49Z

Any updates on this? With new ES features on the horizon, it would be nice to be able to use Babel 7 instead of 6 (and let go of a lot of babel-plugin-transform-... dependencies)

wachunei · 2018-04-09T14:29:20Z

I'm literally just starting to learn parcel 😄. Is this issue the reason I come up with this error?

If so..

Why is @babel/helper-... being used by parcel dependency babel-core instead of a babel-helper-... compatible version? It seems like at this point it is necessary to have a duplication of old/new dependencies for internal/external babel transformation. Is this what Devon means? Sorry for the questions, I'm trying to get it right and help 😅

DeMoorJasper · 2018-04-09T14:53:42Z

It probably is due to parcel not supporting babel 7.
It would be nice to find a way to hotswap between babel-core and @babel/core without losing much of the performance.

wachunei · 2018-04-09T15:07:28Z

From the stack trace, parcel is actually using babel-core instead of @babel/core but what I do not get is why in this execution it requires a @babel- package instead of a babel. From what I understand, to support any babel (current or upcoming version), inner dependencies should be locked to a certain range (and dealing with the case of having "duplicated" dependencies). Does this sound bad? 😅

pravdomil · 2018-04-23T11:30:00Z

#475

babakness · 2018-04-26T22:09:54Z

Would be nice to have this, perhaps with a flag?

vihanb · 2018-05-05T19:28:31Z

adding babel core as peer-dep will allow users to have [email protected] meaning they can use @babel/core (v7) without dropping support for v6

blairwilcox · 2018-07-06T11:21:18Z

Any update on this?

jeroenptrs · 2018-07-06T11:23:32Z

@reccanti seems to me it's not being considered atm because it's not in the RFC Project Board (even though it's labeled as an RFC)

DeMoorJasper · 2018-07-06T11:29:00Z

@jeroenptrs we don’t really use those boards a lot. If a contributor wants to dig into this issue a PR will pop up, but my guess is it’ll be part of parcel 2

_{Sent with GitHawk}

blairwilcox · 2018-07-06T11:42:18Z

Gotcha, thanks for the fast response!

DeMoorJasper · 2018-08-09T18:41:54Z

First RC for Babel 7 has been released a couple hours ago as mentioned in #475 :)

If anyone is interested in researching how to support both Babel 6 and 7 feel free to do so

vihanb · 2018-08-09T19:14:31Z

I'm not too familiar with Parcel internals but couldn't babel7 be invoked based on presence of @babel/core module and otherwise runs legacy code?

adrienharnay · 2018-08-09T19:17:04Z

I'm not sure this can be done/is worth to fight for. The majority of projects I know have released a major version, and stopped supporting Babel6 since. However, if you think this could be achieved, I would be happy to lend a hand!

DeMoorJasper · 2018-08-09T19:50:42Z

@adrienharnay it would be cool if we could support backwards compatibility otherwise it might be part of parcel 2 which isn’t gonna get released any time soon

_{Sent with GitHawk}

tunnckoCore · 2018-08-10T08:28:11Z

and otherwise runs legacy code?

No.

is worth to fight for

Exactly, not worth.

If backward compat is so important... allow it through flag (--babel6?)for some months, then deprecate the flag anad remove it.

DeMoorJasper · 2018-08-10T16:25:05Z

@olstenlarck The flag seems to be a bit obsolete. The biggest challenge is making parcel support both, not detecting which one to use (we can probably detect it at the root and pass it along everywhere in the options object as described below).

If the user defines a babelrc file and/or has babel installed inside pkg.json you can derive pretty easily whether it's babel 6 or 7. (Either through version number or the @babel prefix/organisation)

EDIT: Parcel 2 will support both Babel 6 and 7 by turning asts back into code strings when the AST is incompatible. Which is currently impossible with the current architecture (or at least not in a clean way). Parcel should probably use Babel 7 internally as it probably gives us a little speed boost and keeps us up to date with the latest babel changes

tunnckoCore · 2018-08-10T21:16:17Z

First RC for Babel 7 has been released a couple hours ago as mentioned in #475 :)

@DeMoorJasper sooo, any way to try the things? It was closed so...

Parcel 2: Babel 7
Parcel 3: New parcel API + Babel 7

Sounds better.

DeMoorJasper · 2018-08-10T21:32:39Z

@olstenlarck the PR wasn't working perfectly and was no longer up to date.

We'll send an update here whenever we have anything worthy of testing

adrienharnay · 2018-08-28T15:08:25Z

Babel 7 has been released 😬

DeMoorJasper · 2018-08-28T16:32:54Z

Awesome, Babel 7 is finally out :)

Babel 7 support will be part of Parcel 2 as it will have the ability to check AST compatibility and stringify and parse based on whether it's compatible. (So we will support Babel 6, Babel 7 and any other compiler/transpiler that has a parcel plugin)

Not sure if it's possible to hack Babel 7 support into Parcel 1, but if anyone is up for the challenge feel free to try. (You would also have to stringify and parse and check compatibility, but I doubt you'd be able to make it possible in a clean way).

devongovett · 2018-08-29T12:29:56Z

WIP here: #1955. If you want to help, check out the to do list there and make PRs against the babel7 branch. Thanks!

scrossan-crown · 2018-08-30T15:04:07Z

I was wondering since babel 7 adds support for TypeScript would it possible to add type checking to parcel under a flag. Also if it could use the specified version of TypeScript in the projects package.json.

The reason I ask is I've been using fathyb/parcel-plugin-typescript for a while now but there hasn't been any activity on the project for around a couple of months and it would be great if TypeScript support it was built in.

wongmjane · 2018-08-30T15:33:41Z

Since Babel 7 supports transpiling TypeScript files, it could make transpiling in itself easier - let the Babel 7 compiler handle it, while tsc will only be used for type checking

Related Articles:

https://babeljs.io/blog/2018/08/27/7.0.0#typescript-support-babel-preset-typescript

https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/

DeMoorJasper · 2018-08-30T16:01:02Z

Using babel for ts would probably speed up compiling and fix some bugs in the process. However I think we should start by focusing on making babel 7 work properly for js

_{Sent with GitHawk}

HauntedSmores · 2018-08-31T22:12:46Z

Ran into this issue when trying to use Parcel's internal version of babel for my js but a different preset to run a gulpfile with ES6.

Is there a way to use a different .babelrc for Parcel vs gulpfile.babel.js?

rafaelrinaldi · 2018-09-01T15:08:28Z

@HauntedSmores For reference I know Rollup has a babelrc flag which you can opt out of. Might be worth checking if something like that makes sense in Parcel as well (I think it does).

costinEEST · 2018-09-03T14:45:00Z

As devDependencies I have installed

    "@babel/core": "^7.0.0",
    "babel-core": "^7.0.0-bridge"
    "parcel-bundler": "^1.9.7",

As peerDependencies I have this

"babel-core": "6.x || ^7.0.0-bridge.0"

But I still get the error Requires Babel "^7.0.0-0", but was loaded with "6.26.3" How can I fix it?

tunnckoCore · 2018-09-03T15:15:28Z

You can't, it's internal thing and we should wait... ;/

JacobMGEvans · 2018-09-09T21:45:46Z

Following.

ahahaha, thanks for the thumbs.

codeaholicguy · 2018-09-11T09:50:26Z

How is the progress of this? Babel 7.0 released 14 days ago. 😭

shofel · 2018-09-11T10:14:44Z

@codeaholicguy Nguyễn, You're welcome helping out with this! :) As I believe, #1955 is the starting point to participate on babel 7 support.

devongovett · 2018-09-16T06:11:36Z

Merged #1955 and released a beta in v1.10.0-beta.0. Please help test it out and report any bugs you find! 🎉

devongovett · 2018-09-16T06:17:37Z

I should have given some info about how it works.

For internally generated configs, e.g. our built in babel-preset-env, and JSX support, we will use babel 7 automatically. If you don't have a .babelrc with custom plugins in it, you don't need to do anything at all.
On existing projects with a .babelrc using babel 6, we will continue using babel 6 as normal. If you don't have an explicit dependency on babel-core in your package.json, one will be automatically installed for you.
If you would like to move a project from babel 6 to 7, you need to add a dependency on @babel/core, and adjust your .babelrc to point to babel 7 plugins.
For new projects, when you create a .babelrc file, we will automatically detect whether the plugins are dependent on babel 6 or 7 and automatically install either babel-core or @babel/core into your project for you. We also now support automatically installing the plugins themselves automatically as well. 💥

qm3ster · 2018-10-10T09:12:46Z

@devongovett

automatically installing the plugins themselves automatically

Mike1stver · 2019-03-29T00:52:11Z

I my friends, I have just create a project in babel by using this commands:

npm install -g parcel-bundler and
npm init -y

and npm install react react-dom.

As i understand, parcel will automatically use babel 7 for my configuration right? I did not use the .babelrc at all, however, i cannot use class properties i have this error:

Support for the experimental syntax 'classProperties' isn't currently enabled (5:19):

As i understand if parcel , in the way i configured, established babel 7 and not 6 for my project, @babel/preset-env will be installed and i do not need anything else to make the callProperties to works okey. How can I correctly select the version of babel? it seems the v6 is instaled and not the 7. which is the version a need indeed

tunnckoCore · 2019-03-29T08:20:34Z

There are two things: a) using v7 may still not be the default, or b) i'm not sure if the preset-env includes the class properties.

Hm, interesting.

verydanny changed the title ~~Babel 7 support 🐛 bug report~~ Babel 7 support 🐛 Feb 20, 2018

davidnagli added the 🙋‍♀️ Feature label Feb 20, 2018

davidnagli added the 💬 RFC Request For Comments label Feb 20, 2018

DeMoorJasper mentioned this issue May 4, 2018

Requires Babel "^7.0.0-0", but was loaded with "6.26.3". #1287

Closed

edmorley mentioned this issue May 10, 2018

can`t user es7 destructuring assignments #1221

Closed

trxcllnt mentioned this issue May 15, 2018

Unsupported babel version: 7.0.0-beta.46 assuncaocharles/create-react-app-parcel#3

Closed

joe-lloyd mentioned this issue May 21, 2018

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3" FormidableLabs/spectacle#522

Closed

DeMoorJasper mentioned this issue May 30, 2018

Requires Babel "^7.0.0-0", but was loaded with "6.26.3" #1459

Closed

liamross mentioned this issue Jun 20, 2018

PaperError not functioning correctly liamross/psiagram#50

Closed

DeMoorJasper changed the title ~~Babel 7 support 🐛~~ Babel 7 support Aug 10, 2018

devongovett mentioned this issue Aug 29, 2018

Babel 7 #1955

Merged

6 tasks

devongovett closed this as completed in #1955 Sep 16, 2018

swyxio mentioned this issue Oct 17, 2018

upgrade to babel 7 - slow first start assuncaocharles/create-react-app-parcel#26

Closed

Babel 7 support #868

Babel 7 support #868

Comments

verydanny commented Feb 20, 2018 • edited by DeMoorJasper Loading

Feature request

davidnagli commented Feb 20, 2018

DeMoorJasper commented Feb 20, 2018

verydanny commented Feb 20, 2018

DeMoorJasper commented Feb 20, 2018 • edited Loading

verydanny commented Feb 20, 2018 • edited Loading

devongovett commented Feb 20, 2018

devongovett commented Feb 20, 2018

lifeiscontent commented Mar 19, 2018

elken commented Mar 23, 2018

DeMoorJasper commented Mar 23, 2018 • edited Loading

jeroenptrs commented Apr 6, 2018

wachunei commented Apr 9, 2018

DeMoorJasper commented Apr 9, 2018

wachunei commented Apr 9, 2018

pravdomil commented Apr 23, 2018

babakness commented Apr 26, 2018

vihanb commented May 5, 2018

blairwilcox commented Jul 6, 2018

jeroenptrs commented Jul 6, 2018

DeMoorJasper commented Jul 6, 2018

blairwilcox commented Jul 6, 2018

DeMoorJasper commented Aug 9, 2018 • edited Loading

vihanb commented Aug 9, 2018 • edited Loading

adrienharnay commented Aug 9, 2018

DeMoorJasper commented Aug 9, 2018

tunnckoCore commented Aug 10, 2018 • edited Loading

DeMoorJasper commented Aug 10, 2018 • edited Loading

tunnckoCore commented Aug 10, 2018 • edited Loading

DeMoorJasper commented Aug 10, 2018

adrienharnay commented Aug 28, 2018

DeMoorJasper commented Aug 28, 2018 • edited Loading

devongovett commented Aug 29, 2018

scrossan-crown commented Aug 30, 2018 • edited Loading

wongmjane commented Aug 30, 2018

DeMoorJasper commented Aug 30, 2018

HauntedSmores commented Aug 31, 2018

rafaelrinaldi commented Sep 1, 2018

costinEEST commented Sep 3, 2018

tunnckoCore commented Sep 3, 2018

JacobMGEvans commented Sep 9, 2018 • edited Loading

codeaholicguy commented Sep 11, 2018

shofel commented Sep 11, 2018

devongovett commented Sep 16, 2018

devongovett commented Sep 16, 2018

qm3ster commented Oct 10, 2018

Mike1stver commented Mar 29, 2019

tunnckoCore commented Mar 29, 2019 • edited Loading

verydanny commented Feb 20, 2018 •

edited by DeMoorJasper

Loading

DeMoorJasper commented Feb 20, 2018 •

edited

Loading

verydanny commented Feb 20, 2018 •

edited

Loading

DeMoorJasper commented Mar 23, 2018 •

edited

Loading

DeMoorJasper commented Aug 9, 2018 •

edited

Loading

vihanb commented Aug 9, 2018 •

edited

Loading

tunnckoCore commented Aug 10, 2018 •

edited

Loading

DeMoorJasper commented Aug 10, 2018 •

edited

Loading

tunnckoCore commented Aug 10, 2018 •

edited

Loading

DeMoorJasper commented Aug 28, 2018 •

edited

Loading

scrossan-crown commented Aug 30, 2018 •

edited

Loading

JacobMGEvans commented Sep 9, 2018 •

edited

Loading

tunnckoCore commented Mar 29, 2019 •

edited

Loading