CODEWITHSUNDEEP
reactjs
NothingOriginal
NothingOriginal

Reputation: 3

reactjs file structure clarification

I'm fairly new to reactJS and looking for some clarification. I have a fairly simple reactJS application with several components and a utility javascript file containing functions I would like to be able to call from each component.

My util.js file looks something like this:

export function printMe(txtToPrint){
     console.log(txtToPrint);
}
export function addUs(a,b){
     return a + b;
}

my ComponentA looks something like this:

import React, {Component} from 'react';
import  {printMe, addUs} from './util';
...

and my folder structure looks like:

/src
/src/components/componentA/componentA.js
/src/util.js

when I run the application, I receive an error stating:

Module not found: './util' 'src/components/componentsA'

However, when I change the import statements on the componentA to look like this:

import React, {Component} from 'react';
import  {printMe, addUs} from '../../util';

Everything works. I am/was under the impression ./ is location of src. Is it not the case?

Upvotes: 0

Views: 51

Answers (1)

Moe
Moe

Reputation: 3713

The urls are relative to the file where they are declared.

If you're inside componentA.js:

./ is inside the componentA folder,

../ is inside the components folder,

../../ is inside the src folder. That's why this one works

Check this for more info: https://webpack.github.io/docs/resolving.html#resolving-a-relative-path

Upvotes: 2

Related Questions