title: NODE_PATH and absolute imports with Laravel Mix and React?
body: <p>I'm trying to combine a React app into a Laravel project by putting my React code here: <code>MyLaravelProject/resources/assets/js</code>. I'd like to use <a href="https://laravel-mix.com/docs/2.1/mixjs" rel="nofollow noreferrer">Laravel Mix</a> to generate the React development build using <code>npm run dev</code>. </p>
  
  <p>My <code>webpack.mix.js</code> file: </p>
  
  <pre><code>let mix = require('laravel-mix');
  mix.react('resources/assets/js/index.js', 'public/js');
  </code></pre>
  
  <p>My <code>index.js</code> file:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter, Route } from 'react-router-dom';
  import Root from 'Root';
  import App from 'components/App';
  
  ReactDOM.render(
    &lt;Root&gt;
      &lt;BrowserRouter&gt;
          &lt;Route path='/' component={App} /&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Root&gt;,
    document.querySelector('#root')
  );
  </code></pre>
  
  <p>My problem is that all of my React app files are dependent on a <code>.env</code> file that contains <code>NODE_PATH=js/</code> to enable <a href="https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d" rel="nofollow noreferrer">absolute imports</a>. I get this error when I run <code>npm run dev</code>:</p>
  
  <pre><code>ERROR in ./resources/assets/js/index.js
  Module not found: Error: Can't resolve 'Root' in '/Users/MyUser/MyLaravelProject/resources/assets/js'
   @ ./resources/assets/js/index.js 4:0-24
   @ multi ./resources/assets/js/index.js
  
  ERROR in ./resources/assets/js/index.js
  Module not found: Error: Can't resolve 'components/App' in '/Users/MyUser/MyLaravelProject/resources/assets/js'
   @ ./resources/assets/js/index.js 5:0-33
   @ multi ./resources/assets/js/index.js
  </code></pre>
  
  <p>I can fix this error if I change my import statements to use relative paths, but this would be a headache to do this with all of my React files.</p>
  
  <pre><code>import Root from './Root;
  import App from './components/App;
  </code></pre>
  
  <p>I have tried the following changes to <code>.env</code> to no avail:<br>
  1) <code>NODE_PATH=resources/assets/js/</code><br>
  2) <code>NODE_PATH=./</code><br>
  3) <code>MIX_NODE_PATH=resources/assets/js/</code><br>
  4) <code>MIX_NODE_PATH=./</code>    </p>
  
  <p>I've also tried changing the <code>package.json</code> dev script by adding <code>NODE_PATH=./</code>.</p>
  
  <p>None of those changes the error message, so my problem appears to be that the path I define in <code>webpack.mix.js</code> is both the starting React app file and the absolute path. </p>
  
  <p>Do I need to change all of the paths in my React app files to relative paths or is there an easier way?</p>