Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v2] gatsby build error: replaceHistory not an api #7

Open
mattbag opened this issue Aug 25, 2018 · 24 comments
Open

[v2] gatsby build error: replaceHistory not an api #7

mattbag opened this issue Aug 25, 2018 · 24 comments

Comments

@mattbag
Copy link

@mattbag mattbag commented Aug 25, 2018

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 gatsbyjs/gatsby#5213 which is virtually solved by this very good plugin I think.

Thanks

@pojntfx

This comment has been minimized.

Copy link

@pojntfx pojntfx commented Aug 25, 2018

Can confirm on Gatsby 2.0.0-rc.0.

@MantasMikal

This comment has been minimized.

Copy link

@MantasMikal MantasMikal commented Aug 31, 2018

Getting the same error on Gatsby@next
Any solutions?

@mongkuen

This comment has been minimized.

Copy link
Owner

@mongkuen mongkuen commented Sep 1, 2018

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:
#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

This comment has been minimized.

Copy link
Author

@mattbag mattbag commented Sep 1, 2018

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

@bogdancss

This comment has been minimized.

Copy link

@bogdancss bogdancss commented Sep 20, 2018

any chance this will get ported to v2?

@discovrbookings

This comment has been minimized.

Copy link

@discovrbookings discovrbookings commented Oct 4, 2018

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

@d-ivashchuk

This comment has been minimized.

Copy link

@d-ivashchuk d-ivashchuk commented Oct 25, 2018

I would also love this to be supported in V2

@bogdancss

This comment has been minimized.

Copy link

@bogdancss bogdancss commented Nov 27, 2018

Any updated on a V2 ?

@dorukde

This comment has been minimized.

Copy link

@dorukde dorukde commented Nov 29, 2018

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

@bogdancss

This comment has been minimized.

Copy link

@bogdancss bogdancss commented Nov 29, 2018

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

This comment has been minimized.

Copy link

@dorukde dorukde commented Dec 1, 2018

@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

This comment has been minimized.

Copy link

@aprather51 aprather51 commented Dec 1, 2018

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

This comment has been minimized.

Copy link

@dorukde dorukde commented Dec 1, 2018

@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

This comment has been minimized.

Copy link

@aprather51 aprather51 commented Dec 1, 2018

@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

This comment has been minimized.

Copy link

@d-ivashchuk d-ivashchuk commented Dec 1, 2018

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

This comment has been minimized.

Copy link

@aprather51 aprather51 commented Dec 5, 2018

Link to the post

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

@richhauck

This comment has been minimized.

Copy link

@richhauck richhauck commented Jan 13, 2019

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

This comment has been minimized.

Copy link

@rvetere rvetere commented Feb 4, 2019

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

please publish! ❤️🙃

@patricklittle

This comment has been minimized.

Copy link

@patricklittle patricklittle commented Apr 27, 2019

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.

@Polcius

This comment has been minimized.

Copy link

@Polcius Polcius commented Apr 28, 2019

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

This comment has been minimized.

Copy link
Owner

@mongkuen mongkuen commented Apr 28, 2019

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

This comment has been minimized.

Copy link

@runofthemill runofthemill commented May 3, 2019

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/

@Polcius

This comment has been minimized.

Copy link

@Polcius Polcius commented May 3, 2019

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

This comment has been minimized.

Copy link

@ovsw ovsw commented May 3, 2019

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.