import module from a sub folder in react js

Question

Hello i am just learning ReactJs, I am trying to import a module from a sub folder in react, here is my folder structure

-src
---components
-----layout
-------Header.js
-------Navigation.js
-----fakeAuth.js

From the Header.js module, i am trying to import the fakeAuth from the parent (component), but it seems it can't call module or am i just missing something?

I already tried the following

import fakeAuth from './fakeAuth'
import fakeAuth from '././fakeAuth'
import fakeAuth from '../../fakeAuth'

Still no luck, i know this will be easy for some. Thanks

here i my fakeAuth.js, which is from the react-router-dom tutorial.

module.exports  = {
    isAuthenticated: false,
    authenticate(cb) {
      this.isAuthenticated = true;
      setTimeout(cb, 100); // fake async
    },
    signout(cb) {
      this.isAuthenticated = false;
      setTimeout(cb, 100);
    }
  };

Module not found: You attempted to import ../../../fakeAuth.js which falls outside of the project src/ directory. — Wassapaks
– Wassapaks, Commented Feb 18, 2018 at 12:49
can you post what you have in fakeauth.js? Did you export something there? — G_S
– G_S, Commented Feb 18, 2018 at 12:50
Edit: since I saw your edit now, it seems that the import would be '../faceAuth'` — Pedro Lopes
– Pedro Lopes, Commented Feb 18, 2018 at 12:51
sorry i edited the location of the fakeAuth.js with the same path as the layout directory. I can call the fakeAuth module when on the same directory or from a partent, but i cant call it from the sub directory. — Wassapaks
– Wassapaks, Commented Feb 18, 2018 at 12:52
In your scenario wrt folder structure, ../faceAuth should work. There should be something about your faceauth — G_S
– G_S, Commented Feb 18, 2018 at 12:58

G_S · Accepted Answer · 2018-02-18 13:04:25Z

4

It should be import fakeAuth from '../fakeAuth'

You just have to go 1 folder up where you have fakeAuth.js file. adding '..' does that.

answered Feb 18, 2018 at 13:04

G_S

7,1302 gold badges27 silver badges54 bronze badges

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

Comments

Divyanshu Maithani · Accepted Answer · 2018-02-18 13:03:48Z

1

Since you're using module.exports you can import in the following fashion inside Header.js:

import { isAuthenticated, authenticate, signout  } from "../fakeAuth";

CodeSandbox Demo

answered Feb 18, 2018 at 13:03

Divyanshu Maithani

15.1k2 gold badges39 silver badges48 bronze badges

2 Comments

Wassapaks Over a year ago

Thanks Div, but @G_S helped me out first.

Divyanshu Maithani Over a year ago

No problem, probably this helps if you're looking to import the contents of your module ;)

Collectives™ on Stack Overflow

import module from a sub folder in react js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related