React Webpack 4 Resolve Alias : <p>I'm having difficulty getting resolve alias to work in my React app using WebPack, and everything I've tried from google results don't seem to make a difference.</p>

<p>Here is my resolve from webpack.</p>

<p>C:\website\webpack.config.js</p>

<pre><code>resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: {
        apiAlias: path.resolve(__dirname, '/app/services/api/')
    }
}
</code></pre>

<p>Here is C:\website\app\components\Accounts\Accounts.js</p>

<pre><code>import ApiAccounts from '/apiAlias/ApiAccounts.js';
</code></pre>

<p>and I have a file located in C:\website\app\services\api\ApiAccounts.js
Changing the above line to the below works:</p>

<pre><code>import ApiAccounts from '../../services/api/ApiAccounts.js';
</code></pre>

<p>For fullness, here are my webpack dependencies:</p>

<pre><code>"devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.3",
    "webpack-dev-server": "^3.1.4"
 }
</code></pre>

<p>and yet I keep getting the error of </p>

<blockquote>
  <p>ERROR in ./app/components/Accounts/Accounts.js
  Module not found: Error: Can't resolve '/apiAlias/ApiAccounts.js' in 'C:\website\app\components\Accounts'</p>
</blockquote>

<p>Can anyone see anything obvious as to what I'm missing, or should try to try and get this working, or even if there is a way to debug webpack to see what path it is actually using if the alias is actually kicking in?</p>

<p>Thanks!</p>
