title: webpack alias not resolving as expected within React class function
body: <p>I'm trying to play an audio file from a dynamic data object, but I'm receiving the following error:</p>
  
  <pre><code>App.js:12 Uncaught Error: Cannot find module "."
    at webpackMissingModule (App.js:12)
    at App._this.playAudio (App.js:12)
    at onClick (App.js:29)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:466)
    at executeDispatchesInOrder (react-dom.development.js:488)
    at executeDispatchesAndRelease (react-dom.development.js:586)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:597)
    at forEachAccumulated (react-dom.development.js:567)
    at runEventsInBatch (react-dom.development.js:728)
    at runExtractedEventsInBatch (react-dom.development.js:737)
    at handleTopLevel (react-dom.development.js:4201)
    at batchedUpdates (react-dom.development.js:12537)
    at batchedUpdates (react-dom.development.js:1939)
    at dispatchEvent (react-dom.development.js:4282)
    at interactiveUpdates (react-dom.development.js:12592)
    at interactiveUpdates (react-dom.development.js:1958)
    at dispatchInteractiveEvent (react-dom.development.js:4259)
  </code></pre>
  
  <p><br></p>
  
  <p>Here's my <code>App.js</code></p>
  
  <pre><code>import React, { Component } from 'react';
  import styles from './App.scss';
  import characterData from 'api/characterData';
  
  class App extends Component {
    state = {
      characters: [...characterData]
    }
  
    playAudio = srcFile =&gt; {
      const importedAudioFile = require(srcFile);
      const characterAudio = new Audio(importedAudioFile);
      characterAudio.play();
    }
  
    render() {
      return (
        &lt;div className={styles.characterCard}&gt;
          {this.state.characters.map(({ audio, name }) =&gt; {
            return (
              &lt;div
                className={styles.characterCard}
                key={name}
                onClick={() =&gt; this.playAudio(audio)}
              &gt;
                &lt;h3&gt;{name}&lt;/h3&gt;
              &lt;/div&gt;
            )
          })}
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><br></p>
  
  <p><code>characterData.js</code> looks like this:</p>
  
  <pre><code>export default [
      {
          name: 'Chewbaca',
          hp: 120,
          strength: 5,
          image: 'images/chewie.jpg',
          audio: 'audio/chewie.mp3'
      },
      {
          name: 'Darth Vader',
          hp: 150,
          strength: 7,
          image: 'images/darth.png',
          audio: 'audio/darthbreath.mp3'
      },
      {
          name: 'Princess Leia',
          hp: 160,
          strength: 8,
          image: 'images/leia.jpg',
          audio: 'audio/leiasound.mp3'
      },
      {
          name: 'Obi Wan Kenobi',
          hp: 115,
          strength: 6,
          image: 'images/obiwan.png',
          audio: 'audio/obisound.mp3'
      },
  ];
  </code></pre>
  
  <p>My folder structure looks like:</p>
  
  <pre><code>└── src
      ├── api
      ├── audio
      |  ├── chewie.mp3
      |  ├── darthbreath.mp3
      |  ├── leiasound.mp3
      |  ├── obisound.mp3
      |  └── tie.mp3
      ├── components
      ├── containers
      |  └── App
      ├── images
      ├── index.js
      ├── styles
      └── utils
  </code></pre>
  
  <p><br> </p>
  
  <p>I ejected from <code>create-react-app</code> and both webpack configs are nearly identical with the exception of implementing <code>sass-loader</code>, and the edits to <code>resolve.alias</code> which look like:</p>
  
  <pre><code>...
  alias:  {
    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    'react-native': 'react-native-web',
  
    // Custom Aliases
    ...aliases
  },
  ...
  </code></pre>
  
  <p><code>const aliases = require('./aliases');</code> is at the top of each of my webpack configurations and <code>aliases.js</code> looks like:</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    'api': path.resolve('src/api'),
    'audio': path.resolve('src/audio'),
    'components': path.resolve('src/components'),
    'containers': path.resolve('src/containers'),
    'images': path.resolve('src/images'),
    'variables': path.resolve('src/styles/variables.scss'),
    'mixins': path.resolve('src/styles/mixins.scss')
  }
  </code></pre>
  
  <p><br></p>
  
  <p>If I hardcode <code>srcFile</code> in <code>App.playAudio</code> to <code>'audio/chewie.mp3'</code>, it works. Unsure where to go from here.</p>