How to use NPM packages such as react-bootstrap?

🙋Get Help
,
#1

I am still pretty new with frontity, but I’m slowly getting to grips with it!

I was wondering how and if I can use most npm packages like ui kits or bootstrap? I have installed in with npm and tried adding the path to frontity.settings.js but to no success :frowning:

Can I get a point to the right direction or should I stop trying?

#2

Hi @loscar9

Welcome to the Frontity community.

You should be able to use most npm packages available in npmjs.com. What have your installed and what did you add to frontity .settings.js? Could you provide a link to a repo so that we can see your code. Thanks.

As an example of using a npm package with Frontity here’s a repo that uses antd.

#3

The example you provided helped me solve it!

I do have one other problem, for example with reactstrap I get a Babel error from default export syntax and it tells me to edit babel config file. I don’t want to do this so I have added the package fix as a dev dependency (@babel/plugin-syntax-export-default-from )

My question is now how do I add a dev dependency to the frontity settings file? Or alternatively could you show me how to edit the babel config?

#5

Hi @loscar9

I’m not expert in babel, but there’s some info here and here which may help you.

@David can you advise here?

#8

Sorry to keep this thread going but I’m back to having issues with modules!! For example this happens with both stripe and react-helmet. They have been installed in package.Json and also I have updated frontity.settings.Json packages to reflect so.

I have removed the packages abs they work without it. Is this todo with my setup or the package?

 TypeError: Cannot convert undefined or null to object
  at Function.keys (<anonymous>)
  at getKeys (webpack-internal:///./node_modules/deepmerge/dist/cjs.js:2:1009)
  at mergeObject (webpack-internal:///./node_modules/deepmerge/dist/cjs.js:6:213)
  at deepmerge (webpack-internal:///./node_modules/deepmerge/dist/cjs.js:8:379)
  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:61:68)
  at eval (webpack-internal:///./node_modules/koa-mount/index.js:16:290)
#9

Not a problem at all @loscar9. react-helmet is already included with Frontity - you shouldn’t need to install it separately. It could be useful if you provide a link to a repo so we can take a look at your code. Hopefully @David from our dev team will be able to shed some light here.

#10

Will do, what files would you need? I don’t want to share the main repo as it has sensitive parts.

What path is react-helmet saved under? I’m not currently at my desk so I can’t have a look!

#12

TBH it’s hard to know, we usually ask for a repo so we can see code in context of the whole project.

Can you reproduce the problem in a new project where you can share the repo?

It should be under node_modules.

Hopefully @David from our dev team will be able to chime in soon and provide greater insight.

#13

Hi @loscar9, I’ll try to give some insights here.

First, you don’t have to add all packages in the frontity.settings.js file, only those that are Frontity packages. A Frontity package is an NPM package with a specific folder structure that can interact with the Frontity framework and other Frontity packages, sharing state, actions and libraries between them. They need to be added in the frontity.settings.js file so the Frontity framework is aware of them. But, other packages don’t need to do so.

You can take a look at the documentation for more information: Core Concepts: 3. Packages

React Helmet is already included in Frontity (renamed to Head). You should import it from Frontity in order to use it in your components.

import { Head } from "frontity";

export const MyTitle = () => {
  return (
    <Head>
      <title>My Site Title</title>
    </Head>
  );
};

I hope this clarifies your doubts. :slightly_smiling_face: