title: Importing self-created libraries in reactjs
body: <p>I'm using <code>React</code> and <code>ES6</code> using <code>babel</code> and <code>webpack</code>. I am very new to this ecosystem.</p>
  
  <p>I am trying to import some common utility functions into my jsx file but react is unable to find the file</p>
  
  <p><strong><em>homepage.jsx</em></strong></p>
  
  <pre><code>var pathToRoot = './../..';
  import path from 'path';
  import React from 'react';
  import ReactDOM from 'react-dom';
  var nextWrappedIndex = require(path.join(pathToRoot,'/lib/utils.js')).nextWrappedIndex;
  
  //some react/JSX code
  </code></pre>
  
  <p><strong><em>utils.js</em></strong></p>
  
  <pre><code>var nextWrappedIndex = function(dataArray) {
      //some plain js code
      return newIndex;
  }
  
  exports.nextWrappedIndex = nextWrappedIndex;
  </code></pre>
  
  <p>Directory structure is as follows:</p>
  
  <pre><code>src
  |--app.js
  |--components
  |  |--homepage
  |     |--homepage.jsx
  |
  |--lib
  |  |--utils.js
  </code></pre>
  
  <p>I am on a windows 10 machine and was facing issues during compilation providing the path by any other means. Using <code>path.join</code> solved compilation issue but the browser while rendering throws this error
  <code>Uncaught Error: Cannot find module '../../lib/utils.js'.</code></p>
  
  <p>How do I accomplish this?</p>
  
  <p>Also, is this the best way to do it(if altogether it is way it is supposed to be done in such ecosystem)?</p>