I'm quite new to flow, I'm getting a flow error importing an image in react-native:

import EditIcon from '../../../../../assets/images/edit-icon.png';

<Image
   style={imageStyle}
   source={EditIcon}
/>

I get this error:

"cannot resolve module RelativeImageStub"

This is my flowconfig where I have the RelativeImageStub

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\|pdf\)$' -> 'RelativeImageStub'

I'm quite new to flow, I'm getting a flow error importing an image in react-native:

import EditIcon from '../../../../../assets/images/edit-icon.png';

<Image
   style={imageStyle}
   source={EditIcon}
/>

I get this error:

"cannot resolve module RelativeImageStub"

This is my flowconfig where I have the RelativeImageStub

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\|pdf\)$' -> 'RelativeImageStub'

• javascript
• react-native
• flowtype

• Please post the code. – Bilal Hussain Commented Jun 19, 2018 at 10:42
• Hi @Graeme, what OS are you working on? ie where this issue happened? – JackDev Commented Oct 5, 2018 at 9:57
• Seems to only have happened on a windows machine for us, not mac or linux. – JackDev Commented Oct 5, 2018 at 10:08

2 Answers 2

Instead of matching the whole module name, you can use extension matcher.

Change:

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\|pdf\)$' -> 'RelativeImageStub'

To:

module.name_mapper.extension='\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)' -> 'RelativeImageStub'

This is happening because there is no flow definition file.

A work-around to remove the error is to create a stub.

With flow-typed installed (e.g. npm i -g flow-typed), execute the following in your project's root directory:

flow-typed create-stub [email protected]