title: Module parse failed: Unexpected token - React
body: <p>i am trying to create a react component as a npm package and was following this link <a href="https://medium.com/quick-code/publish-your-own-react-component-as-npm-package-under-5-minutes-8a47f0cb92b9" rel="nofollow noreferrer">https://medium.com/quick-code/publish-your-own-react-component-as-npm-package-under-5-minutes-8a47f0cb92b9</a> and I am pretty new to this.</p>
  
  <p>This is the error I am getting when I run npm.start</p>
  
  <pre><code>ERROR in ./src/index.js 6:4
  Module parse failed: Unexpected token (6:4)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
  |   const { width, height, color, text } = props;
  |   return (
  &gt;     &lt;div
  |       style={{
  |         width: width || 100,
  </code></pre>
  
  <p>I looked online and seems to an issue with webpack.config but I am not sure where it is wrong in mine.</p>
  
  <p>These are my files</p>
  
  <p>webpack.config</p>
  
  <pre><code>var path = require('path');
  module.exports = {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'index.js',
      libraryTarget: 'commonjs2'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          include: path.resolve(__dirname, 'src'),
          exclude: /(node_modules|bower_components|build)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        }
      ]
    },
    externals: {
      'react': 'commonjs react' 
    }
  };
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>    {
      "presets": ["env"],
      "plugins": [
          "transform-object-rest-spread",
          "transform-react-jsx"
      ]
  }
  </code></pre>
  
  <p>src/index.js</p>
  
  <pre><code>import React from "react";
  
  const ReactColorSquare = props =&gt; {
    const { width, height, color, text } = props;
    return (
      &lt;div
        style={{
          width: width || 100,
          height: height || 100,
          backgroundColor: color || "blue"
        }}
      &gt;
        {text}
      &lt;/div&gt;
    );
  };
  
  export default ReactColorSquare;
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "reactnpmpackage",
    "version": "1.0.0",
    "description": "",
    "main": "build/index.js",
    "scripts": {
      "start": "webpack --watch",
      "build": "webpack",
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "react": "^16.13.1",
      "webpack": "^4.43.0"
    },
    "devDependencies": {
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.3",
      "babel-loader": "^8.1.0",
      "babel-plugin-transform-object-rest-spread": "^6.26.0",
      "babel-plugin-transform-react-jsx": "^6.24.1",
      "babel-preset-env": "^1.7.0",
      "webpack-cli": "^3.3.11"
    }
  }
  </code></pre>
  
  <p>Here is my project structure</p>
  
  <p><a href="https://i.stack.imgur.com/PP2Qn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PP2Qn.png" alt="enter image description here"></a></p>
  
  <p>Could you please correct where I am getting it wrong..</p>