I am encountering an error while trying to import .mp3 files into my Vue/Typescript app. Upon running 'npm serve', I am presented with the following message:
ERROR in /Users/***/***/application/src/components/Sampler.vue(80,16):
80:16 Cannot find module '@/assets/samples/A1.mp3'.
78 | import { Component, Prop, Vue } from 'vue-property-decorator';
79 | import * as Tone from 'tone';
> 80 | import A1 from '@/assets/samples/A1.mp3';
Despite this error occurring, the app still functions correctly and plays the media files as intended. However, it leads to a failure in the production build.
A similar situation arose with a .svg file, which I was able to resolve by referring to this post and creating a shims-svg.d.ts file containing the following code:
declare module '*.svg' {
import Vue, {VueConstructor} from 'vue';
const content: VueConstructor<Vue>;
export default content;
}
While attempting to address the issue with .mp3 files specifically by replicating the process with '.svg', the problem persists without a resolution.
Some users have suggested that the problem may lie in specifying paths in tsconfig, however, after double-checking my configuration below, I do not believe that is the source of the issue:
"paths": {
"@/*": [
"src/*",
"./*"
]
If anyone has any insights on how to tackle this challenge for other types of files, your input would be greatly appreciated.