React import from parent directory

Question

I am unable to import file from parent of project directory. To make things as simple as possible, I created new react-native project and file 'test.js' in a parent directory. I tried to import it with this code:

var Test = require('../test.js');

and

import Test from ('../test.js');

None of these worked - when run in xcode I have following error:

uncaught error Error: UnableToResolveError: Unable to resolve module ../test.js from /Users/UserName/Downloads/TestReact/index.ios.js: Invalid directory /Users/UserName/Downloads/test.js

Is it possible to import file from parent directory with react-native? I̶ ̶k̶n̶o̶w̶ ̶i̶t̶ ̶w̶o̶r̶k̶s̶ ̶w̶i̶t̶h̶ ̶r̶e̶a̶c̶t̶J̶S̶.

Regards

edit - adding code

test.js

'use strict';

import React, {Component,View,Text} from 'react-native';

  class Test extends Component{
  render(){
    return (
    <View>
      <Text>
        SAMPLE TEXT
      </Text>
    </View>
    );
  }
}
module.exports = Test;

index.ios.js

'use strict';
import React, {AppRegistry, View} from 'react-native';
import Test from '../test.js';

var TestReact = React.createClass({
  render: function() {
    return (
      <View><Test/></View>
    );
  }
});

AppRegistry.registerComponent('TestReact', () => TestReact);

edit - added files hierarchy: screenshot

edit - actually I was wrong, it's impossible with web react too. When I try to build I got following error:

Module parse failed: /path_to_file/aaa1.js Line 1: Unexpected token You may need an appropriate loader to handle this file type.

So adding react tag to the question.

It should definitely work like you have it. Can you post your code from test.js ? Thanks. — Nader Dabit
– Nader Dabit, Commented Nov 26, 2015 at 15:23
@NaderDabit But I believe content of test.js doesn't even matter, this error occurs even when I put there something as simple as export default var a = 10; — Maciej S
– Maciej S, Commented Nov 26, 2015 at 18:12
Could you add a file/directory hierarchy? And also i think this is not main mistake but, anyway text.js you named it instead on test.js — user5548116
– user5548116, Commented Nov 26, 2015 at 18:37
Have you tried to put a test.js file into your TestReact folder? it should work definitely. — user5548116
– user5548116, Commented Nov 26, 2015 at 18:49

Oleksiï Nikonov · Accepted Answer · 2019-09-13 11:03:35Z

14

Try this ./../Component.js. It works for me. More over if you need access a component from adjacent directory ./../AdjDir/Component.js

edited Sep 13, 2019 at 11:03

answered Aug 24, 2018 at 19:06

Oleksiï Nikonov

5,6566 gold badges48 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Newton Over a year ago

That doesn't make much sense to me--the default resolvers know how to handle relative directories whether you start with the current or parent directory. It's more likely the OP's config was broken, but almost everything is different than it was three years ago anyway.

Maciej S Over a year ago

@DaveNewton yep, it was many years ago and I didn't manage to solve this issue. I don't know about current version of react native, but I'm still getting upvotes from time to time .

Gangula · Accepted Answer · 2021-05-10 06:16:36Z

11

This problem may be because react only allows you to import from the src folder. So all resources have to placed in this directory.

Also when you go more than two parent directories back you need to use this syntax: ../../../myfolder/myFile.js going back 2 parent directories

edited May 10, 2021 at 6:16

Gangula

7,8005 gold badges54 silver badges95 bronze badges

answered Nov 11, 2019 at 9:43

Ruben Rick

1111 silver badge2 bronze badges

1 Comment

Design by Adrian Over a year ago

React supports loading from anywhere, but not Create-React-App in your example.

stanley_manley · Accepted Answer · 2020-08-25 20:37:58Z

6

finally a stack overflow question I can answer:

Simply add below jsconfig.json to the base route of your react folder. (Assuming you put all of your react code in "src" folder)

example_react_app
  ---> public
  ---> src
  ---> jsconfig.json

jsconfig.json file content

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": ["src/*"]
    }
  }
}

edited Aug 25, 2020 at 20:37

answered Aug 19, 2020 at 16:32

stanley_manley

3244 silver badges11 bronze badges

Comments

Narayan Shrestha · Accepted Answer · 2019-11-11 10:18:57Z

2

I looks fine to me . Did you tried with just

import Test from '../test';

instead of

 import Test from '../test.js';

And also try without small bracket "( )";

I solved my issue with this. Hope it helps.

edited Nov 11, 2019 at 10:18

answered Nov 11, 2019 at 10:06

Narayan Shrestha

7899 silver badges19 bronze badges

Collectives™ on Stack Overflow

React import from parent directory

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related