Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Import file based on relative path in JavaScript

I have such project structure:

- MyApp
`- firstFolder
 `- firstFile.js
`- secondFolder
 `- thirdFolder
  `- thirdFile.js

How can I import firstFile.js from thirdFile.js?

Something like import myFunc from '../firstFolder/firstFile'; in thirdFile.js, doesn't work.

like image 843
Yurii N. Avatar asked Feb 13 '17 17:02

Yurii N.


People also ask

How do I add a relative file path?

Relative path Relative paths make use of two special symbols, a dot (.) and a double-dot (..), which translate into the current directory and the parent directory.

What is relative path in JS?

A link that has an absolute path will tell the computer which server to go to and then all the folders that you have to drill down through to get to the target. A link that has a relative path will be written to tell the computer how to get from the folder with the currently viewed topic to the target.

What is in import path?

The import path is a list of locations that may name file system paths or zip files.

What is a relative path Example?

A relative path needs to be combined with another path in order to access a file. For example, joe/foo is a relative path.


3 Answers

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
like image 133
abc123 Avatar answered Oct 24 '22 06:10

abc123


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.

like image 30
Elmar Zander Avatar answered Oct 24 '22 06:10

Elmar Zander


use=>

import myFunc from '../../firstFolder/firstFile';

or

import * as myFunc from '../../firstFolder/firstFile';
like image 31
Vishnu Mishra Avatar answered Oct 24 '22 07:10

Vishnu Mishra