Importing self-created libraries in reactjs
<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>