псевдоним webpack не разрешается должным образом в функции класса React

Question

Я пытаюсь воспроизвести аудиофайл из динамического объекта данных, но получаю следующую ошибку:

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)

Вот мой App.js

import React, { Component } from 'react';
import styles from './App.scss';
import characterData from 'api/characterData';

class App extends Component {
  state = {
    characters: [...characterData]
  }

  playAudio = srcFile => {
    const importedAudioFile = require(srcFile);
    const characterAudio = new Audio(importedAudioFile);
    characterAudio.play();
  }

  render() {
    return (
      <div className={styles.characterCard}>
        {this.state.characters.map(({ audio, name }) => {
          return (
            <div
              className={styles.characterCard}
              key={name}
              onClick={() => this.playAudio(audio)}
            >
              <h3>{name}</h3>
            </div>
          )
        })}
      </div>
    );
  }
}

export default App;

characterData.js выглядит так:

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'
    },
];

Структура моей папки выглядит следующим образом:

└── src
    ├── api
    ├── audio
    |  ├── chewie.mp3
    |  ├── darthbreath.mp3
    |  ├── leiasound.mp3
    |  ├── obisound.mp3
    |  └── tie.mp3
    ├── components
    ├── containers
    |  └── App
    ├── images
    ├── index.js
    ├── styles
    └── utils

Я извлек из create-react-app, и обе конфигурации веб-пакетов почти идентичны, за исключением реализации sass-loader и правок resolve.alias, которые выглядят так:

...
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
},
...

const aliases = require('./aliases'); находится вверху каждой из моих конфигураций веб-пакетов, а aliases.js выглядит так:

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')
}

Если я жестко кодирую srcFile в App.playAudio до 'audio/chewie.mp3', это работает. Не знаете, куда идти.

Answer 1

Если вы намерены использовать characterData в качестве макета для API, быстрый (но не очень расширяемый способ) будет просто потребовать аудиофайл в вашем экспорте из characterData.Проблема, с которой вы сталкиваетесь, заключается в том, что веб-пакет, когда он запускается во время сборки, не знает, что для вас комплектовать.Если вам нужны ресурсы, которые вам явно не нужны, вы можете проверить require.context

веб-пакета

Answer 2

С алиасом проблем нет, но с динамическим импортом попробуйте: https://www.npmjs.com/package/dynamic-file-require