Search code examples
javascriptreactjswebpackbabeljsrsuite

How do I import a single component from this library?

I'd like to understand how to use Babel, webpack or whatever the tool I need to import a single component from a library.

Here https://rsuitejs.com/en/guide/usage when you scroll down to 'Use modularized rsuite' they say that I need to install babel-preset-rsuite and then add a .babelrc file, but with this in it:

{
  "presets": ["rsuite"]
}

I've done it, and it still does not import the .less styles. So I end up with an HTML button without the nice styling that goes with it.

(I'm a bit titled, have tried every possible thing and nothing works, I just broke my entire codebase because of another webpack issue, fortunately I was able to recover it thanks to my VCS)

Can someone, please, explain the beginner that I am what exactly do I have to do? Do I have to run a specific command instead of react-scripts start so that it takes this .babelrc file into account?

Thanks

Solution

  • OFF:

    To use a single component from a library:

    1. Install a library

    2. Import the necessary component:

      import { Example } from 'example-installed-library'

    ON:

    And related to babel, I recommend this article to read: https://www.valentinog.com/blog/react-webpack-babel/

    And of course it's own site with documentation: https://babeljs.io/