Cannot find module with Webpack, Typescript, custom module directory
<h1>What I'm trying to do</h1>

<p>I am wrote a dummy module <strong>my-component</strong> which essentially exports a single class <strong>Something</strong>. I placed it in <strong>app/modules/</strong>. Now I am tying to access it using the import Syntax from <strong>app/app.js</strong>:</p>

<pre><code>import { Something } from 'my-component';
</code></pre>

<p><strong>Expectation</strong>: With my current Webpack configuration (below) I would expect this to work.</p>

<p><strong>Actual</strong>: This throws the error:</p>

<pre><code>ERROR in [default] /&lt;project_dir&gt;/app/app.ts:1:26
Cannot find module 'my-component/Something'.
</code></pre>

<h1>What I tried to fix it</h1>

<p>I know the module in itself is defined correctly, because</p>

<ol>
<li>I can import it using a relative path: <code>import { Something } from './my-component'</code></li>
<li>I can import it as-is, if I move the module to <code>node_modules/my-component</code>.</li>
</ol>

<p>The only combination that fails is importing it without a relative path from my <strong>modules/</strong> directory. So I think the issue might be my Webpack configuration.</p>

<h1>Setup Details</h1>

<p>As you can see below, I have two directories listed as <strong>resolve.root</strong>:</p>

<ul>
<li><code>project_dir/app</code></li>
<li><code>project_dir/node_modules</code></li>
</ul>

<p>It seems to manage to resolve from <code>node_modules</code>, just not from <code>app</code>.</p>

<p><strong>Project layout</strong></p>

<pre><code>                               Webpack
project_dir/
 ├── app/                      context, resolve.root
 │    ├── app.ts
 │    └── my-component/
 │         ├── index.ts
 │         └── Something.ts
 ├── webpack.config.js
 ├── node_modules/             resolve.root
 │    ├── ...
 │    ├── ...
 │    └── ...
 └── dist/
      └── ...
</code></pre>

<p><strong>app/app.ts</strong></p>

<pre><code>import { Something } from 'my-component/Something';
</code></pre>

<p><strong>app/my-component/index.ts</strong></p>

<pre><code>export { Something } from './Something'
</code></pre>

<p><strong>app/my-component/Something.ts</strong></p>

<pre><code>class Something {
}

export { Something };
</code></pre>

<p><strong>webpack.config.js</strong></p>

<pre><code>var path = require('path'),
  ROOT = path.resolve(__dirname, '.');

module.exports = {
  context: path.resolve(ROOT, 'app'),
  entry: 'app.ts',
  output: {
    path: path.resolve(ROOT, 'dist'),
    filename: '[name]-[hash].js'
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'awesome-typescript' }
    ]
  },
  resolve: {
    root: [
      path.resolve(__dirname, 'app'),
      path.resolve(__dirname, 'node_modules')
    ],
    extensions: [
      '', '.ts', '.js'
    ]
  }
};
</code></pre>

<p><strong>EDIT</strong>
Fixed the project layout.</p>