Using package react-transition-group

šŸ™‹Get Help
1

I am trying to add Transitiongroups (react-transition-group, https://reactcommunity.org/react-transition-group) to have a more smooth render when clicking on link,

When install the package using npm and add it to frontity.settings.js I am getting the following error:

  TypeError: Cannot convert undefined or null to object
      at Function.keys (<anonymous>)
      at getKeys (webpack-internal:///./node_modules/deepmerge/dist/umd.js:2:1009)
      at mergeObject (webpack-internal:///./node_modules/deepmerge/dist/umd.js:2:1282)
      at deepmerge (webpack-internal:///./node_modules/deepmerge/dist/umd.js:2:2056)
      at eval (webpack-internal:///./node_modules/@frontity/core/src/utils/merge-packages.ts:8:484)
      at Array.forEach (<anonymous>)
      at __webpack_exports__.default (webpack-internal:///./node_modules/@frontity/core/src/utils/merge-packages.ts:8:226)
      at __webpack_exports__.default (webpack-internal:///./node_modules/@frontity/core/src/server/store.ts:5:271)
      at eval (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:47:68)
      at runMicrotasks (<anonymous>)

Any ideas on how to solve this?

2

Hey @phn can you provide a repo or a codesandbox reproducing the error you are facing? This way the community will be able to help you better.

1 Like
3

Hi @Pablo, thanks for the shout - The Repo can be found be here: https://github.com/pichichi91/hei-integration.ch

THe changes are avaialable at the following branch:

5

Hi @phn,

The repository you provide https://github.com/pichichi91/hei-integration.ch doesnā€™t seem to be available anymore

In order to provide the best possible help as quickly and as efficiently as possible, we recommend providing the info suggested here

The more info you provide about your issue the better.
Providing a repo or code-sandbox with your code is especially helpful to find solutions of technical issues with specific code

1 Like
8

Hi @juanma, I revoked the public access again as I was not expecting any more contributes in here. But the main problem was that I was adding the modules in frontity.settings.js, but Iā€™ve read that in another thread in the community that it works perfectly in the package.json inside the template-package as I did with the following imports:

{
  "name": "@frontity/mars-theme",
  "version": "1.4.3",
  "description": "A starter theme for Frontity",
  "keywords": [
    "frontity",
    "frontity-theme"
  ],
  "homepage": "https://frontity.org",
  "license": "Apache-2.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/frontity/frontity.git"
  },
  "bugs": {
    "url": "https://community.frontity.org"
  },
  "dependencies": {
    "@frontity/components": "^1.3.3",
    "@frontity/html2react": "^1.3.4",
    "frontity": "^1.9.0",
    "mailgo": "^0.9.15",
    "react-icons": "3.11.0"
  }
}
9

Hi @phn, do you have a short example how you implement react-transition-group. I tried to use CSSTransition for rendering components, and it works, except for Post component, short example:

<CSSTransition
          in={data.isPost}
          timeout={300}
          unmountOnExit
          onEntered={() => { console.log("post enter") }}
          onExit={() => { console.log("post exit") }}
        >
          <Post />
</CSSTransition>

When the Post component is unmounted, i get a error:
ā€œTypeError: Cannot read property ā€˜undefinedā€™ of undefinedā€ for

 const data = state.source.get(state.router.link);
 const post = state.source[data.type][data.id]; <-- undefined

Someone have an idea to solve this problem? My plan is to make some complex animations using the enter / exit hooks with react transition group and use timelines with gsap library.

Thanks!

10

Hi @eugenregehr have you solved it yet? I am not sure which one anymore, but Iā€™ve found a pretty good example in the showcases and I did replicate this.

My code looked something like this:

const Theme = ({ state }) => {
  const transitions = useTransition(state.router.link, link => link, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: { duration: 650 }
  });

  const current = state.source["data"][state.router.link];

  return (
    <>
      <Title />
      <Global styles={globalStyles} />
      <NavBar />
      <SimpleReactLightbox>
        <Main className={state.theme.isMobileMenuOpen ? "hide--page" : ""}>
          {transitions.map(({ item, props, key }) => {
            const data = state.source.get(item);
            return (
              <animated.div key={key} style={props}>
                <Absolute>
                  <Body>
                    <Switch>
                      <Loading when={data.isFetching} />
                      <Error when={data.is404} />
                      <PortFolio when={data.isPortfolioOverview} data={data} />
                      <PortFolioItem when={data.isPortfolio} data={data} />
                      <List when={data.isArchive} data={data} />
                      <Post when={data.isPostType} data={data} />
                    </Switch>
                  </Body>
                  <Footer className="footer" />
                </Absolute>
              </animated.div>
            );
          })}
        </Main>
      </SimpleReactLightbox>
      <FullNavigation />
    </>
  );
};

I did it all on on the index instead of the Post.js

1 Like
11

Hi @phn, it looks good, I will test it at the next opportunity. For my project I realized that i had to write the animation logic by myself because the page transitions are more complex. But thank you for the example, maybe it will help someone else.