title: Using self made npm package in react. Failed to compile
body: <p>I followed <a href="https://zellwk.com/blog/publish-to-npm/" rel="nofollow noreferrer">https://zellwk.com/blog/publish-to-npm/</a> to create my custom npm package (<a href="https://www.npmjs.com/package/demo-to-publish" rel="nofollow noreferrer">https://www.npmjs.com/package/demo-to-publish</a>).
  The folder structure of my custom package is as follows:</p>
  
  <ol>
  <li>src -> index.js</li>
  <li>node_modules</li>
  <li>List item</li>
  <li>Lable.js</li>
  <li>package.json</li>
  <li>webpack.config.js</li>
  </ol>
  
  <p>Content of my package.json is as follows:</p>
  
  <pre><code>{
    "name": "demo-to-publish",
    "version": "1.0.5",
    "description": "testing publishing to npm",
    "main": "./src/index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "webpack-dev-server --open --mode development",
      "build": "webpack --mode production"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "@babel/core": "^7.8.4",
      "@babel/preset-env": "^7.8.4",
      "@babel/preset-es2015": "^7.0.0-beta.53",
      "@babel/preset-react": "^7.8.3",
      "babel-loader": "^8.0.6",
      "webpack": "^4.41.5",
      "webpack-cli": "^3.3.10",
      "webpack-dev-server": "^3.10.3"
    },
    "dependencies": {
      "babel-preset-es2015": "^6.24.1",
      "react": "^16.12.0"
    }
  }
  </code></pre>
  
  <p>Contents of my index.js in src folder are as follows:</p>
  
  <pre><code>import React, { Component } from "react";
  
  export default class Button extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;button&gt;Click me&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Contents of my webpack.config.js are as follows:</p>
  
  <pre><code>module.exports = {
    entry: "./src/index.js",
    output: {
      filename: "index.js"
    },
    module: {
      rules: [
        {
          test: /\.js$|jsx/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env","@babel/preset-react"]
            }
          }
        }
      ]
    }
  };
  </code></pre>
  
  <p>After publishing it to npm I installed it using <code>npm i demo-to-publish</code> in my new react cra app. I wrote the following code to use this package.</p>
  
  <pre><code>import Button from "demo-to-publish";
  &lt;Button/&gt;
  </code></pre>
  
  <p>The error I am facing is in the screenshot attached below.</p>
  
  <p><a href="https://i.stack.imgur.com/T7AcC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T7AcC.png" alt="enter image description here"></a></p>
  
  <p>How to resolve this issue? 
  Help me out as this is my first time publishing an npm package.</p>