Unable to resolve module for local file (React Native)

Question

I'm bizarrely getting an error that a local file import can't be resolved by React Native.

Unable to resolve module `./components/MyComponent" from ".//App.js`: could not resolve `/Users/myusername/Desktop/mylibrary/components/MyComponent' as a file nor as a folder","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]},"type":"bundling_error"}"

mylibrary/App.js:

import React from 'react'; import { View, Text, StyleSheet, ScrollView, AsyncStorage, } from 'react-native'; import MyComponent from './components/MyComponent';

mylibrary/components/MyComponent.jsx:

import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class MyComponent extends React.Component { render() { <View> {this.props.children} </View> } }

I tried renaming the file to be lowercase (mycomponent.jsx), and it didn't make a difference. I also tried restarting my simulator and resetting the cache, and it also didn't help.

If I'm not mistaken the import statement by default try to import .js files, try renaming MyComponent.jsx to MyComponent.js — Eduardo Macêdo
– Eduardo Macêdo, Commented Jan 22, 2018 at 0:49

Eduardo Macêdo · Accepted Answer · 2018-01-22 00:52:20Z

The import statement by default try to import .js files, try renaming MyComponent.jsx to MyComponent.js.

Quoting the MDN:

The module to import from. This is often a relative or absolute path name to the .js file containing the module, excluding the .js extension. Certain bundlers may permit or require the use of the extension; check your environment. Only single quotes and double quotes Strings are allowed.

Unfortunately that doesn't work either. :( Error becomes Unable to resolve module './components/mycomponent.js' from ".//App.js': could not resolve /Users/myusername/Desktop/mylibrary/components/mycomponent' as a file nor as a folder","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]},"type":"bundling_error"}"
@zahabba You changed the filename to lowercase? Make sure the filename case match the one you're trying to import.

sebastianf182 · Accepted Answer · 2018-01-22 04:35:46Z

The component is wrong. You are not returning anything in the render method. Try this:

render() { return( <View> {this.props.children} </View> ) }

Collectives™ on Stack Overflow

Unable to resolve module for local file (React Native)

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related