Issue adding new 3rd party library

Adding 3rd party npm packages stops application

=> i am trying to add https://www.npmjs.com/package/react-slick to frontity project

=> in order to do that i ran following command in project root
npm install react-slick --save


which updated my package.json file

=> after that i updated frontity.settings.js

=> after that when i run following command
npx frontity dev

i am seeing following error in cmd prompt

and following error in browser

=> if i remove package name from frontity.settings.js application starts working again

=> i tried same thing with other 2 other 3rd party npm packages but they all are throwing same error

Hi @jignesh.nextbits,

The frontity,settings.js file is the place to configure your Frontity project. This configuration includes setting which Frontity packages are going to be used in your Frontity project.

Frontity Packages are a special type of NPM packages as they’re specifically built to work with Frontity and their role in a Frontity project is to encapsulate specific logic in a way than can be shared and transformed across projects.

For example, some packages you can see in your frontity.settings.js are:

So, to use non-frontity-packages or 3rd party libraries, you can directly import them in your React app like in any other React app. This is, you don’t need to add these 3rd party libraries in your frontity.settings.js

For example, in the twentytwenty-theme you can see how it has react-spring as a dependency

twentytwenty-theme/package.json

{
  "name": "@frontity/twentytwenty-theme",
  ...
  "dependencies": {
    ...
    "react-spring": "^8.0.27"
  }
}

And then it’s used like with any other React app at some point in the code

twentytwenty-theme/src/components/search/search-modal.js

...
import { useTransition, animated } from "react-spring";
...

const SearchModal = ({ state, actions }) => {

  ...
  const transitions = useTransition(isSearchModalOpen, null, {
    from: { transform: "translate3d(0,-100%,0)" },
    enter: { transform: "translate3d(0,0px,0)" },
    leave: { transform: "translate3d(0,-100%,0)" },
  });
  
  return (
    <>
      <div>
        {transitions.map(
          ({ item, key, props }) =>
            item && (
              <animated.div key={key} style={props}>
                   ...
              </animated.div>
            )
        )}
      </div>
    </>
  );
};

export default connect(SearchModal);
`;

Hope this helps

1 Like

you guys are awesome

i just dont wanna complain that it should have been mentioned in https://docs.frontity.org/learning-frontity/packages page because you guys are so fast in replying…

thank you very much

really appreciate

slider is rocking and rolling now

1 Like

I have created this issue to add this clarification in that page

Feel free to add any more feedback to the issue.

You’re also welcome to directly contribute to the docs and request any change you think it can improve them. Here you have some guidelines to contribute to the docs in case you want to directly request some changes → https://github.com/frontity/docs/blob/master/CONTRIBUTING.md

Thanks for your feedback!

1 Like