Breaks build using latest Babel

[mhaagens]

Toplevel Unhandled rejection { Error: Cannot find module '@babel/runtime/helpers/builtin/extends'
   at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/node_modules/react-spring/dist/web.cjs.js:7:32)
...

[TrySound]

Are you sure? babel runtime has fixed version and should be loaded without problems.
https://unpkg.com/react-spring@5.6.8/package.json

[framerate]

Yeah I'm sure this is happening. It could be version mismatching, but it happens if you do a rm -rf node_modules && npm install over the last few days

Seems to be a problem with babel/runtime

@TrySound I'm still trying to track down exactly the fix, but this thread seems to be having the same problem: jquense/yup#216

[drcmda]

the latest is published with a pinned

  "dependencies": {
    "@babel/runtime": "7.0.0-rc.3"
  },

does this still cause issues? I could of course not use transform-runtime but it would impact the bundle size negatively. But this isn't the first time i've run into babel issues since going babel 7. I was hoping the release candidates would stabilize things a little.

[TrySound]

This error may come from another module which doesn't pin babel runtime version.

[dariocravero]

I had a similar issue after upgrading my dependencies today. 2 out 3 installed packages that depend on @babel/runtime are using different versions of it:

viewstools [master*] $ find node_modules -maxdepth 2 -name package.json -exec grep "@babel/runtime" {} \; -print

    "@babel/runtime": "7.0.0-beta.42",
node_modules/react-scripts/package.json
    "@babel/runtime": "7.0.0-beta.42",
node_modules/react-error-overlay/package.json
    "@babel/runtime": "7.0.0-rc.3"
node_modules/react-spring/package.json

The one from react-scripts wins -I'm using react-scripts@next. react-scripts is a direct dependency of the project and react-spring is included through another package. I wonder if it has anything to do with that.

It might also be a module resolution issue because react-spring has the right babel package installed on its node_modules.

Installing @babel/runtime in my own package and pinning it to 7.0.0-rc.3 doesn't fix it either. After doing this, 7.0.0-rc.3 is installed in the main node_modules and 7.0.0-beta.42 is inside react-scripts/node_modules. However, the resolution still fails. If I were to require @babel/runtime/helpers/builtin/extends.js in a node repl, it finds it alright. So I'm thinking, might this be an issue with how webpack is resolving the modules?

The only workaround I could find so far is to remove the older version of @babel/runtime inside react-scripts/node_modules. Hopefully libraries upgrading to the soon to be released (this week it seems?) babel 7 will sort these inconsistencies out.

This ended up being more of a brain dump, it may help others that are stuck with the same issue!

[drcmda]

@dariocravero thanks for figuring this out, you think it would make sense to forward this to babel, or just wait it out and hope for the best ...

[dariocravero]

To be honest, I don't think it's their issue. It sounds more like a bundler's module resolution problem instead.

[framerate]

I'm sure it's old news to you guys, but looks like babel 7 officially was released today so hopefully this is all just a transitional problem.

[TrySound]

Will submit pr today

[drcmda]

the latest release is actually on b7 already, i have also unpinned babel-transform

[framerate]

@drcmda - I went to update my project tonight for the fix and notice the guy who programmed it is using v4.2.1. I tried to update to v5.X and everything just exploded.

Is there documentation somewhere for the breaking changes? Otherwise I seem to get the babel/loader error every time I npm i

[drcmda]

@framerate the api is mostly consistent, there were a few minor changes regarding, and the addition of keyframes (which changed drastically in 5 as it was only an experimental feature back then). Is it a babel issue or can you run the app and it crashes later on? If you want post a snippet or screenshot of a spring or transition and i can tell you immediately if there's something with it.

https://github.com/drcmda/react-spring/blob/ff4580c211bc59b45d4980db137601e771204723/CHANGELOG.md

[drcmda]

Anyone still suffering from babel issues? I've updated our company projects to babel 7 as well now, many of them use spring, haven't run into any troubles so far.

[drcmda]

Going to close this for now, if anything comes up i can re-open, though now that babel is finally stable, deploying with babel-runtime should be ok now.

[Zneider]

I'm still experiencing this issue.
Seems that this is the actual path of the dependencies of [react-spring/dist/web.js]:

import _extends from '@babel/runtime/helpers/es6/extends' (esm changed to es6)
import _inheritsLoose from '@babel/runtime/helpers/es6/inheritsLoose'
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/es6/objectWithoutPropertiesLoose'

Not sure what exactly is the problem, but maybe an issue caused by create-react-app using another babel version?

[drcmda]

I did this:

create-react-app test
cd test
yarn add react-spring
yarn start

and in src/App.js

import React, { Component } from 'react'
import { Spring } from 'react-spring'

class App extends Component {
  render() {
    return (
      <Spring from={{ opacity: 0 }} to={{ opacity: 1 }}>
        {props => <div style={props}>test</div>}
      </Spring>
    )
  }
}

export default App

It seems to work fine.

[fev4]

I'm experiencing this issue with the latest version of react-spring, Next.JS and next-transpile-modules. Here's the reproduction repo. Any thoughts on what I could try?

[drcmda]

there are a couple of open threads about this. you need to either pick the commonjs export, because node/next doesn't understand the import statement, or teach it to handle esm.