[v2] gatsby build error: replaceHistory not an api

[mattbag]

I get this message during build:

• The plugin "gatsby-plugin-page-transitions@1.0.7" is exporting a variable named "replaceHistory" which isn't an API. And it fails. It works as expected on develop, for gatsby v2. There is also a discussion about pt https://github.com/gatsbyjs/gatsby/issues/5213 which is virtually solved by this very good plugin I think.

Thanks

[pojntfx]

Can confirm on Gatsby 2.0.0-rc.0.

[MantasMikal]

Getting the same error on Gatsby@next Any solutions?

[mongkuen]

Yeah... it's been frustrating as a plugin maintainer because Gatsby deprecated a bunch of their APIs when v2 came out.

We were discussing it a little over here, and I think there is an example of transitions for v2: https://github.com/mongkuen/gatsby-plugin-page-transitions/issues/5

Basically I think it'll probably require a rewrite, to change everything to the v2 gatsby APIs and support their new router choice.

I'm not sure when I'll have enough time to work on this, so I can't promise a timeline. I'm just as frustrated as you are, so I'll leave this issue open in case anybody else is wondering why it's not working on v2

[mattbag]

No worries! I think the core team will come up with an example and a plugin sooner or later. Thanks enjoy

[bogdancss]

any chance this will get ported to v2?

[darrenlma]

This may help... it allowed me to configure page transitions in V2 https://popmotion.io/pose/learn/route-transitions-reach-router/

[d-ivashchuk]

I would also love this to be supported in V2

[bogdancss]

Any updated on a V2 ?

[dorukde]

v2 documentation seems to support this, i guess that needs a 'note' or an update.

[bogdancss]

v2 documentation seems to support this, i guess that needs a 'note' or an update.

where did you see that ? last update was 4 months ago

[dorukde]

@b0gd4n I was looking at v2 plug-ins directory and then realised much later (thanks to discord group) that the information comes from the plug-in developer, not Gatsby itself. It is confusing since both v1 & v2 have plug-in pages. I thought plug-ins were filtered out if they were not supported.

[aprather51]

I'm having same issues, the error shows

error Your plugins must export known APIs from their gatsby-browser.js. The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?
See https://www.gatsbyjs.org/docs/browser-apis/ for the list of Gatsby Browser APIs
- The plugin "gatsby-plugin-page-transitions@1.0.7" is exporting a variable named "replaceHistory" which isn't an API.

[dorukde]

@aprather51

In my case, I had to use 'gatsby-plugin-layout' for my migration from v1 and v2 (the transition was applied in the layout).

Then, this worked: https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions

[aprather51]

@dorukde

'gatsby-plugin-layout' was already installed when I encounter issues. It did not resolve my issues when I added path inside gatsby-config.js

{
    resolve: `gatsby-plugin-layout`,
    options: {
        component: require.resolve(`${__dirname}/src/components/Layout.js`)
        }
    },

[d-ivashchuk]

Given all the confusion with regard to page transitions and gatsby-plugin-layout I've decided to write a short blog post where I covered all the possible bugs and how to solve them basing on some other Issues and comments of people.

I would much appreciate if anyone who looks through it and finds it useful and working confirms that there are no mistakes so I can publish it further.

Link to the post

[aprather51]

Link to the post

Thanks for the article, is there any way you could share repo? Nevermind, I found it.

[richhauck]

Really scratching my head as to why this remains a part of official documentation on the Gatsby site when implementing it just leads to a dead end. Thanks for the post @d-ivashchuk.

[rvetere]

@d-ivashchuk wow, your article is AMAZING! just works out of the box even in a more complex existing project! 😎

please publish! ❤️🙃

[patricklittle]

The Gatsby migration docs cover this here: https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#browser-api-replacehistory-was-removed

Replacing exports.replaceHistory with exports.onRouteUpdate in gatsby-browser.js solved the issue for me using Gatsby v2.

I can create a pull request if needed.

[el-pol]

Given all the confusion with regard to page transitions and gatsby-plugin-layout I've decided to write a short blog post where I covered all the possible bugs and how to solve them basing on some other Issues and comments of people.

I would much appreciate if anyone who looks through it and finds it useful and working confirms that there are no mistakes so I can publish it further.

Link to the post

This should be linked somewhere in the official Gatsby docs.

[mongkuen]

Sorry for the lack of updates, but effectively the set of features I built for v1 is simply not possible with v2.

I should've given the documentation an update and I apologize for causing quite the length of confusion users have had.

I've written a new README that has a detailed description of the issue (It's not simply changing replaceHistory with onRouteUpdate as the v1 > v2 documentation suggests), but the Gatsby team has still provided an example on how you could get page transitions to work and I've described why their approach works the way it does.

I'm leaving this issue open for comment, but hopefully this is helpful. Again, apologies for all the confusion this must've caused.

[runofthemill]

For those looking at the example @mongkuen linked to, and curious about using react-pose as mentioned for more complex transitions, this blog post I found may be helpful. FWIW, super easy implementation!

http://joshdcuneo.com/gatsby-animate-page-transitions/

[el-pol]

For those looking at the example @mongkuen linked to, and curious about using react-pose as mentioned for more complex transitions, this blog post I found may be helpful. FWIW, super easy implementation!

http://joshdcuneo.com/gatsby-animate-page-transitions/

IMO this is the best way to do it (at the moment), and I have tried a lot of ways. Thanks for sharing.

[ovsw]

Tried doing it using react-spring, but the result is too subtle.

If anyone wants to try and improve it, here's the code:

import React from 'react'
import { useTransition, animated, config } from 'react-spring'

const PageTransition = ({ children, location }) => {
  const newPageTransition = useTransition(location, item => item.key, {
    from: {
      position: 'absolute',
      width: '100%',
      opacity: 0,
    },
    enter: {
      opacity: 1,
    },
    leave: {
      opacity: 0,
    },
    config: config.gentle,
  })

  return newPageTransition.map(({ item, props, key }) => (
    <animated.div style={props} key={key}>
      {children}
    </animated.div>
  ))
}

export default PageTransition