CODEWITHSUNDEEP
reactjsnpmwebpack
teobais
teobais

Reputation: 2956

Improve a react component's webpack configuration

I am quite newbie with React and Webpack, so I have a (maybe trivial) question:

I have recently created the react-scroll2top-button component.

What I don't like, though is the fact that my users have to provide the following configuration:

.jsx

import Scroll2TopButton from 'react-scroll2top-button/Scroll2TopButton';

webpack.config.js

module: {
    loaders: [
      {
        ...,
        include: [path.resolve(__dirname, 'node_modules/react-scroll2top-button/Scroll2TopButton')],
        ...
      }
    ]
  }

Is there any optimal way to get rid of this ugly configuration? I would like my users to be able to use my component by just importing it, like:

import Scroll2TopButton from 'react-scroll2top-button';

and nothing more.

I used the term "ugly", since I am almost sure that there is a way to fix this, after having seen that this is the way the rest of react components work. Maybe I am missing something really crucial, but that's why I came here, to also learn the proper way of doing this, since I have already done it twice and I think it is not that handy.

Thodoris

Upvotes: 0

Views: 63

Answers (1)

Oro
Oro

Reputation: 1867

Your package is missing an entry point.

Add an index.js file and export Scroll2TopButton as default:

import Scroll2TopButton from './Scroll2TopButton.jsx';

export default Scroll2TopButton;

Or simply rename Scroll2TopButton.jsx to index.js.

Upvotes: 3

Related Questions