title: Relative vs. non-relative module import for custom modules
body: <p><strong>Update[09/12/2017 16:58 EST]</strong> </p>
  
  <p>Added reason why I hesitate to use the natively-supported non-relative import with my own modules to the bottom of this question.</p>
  
  <p><strong>Update[09/12/2017 12:58 EST]:</strong> </p>
  
  <p>Per request, I made the file structure below reflect my actual use case. Which is a nested view module requesting a utility module somewhere up the directory tree.</p>
  
  <hr>
  
  <p>Per request</p>
  
  <p>In both TypeScript and ES6, one can import custom module by</p>
  
  <pre><code>// Relative
  import { numberUtil } from './number_util';
  // OR
  // Non-relative
  import { numberUtil } from 'number_util';
  </code></pre>
  
  <p>And according to TypeScript docs (<a href="https://www.typescriptlang.org/docs/handbook/module-resolution.html" rel="nofollow noreferrer">link</a>), one should:</p>
  
  <blockquote>
    <p>... use
    relative imports for your own modules that are guaranteed to maintain
    their relative location at runtime.</p>
    
    <p>... Use non-relative paths when importing any
    of your external dependencies.</p>
  </blockquote>
  
  <p>My problem here is that I have a project structure like this:</p>
  
  <pre><code>project/
    |--utils
    |    |--number_util.ts
    |--views
    |    |--article_page
    |         |-- editor_view
    |                |--editor_text_area.ts
  </code></pre>
  
  <p>And when I include <code>utils/number_util</code> inside my <code>editor_text_area</code> module, the import statement looks like: </p>
  
  <pre><code>import { numberUtil } from './../../../utils/number_util';
  </code></pre>
  
  <p>Which is long and not readable and, worst of all, difficult to maintain: whenever I need to move <code>editor_text_area</code>, I will have to update each these relative paths, when in the meantime I can just use the non-relative way of</p>
  
  <pre><code>import { numberUtil } from 'utils/number_util';
  </code></pre>
  
  <p>Does anyone have any suggestions on how best to do module imports to achieve the highest readability and maintainability?</p>
  
  <hr>
  
  <p>But using the non-relative way poses a problem (other than that it is not recommended by official docs): what if I installed an <code>npm</code> module that has the same name with the module I'm importing? On that note, it is not as <strong>safe</strong> as the uglier alternative mentioned above.</p>