How to integrate Backpack components into an existing project

[Nerogee]

This is a question instead of reporting a bug. Since there is less resource I can seek for help, so I put my question here.

Note: If you are looking to integrate Backpack components into an existing project, be aware that components are published uncompiled which means you'll need to accommodate for this in your webpack config.

I'm trying to integrate backpage into an existing project. But it fails

I think I miss some important step as what it mentions in note. Can anyone advise me how to accommodate for this in my webpack config?

[matthewdavidson]

Hi @Nerogee! Have a look at backpack-react-scripts - it's a fork of Facebook's Create React App with tweaks to the webpack configuration in order to support backpack components out of the box.

You can check out the webpack configuration inside (have a look in the dev and prod configs). Essentially we have added in a custom regex to include backpack components in babel-loader as well as sass compilation support. See this guide for more details.

Hope this helps!

[matthewdavidson]

Closing due to inactivity - feel free to reopen if you need info!

[georgegillams]

Hey @Nerogee

I appreciate it's a while since you raised this, so might not be at all relevant, but I've published an experimental package called backpack-transpiled which contains all the backpack React components, and uses transpiled js and CSS.

You can check it out here.
https://www.npmjs.com/package/backpack-transpiled

Usage is the same as documented on backpack.github.io, except you have to import from subdirectories within the package. eg:

import BpkButton from 'backpack-transpiled/bpk-component-button';

As I said it's experimental for now, and not officially supported by Backpack or Skyscanner, but it might help 🤷

[Amantel]

This is kinda sad that there are no guides (at least I have found none) that can help in this task. Most links from @matthewdavidson comment do not work at this point.
There is one webpack config now, but personally I have no idea what part of it should I merge to the nextjs one we are using.