Получение «Недопустимого вызова» при использовании require с Typescript и Expo

Я пытаюсь воспроизвести звук в приложении, созданном с помощью expo-cli.

Код написан на машинописном языке, и код нарушения выглядит следующим образом, взятым из документация expo.io:

import * as React from 'react'
import { WorkoutComponent } from "./WorkoutExecutor";
import { Audio } from 'expo';

export default class AudioPlayer {

    private async playAudio(fileName: string) {
        console.info("Playing Audio: " + fileName);
        const soundFile = './assets/sounds/' + fileName + '.mp3';
        try {
            const { sound: soundObject, status } = await Audio.Sound.createAsync(
              require(soundFile),
              { shouldPlay: true }
            );
            // Your sound is playing!
          } catch (error) {
              console.info(error);
            // An error occurred!
          }

    }
[...]
}

Когда приложение загружается, оно выдает следующую ошибку, даже не дойдя до экрана со звуком

[...]\src\AudioPlayer.ts:Invalid call at line 13: require(soundFile)

Я понимаю, что в примере coe используется javascript, а не машинописный текст, но что мне не хватает?

Мой tsconfig.json взят из примера машинописного текста выставки и выглядит так:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "jsx": "react-native",
    "module": "es2015",
    "moduleResolution": "node",
    "noEmitHelpers": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    // Using the type definitions in @types/expo becuase they are still better than the ones provided by expo. See SvgScreen.tsx and SystemFontsScreen.tsx.
    "paths": {
      "expo": [
        "../node_modules/@types/expo",
        "../node_modules/expo"
      ],
    },
    "skipLibCheck": true,
    "strict": true,
    "target": "es2017"
  },
  "exclude": [
    "node_modules"
  ]
}
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
3
0
2 752
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Мне помогли через Twitter, и проблема в том, что require() не работает с динамическими значениями. Это также объясняет, почему ошибки возникали еще до того, как приложение было загружено, поскольку оно пыталось устранить require во время сборки или загрузки, а не во время выполнения, как я думал.

Это объясняет ошибку. А у вас есть решение?

cheesus 28.10.2020 15:15

Я исправил это с помощью

import song from "./path_to_song/song.mp3"

Но это работает только со статическими значениями, известными при запуске приложения. Моя проблема заключалась в том, что я пытался загрузить файл, имя которого я не знал при загрузке приложения. В итоге я использовал другой метод для загрузки файла.

morras 28.08.2020 08:23

> В итоге я использовал другой метод загрузки файла. Какой метод? xkcd.com/979

Myzel394 07.02.2022 22:00
import * as React from 'react'
import { WorkoutComponent } from "./WorkoutExecutor";
import { Audio } from 'expo';

const fileA = require('path/to/sound/file.mp3');
const fileB = require('path/to/sound/file2.mp3');

export default class AudioPlayer {

    private async playAudio(fileName: string) {
       if (fileName == 'A') {
           var soundFile = fileA;
       } else {
           var soundFile = fileB;
       }
       try {
          const { sound: soundObject, status } = await Audio.Sound.createAsync(
          soundFile,
          { shouldPlay: true }
        );
        // Your sound is playing!
      } catch (error) {
          console.info(error);
        // An error occurred!
      }

}
[...]
}

Другие вопросы по теме