Import file based on relative path in JavaScript
Solution 1
Description
Here are the pathing options:
../
will go back 1 folder, this is why we go back two folders:
import myFunc from ../../firstFolder/firstFile
So ..
takes us back to secondFolder
then we need to go back one more folder ..
into the MyApp
folder. Now we can traverse forward into firstFolder
then point to firstFile
.
or ./
- this is the present working directory (pwd), which will be thirdFolder
from here we will need to go back 2 directories or ../..
import myFunc from ./../../firstFolder/firstFile
Other directory pathing options:
Since you didn't specify the full paths these are incomplete
/
- will start at the root directory of the Operating System
import myFunc from /fullPathtoProject/MyApp/firstFolder/firstFile
~/
this is the current users home directory
import myFunc from ~/pathFromHomeDirectory/MyApp/firstFolder/firstFile
Solution 2
If you use webpack you can tweak the loader to search for files relative to your base directory. Change your webpack.config.js
to this
resolve: {
modules: [
path.resolve('./'),
path.resolve('./node_modules')
]
},
or, if your sources are all relative to ./src
, use path.resolve('./src')
. If you want to be more specific you can also take a look at resolve.alias
(see the webpack docs here: https://webpack.js.org/configuration/resolve/)
BTW: I'm using next.js in my application, which has its own webpack config, but you can modify it if you put something like
const path = require('path');
module.exports = ({
webpack: (config, options) => {
config.resolve.modules.push( path.resolve('./') )
return config
},
})
into your next.config.js
, in order to modify the default one.
Solution 3
use=>
import myFunc from '../../firstFolder/firstFile';
or
import * as myFunc from '../../firstFolder/firstFile';
Solution 4
in ES5:
You should use two '..' to back 1 folder level
var myFunc = require('../../firstFolder/firstFile');
ES6 (ecmascript6):
import myFunc from '../../firstFolder/firstFile';
Yurii N.
Updated on April 13, 2022Comments
-
Yurii N. about 2 years
I have such project structure:
- MyApp `- firstFolder `- firstFile.js `- secondFolder `- thirdFolder `- thirdFile.js
How can I import
firstFile.js
fromthirdFile.js
?Something like
import myFunc from '../firstFolder/firstFile';
inthirdFile.js
, doesn't work.-
abc123 over 7 years
import ../../firstFolder/firstFile.js;
orimport ./firstFolder/firstFile.js
-
Shilly over 7 yearsHave you tried '../../firstFolder/firstFile', since you need to go two dirs up?
-
Yurii N. over 7 years@abc123 second answer doesn't work.
-
Michael Freidgeim almost 4 years
-
-
abc123 over 7 years@YuriyN. try
/
instead of./
that is a nodejs reference -
Yurii N. over 7 yearsThanks for the answer! But abc123 was answered it first.
-
abc123 over 7 years@YuriyN. k, then you'll need to use
../
, can you try~/
, also are you just using these as the first character? can you post the full strings? -
Yurii N. over 7 yearsI'll try all, and then write results, but I can say now, with certainty, that second variant doesn't work, it relates to current folder.
-
Yurii N. over 7 yearsNothing work, I tried all these cases, but it doesn't work.
-
Matt Yoon almost 3 yearsThe example
import myFunc from ./firstFolder/firstFile.js
is wrong. Single.
references the current directory. -
matanster almost 3 yearsUsing just a slash prefix rather than
./
works for me with a modern browser. The tilda variant does not. So I think that as is, together with the previous comment this answer is too wrong to be here. -
abc123 about 2 years@matanster updated answers with more context; let me know if you desire more.
-
abc123 about 2 years@MattYoon you are correct
-
abc123 about 2 years@YuriiN. Please link to questions or give more detail for assistance.