When importing the audio file using Typescript, make sure you don't have brackets around the filename.

import audioFile from "./audio_test_sound.mp3"


Using require() worked for me

<img id="spriteSheet" src={require("../assets/spritesheet.gif")} hidden={true} />


If you use create-react-app to setup your React project. You can try to add the follow lines in your react-app-env.d.ts:

declare module '*.mp3' {
  const src: string;
  export default src;

When you try to import a mp3 file in *.tsx, typescript compiler will try to find out its declaration, the same way as you import another class file. But when you try to require a mp3 file, like this:

<audio src={require('./assets/xxx.mp3')}>

ts will not try to find its declaration, but handle it to webpack loader. This why in this way there is no compile error.

Related Query

More Query from same tag