javascript - import module from a sub folder in react js - Stack Overflow

admin管理员组

文章数量:1405393

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
---ponents
-----layout
-------Header.js
-------Navigation.js
-----fakeAuth.js

From the Header.js module, i am trying to import the fakeAuth from the parent (ponent), 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);
    }
  };

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
---ponents
-----layout
-------Header.js
-------Navigation.js
-----fakeAuth.js

From the Header.js module, i am trying to import the fakeAuth from the parent (ponent), 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);
    }
  };

• javascript
• reactjs

Share Improve this question Follow edited Feb 18, 2018 at 12:59 Wassapaks asked Feb 18, 2018 at 12:48 WassapaksWassapaks 43544 silver badges1414 bronze badges 8

• 1 Module not found: You attempted to import ../../../fakeAuth.js which falls outside of the project src/ directory. – Wassapaks Commented Feb 18, 2018 at 12:49
• can you post what you have in fakeauth.js? Did you export something there? – 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 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 Commented Feb 18, 2018 at 12:52
• 1 In your scenario wrt folder structure, ../faceAuth should work. There should be something about your faceauth – G_S Commented Feb 18, 2018 at 12:58

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 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.

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

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

CodeSandbox Demo

本文标签： javascriptimport module from a sub folder in react jsStack Overflow