Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue


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}
  • 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?

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:11

github_iconTop GitHub Comments

LukaszNowakPLcommented, Feb 8, 2019

@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/
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 😃

golikecommented, Apr 22, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using external react package like "react-rangeslider" causing " ...
Using external react package like "react-rangeslider" causing "cannot read property "RangeSlider" of undefined.
Read more >
An collection of elegant slider components for React. Demo Page. Installing. The library is available as npm package. npm install reactrangeslider ...
Read more >
value is not defined" in react range slider - Stack Overflow
The variable value here is not defined: <Slider value={value} orientation="vertical" onChange={this.handleChange} />. Use the value in your ...
Read more >
[Solved]-React Undefined npm module-Reactjs
immer.js' when building a create react app through CLI · React Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property ......
Read more >
How to Read React Errors (fix 'Cannot read property of ...
Got an error like this in your React component? Cannot read property `map` of undefined. In this post we'll talk about how to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found