Yomguithereal / baobab

JavaScript & TypeScript persistent and optionally immutable data tree with cursors.
MIT License
3.15k stars 117 forks source link

Compatiblity issue with babel-preset-env introduced in version 2.5.1 #505

Closed legaultpierre closed 4 years ago

legaultpierre commented 6 years ago

Hi,

Just noticed version 2.5.1 introduced a compatibility problem with babel-preset-env, triggering the following when using with babelify:

Error: Couldn't find preset "es2015" relative to directory "/.../node_modules/baobab" while parsing file: /.../node_modules/baobab/dist/baobab.js

The problem is still here in version 2.5.2 :/

FYI, the .babelrc used is: { "presets": ["env", "react"] }

Everything worked well in the versions before :)

Yomguithereal commented 6 years ago

Did you exclude the node_modules folder in your config? Normally, Babelify should not try to transpile already transpiled distributed files.

legaultpierre commented 6 years ago

I did not as I thought this was the default behaviour: https://github.com/babel/babelify#why-arent-files-in-node_modules-being-transformed I tried to add babelify.configure({presets: ["env", "react"], ignore: /\/node_modules\//}) or babelify.configure({presets: ["env", "react"], ignore: /node_modules/}) But none of this changed anything...

Yomguithereal commented 6 years ago

Maybe babelify has an issue with the package.json babel key defined here. Can you try dropping it in your node_modules baobab package.json file and replace it with a .babelrc file and tell me if this fixes it?

legaultpierre commented 6 years ago

Ok I dropped

  "babel": {
    "presets": [
      "es2015"
    ]
  }

and added the following .babelrc file at the root of baobab { "presets": ["es2015"] } But I still get the same issue :/

Yomguithereal commented 6 years ago

And if you remove both? Was it working before v2.5.1?

legaultpierre commented 6 years ago

Still same issue without the .babelrc file.

(Just in case, I was testing on v2.5.2, but got same problem in v2.5.1)

Yes works like charm in v2.5.0 :/

SidOfc commented 4 years ago

Having the same issue (also using babelify, version 7.3.0), for me, running npm i -D babel-preset-es2015 fixes the issue. No existing config had to be altered. Hope this helps someone :)

I experienced this during a general package update for one of the projects I work on, if anything changes after an upgrade to babelify version 10 I'll post an update here.

Yomguithereal commented 4 years ago

Maybe it's time I dropped browserify from this repo?

SidOfc commented 4 years ago

Downgrading to Baobab 2.5.0 also works fine, because this does not have a dependency on the preset. I wonder why it was added, was it intentional to make end users install the preset? Or was it developer convenience that accidentally "leaked" to the end user?

That being said, Browserify is not the only thing depending on this preset since the babel directive mentions it too in the package.json file. Maybe this change can be reverted if it isn't relevant for end users?

Yomguithereal commented 4 years ago

I wonder why it was added, was it intentional to make end users install the preset?

It was definitely not.

Or was it developer convenience that accidentally "leaked" to the end user?

I find this distressing that it would even leak.

The only reason why this repo relies on browserify is that this lib was developed at a time when it was a good thing to provide minified standalone bundles of your lib for people to consume easily. It's becoming less and less relevant nowadays.

SidOfc commented 4 years ago

That is a very sensible explanation, apologies if I sounded harsh there, I admire this project quite a lot for its simplicity (for the end user) and just for being awesome at what it does! Hence I want to stay up-to-date with the latest :)

Maybe I can come up with a very small repo that reproduces this issue so that you can check it out? There could be another way of solving this instead of getting rid of Browserify since this only became an issue in recent versions (> 2.5.0).

Let me know if you're interested, would love to be able to help 👍

note: it will be tonight (+-9 to 10 hrs from now) or tomorrow before I can post a link, at work now, got some plans tonight as well.

Yomguithereal commented 4 years ago

Maybe I can come up with a very small repo that reproduces this issue so that you can check it out?

It sure would be helpful. I can check it and try to fix the issue afterwards. In the meantime I will try to see what changed in those versions that could explain why it behaves this way now.

SidOfc commented 4 years ago

@Yomguithereal I've worked on it, actually with different results.

When I found this behavior I was working on an app using Gulp and Browserify for development, since our configuration is quite complex I wanted to keep it small for this repro with Webpack instead. Turns out that it works like a charm with Webpack.

However, it seems that Gulp+Browserify indeed do get confused by baobab. I can get bundling to complete by removing baobab parts from the application, then, when re-adding the removed parts it will start crashing, asking for the preset.

I created two repo's, the Gulp+Browserify one can be found here and a working Webpack example exists too.

There is no reason to check Webpack though, but I figured to leave you with as much info as possible about the steps I took to trigger the error.

I hope this helps, or perhaps shows how I'm messing up the configuration myself :sweat_smile:

Good luck, let me know if there's anything else I can do.

Zache commented 4 years ago

I think the problem is related to Baobab using babel-preset-es2015 and the repro uses @babel/preset-env which is a replacement for babel-preset-es2015.

SidOfc commented 4 years ago

@Zache you are correct about the fact that baobab requires babel-preset-es2015 but baobab needs this internally, thus, I should be able to use @babel/preset-env just fine as an end user and baobab itself should deal with including babel-preset-es2015 I think.

Also, it is working in the webpack example, which uses the same @babel/preset-env preset so something related to browserify is probably the cause.

Zache commented 4 years ago

@SidOfc the docs for babelify has this: https://github.com/babel/babelify/blob/master/README.md#faq which explains that babelify won't transform dependencies unless they specify some config in their package.json

It looks like that config was added to Baobab in this commit: https://github.com/Yomguithereal/baobab/commit/cd5c6830e0c7220c94efe6f19ff7b9afb4e2ff7d

Which is in 2.5.1

So that's should be the problem

SidOfc commented 4 years ago

@Zache yes indeed, the config was added after 2.5.0 and indeed those changes are the problem, this is clear. The next question I think is why it only happens with browserify and not webpack, both use the same @babel/preset-env via babel config file and only browserify complains about missing (and deprecated) babel-preset-es2015.

Yomguithereal commented 4 years ago

So I refreshed the lib's dev deps and build process. It should fix your issue. I have released v2.5.3 on npm. I'll let you tell me if I can close the issue.

SidOfc commented 4 years ago

@Yomguithereal

Just tested this with the reproduction repo I created, bumped version to 2.5.3 and the error no longer appears. I made a new commit, will archive the repo's I created as well.

Nice upgrade to Babel 7 btw :D

Thank you very much for the quick fix! I think this can be closed.