Publish react js library as npm package with axios dependency gives TypeError: Cannot read property 'dispose' of undefined

manpreet Best Answer 3 years ago

I am trying to publish a reactjs npm package with dependency as axios. My aim is to fetch data inside npm package and display it on the dom.

But it gives me the following error when using on the react project

Uncaught (in promise) TypeError: Cannot read property 'dispose' of undefined
    at Object../node_modules/react-dev-utils/webpackHotDevClient.js (webpackHotDevClient.js:45)
....
Uncaught Error: Iframe has not been created yet.
    at me (index.js:2087)
    at Object.window.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__.iframeReady (index.js:2097)
......

My lib code is on https://github.com/e06widu/create-react-library-e06widu and published library on https://www.npmjs.com/package/create-react-library-e06widu

in the package.json I added peerDependencies as follows

"dependencies": {},
  "peerDependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1"
  },

This is how I have used it on my project

    import {
      Example,
      SecondExample,
      DashBoard,
      Greeting
    } from 'create-react-library-e06widu';

    ........

      handleLoginClick = () => {
        console.log('Handle login click');
      }

      render() {

        const greeting = "From lib e06widu"
        return (
          <div>
            <p>Loginp>
            <button className="btn btn-primary" onClick={this.handleLoginClick}>Loginbutton>

            <h1>My React Componenth1>
            <Greeting greeting={greeting} login={this.handleLoginClick}/>
            <Example/>
            <SecondExample/>

          div>
        )
      }

...