Using external react package like "react-rangeslider" causing "cannot read property "RangeSlider" of undefined

Hi,

I have the following case. I’ve created a npm-package with the following component which is using react-rangeslider package.

import React from "react";
import Slider from "react-rangeslider";

import "../../assets/stylesheets/scss/components/atoms/range-slider.scss";

export const RangeSlider = props => {
    const { name, value } = props;
    
    return (
        <div className="slider">
            <span className="slider__name">{name}</span>
            <div className="slider__value">
                $ {value}
            </div>
            <Slider
                min={0}
                max={2000}
                orientation="horizontal"
                step={25}
                {...props}
            />
        </div>
    )
};

• After package-publish, if I’m trying to import the RangeSlider component from my published-package, i’m getting the following error: TypeError: Cannot read property 'RangeSlider' of undefined.

• If I’m removing import Slider from "react-rangeslider"; and <Slider min={0} max={2000} orientation="horizontal" step={25} {...props} /> and publish the package again, the import will work properly.

I’m have the above error each time when I’m trying to export/import a component which is using an external npm-package.

Could you tell me please if I’m missing any config options for create-react-library package?

[LukaszNowakPL]

@florentinhetriuc @nxmohamad @ronaiza-cardoso It seems it happens whatever package you try to consume. I even tested author’s example react-under-construction with same issue.

However after few days of trying I’ve found some walkaround. If your package needs to consume some other package (i.e. by import Button from 'react-bootstrap/es/Button') you must:

• insert the package on dependencies of you package.json
• mention this package on module.exports.externals of your config/webpack.config.prod.js

module.exports = {
	...
	externals: {
		react: 'react',
		'react-dom': 'react-dom',
		'react-bootstrap': 'react-bootstrap',
	},
	...
};

I really don’t know if it’s hack, tricky walkaround or why does it work now. Configuration and dealing with webpack, babel and so on is really not my point of interests. It just works and push me further with my projects 😃

[golike]

Thanks @VictorHeringer, this solution worked for me. Hoping there aren’t any hidden drawbacks to this approach.