mp3 file error

[ghost]

Adding an mp3 file into the project directory, running npm start, and reloading the application results in this error:

[10:55:08 AM] <START> request:/index.ios.bundle?platform=ios&dev=true
TypeError: unsupported file type
    at lookup (/Users/user/Dev/Apps/app/node_modules/image-size/lib/index.js:35:9)
    at /Users/user/Dev/Apps/app/node_modules/image-size/lib/index.js:93:22
    at /Users/user/Dev/Apps/app/node_modules/image-size/lib/index.js:50:9
    at /Users/user/Dev/Apps/app/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:82:15)

It seems like RN thinks the mp3 file is an image file, but because it is an unknown image type, image-size is throwing an error. The file has the .mp3 extension. How do I fix this issue?

• RN v0.21.0
• iOS
• Mac

[jaygarcia]

This is strange. Are you trying to include the file in your project at all?

[ghost]

I drop the file into my Xcode project and check both 'Copy item into it' and set target to my app. The same happens if I put the file outside the iOS folder.

It seems to happen to any file with audio extension; I've tried wav, mp3, mp4. They all throw the same error. I fixed the issue by removing the file extension. So I just use 'abc' instead of 'abc.mp3'.

Interestingly, I created a new RN project and this doesn't happen. My project was created with RN 0.19.0 and I recently upgraded to 0.21.0. The only thing I can think of is that something didn't go right during the upgrade, since new projects created with 0.21.0 doesn't seem to have the same problem.

[jsierles]

Perhaps you had an older version of the packager running?

Since this is not a problem with a standard install of 0.21, let's close this and see if it pops up again.

[ghost]

@jsierles The problem was with not running react-native upgrade. More specifically .flowconfig needed module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'

[arianitu]

I upgraded to 0.22 and I get TypeError: unsupported file type on node_modules/clone/test.html

What's that about?

[ghost]

@arianitu check if html is in .flowconfig file's module.name_mapper

[arianitu]

I was still using the old image API, like this:

<Image source={require('image!test')} />

This use to pull from Images.xcassets, but now it seems to pull from the project directory and found the test.html file inside of node_modules/clone/test.html

I think the fix is to move all assets out from xcassets and put them in my project and require them that way.

What a really confusing error, it was really hard to track down since it had no indication that this had anything to do with the image api.

[arianitu]

After converting to the new image API, I no longer get TypeError: unsupported file type and my project works.

[toearth]

[16:07:54] <START> request:/index.ios.bundle?platform=ios&dev=true TypeError: unsupported file type at lookup (node_modules/image-size/lib/index.js:35:9) at node_modules/image-size/lib/index.js:93:22 at node_modules/image-size/lib/index.js:50:9 at node_modules/graceful-fs/graceful-fs.js:43:10

I got the same error when I use the 0.27.2.

[toearth]

I have solved this problem by use new image api {uri: 'app_icon'}

[unmec]

I had the same problem and curiously I have only to use {{uri:'image.png'}} for images that have nested contents, then it worked.