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

[florentinhetriuc]

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?

[nazreen]

I'd like to know the same. @florentinhetriuc did you manage to solve it?

[florentinhetriuc]

Hey @nxmohamad. No. I wasn't able to solve the issue :(.

[nazreen]

@florentinhetriuc I'm going to email you

[ronaiza-cardoso]

Hi, I have the same problem, I'm trying to use this https://github.com/tannerlinsley/react-table#readme

[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 :-)

[nazreen]

thanks @LukaszNowakPL !

[florentinhetriuc]

thank you very much @LukaszNowakPL!

[golike]

Any further progress on this? The workaround seems to work for me, but it really is suboptimal that any app that uses my library needs to be aware of the dependencies that the library uses.

[victorheringer]

So, I was having the same problem and after commenting the splitChunks at webpack.config.prod.js:

 //splitChunks: {
 //  chunks: 'all',
 //  name: false,
 //},

It did the trick to me since it starts to generate a single index.js and index.css with all dependencies code. I don't know much about webpack and which implications this may cause (besides stop generating the chunks files) but solves my problem.

[golike]

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

[ivanjeremic]

@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 :-)

I followed this and added axios & react-router-dom now I get this error and I can't get it working, any ideas what I do wrong here and how to fix it?

Module not found: Can't resolve 'd:\Development\Packages\wurtzu\node_modules\babel-preset-react-app\node_modules\@babel\runtime/helpers/slicedToArray' in 'd:\Development\Packages\wurtzu\node_modules\react-dev-utils'```