Learn how to import javascript or typescript modules with absolute paths in webpack & VSCode

Developers love productivity hacks. Get more done in less time, more time for... more coding? Something like that anyway, and I'm no different.

One of my favourite little productivity and "tidyness" hacks lately is absolute imports in javascript apps - the ability to import modules from an absolute path rather than a relative path.

Using relative imports works great for small projects and examples in blog posts, but for larger projects, relative imports can quickly become a nightmare.

Hopefully this tip helps you out too!

Note : this tip is specific to webpack. If you're not using webpack the first part of this will not work! The part pertaining to VSCode is still relevant.

What are relative and absolute module imports?

In javascript, relative module imports usually look something like this (in ES6);

// e.g. src/pages/index.js  

import myComponent from '../components/myComponent'  

import someUtil from './utils/someUtil'  

// ...  

In this example, the component myComponent is imported from the relative path ../components/myComponent.

Why is this path 'relative'? Because the path is relative to the current file. The single dot or double dots at the beginning of the import path, followed by the directory separator (slash) indicate a either the same directory as the current file or a directory one level above.

As you can see, if we have a large project with a deeply hierarchical directory structure, we might end up with relative imports like;

import myComponent from '../../../../myComponent'  

And that's going to get annoying real fast!

Why use absolute module imports?

Relative imports aren't all bad. I'm not saying never use them! On the contrary, it's a good idea to use relative module imports sometimes. For example if you have closely related files that might be considered part of the same larger module, which are probably located in the same directory, you would almost definitely want to use a relative import.

Much of the time, however, relative imports are used throughout the whole codebase, and this can get messy really quickly as the project grows in scale. Relative imports just work straight out-of-the-box. Zero config necessary. Whereas absolute imports require a (very) small amount of configuration.

Webpack configuration for absolute imports

To enable absolute imports we'll need to make a small change to our webpack config.

(Note: if you're using create-react-app you might have difficulty customizing your webpack config).

It's really easy to configure webpack to look for your source files using an absolute path. All we need to do is add some aliases to the resolve section of the webpack config.

For example a vanilla webpack.config.js might look like; (See the webpack docs on resolve settings).

module.exports = {  
  //...  
  resolve: {  
    alias: {  
      '@Components': path.resolve(\_\_dirname, 'src/components/'),  
      '@Utilities': path.resolve(\_\_dirname, 'src/utilities/')  
    }  
  }  
};  

Now we can use these aliases like;

import myComponent from '@Components/myComponent'  

import someUtil from '@Utilities/someUtil'  

Which is awesome! No longer do we need to know where the component we want is relative to our current file. Nice!

Use webpack alias in VSCode

Being able to import our components and utilities with absolute paths is awesome. But it can still get annoying typing out "@Components/myComponent..." every time.

Fortunately the lovely people behind visual studio code thought of this. You can use a jsconfig.js file in the root of your project to tell VSCode about your webpack aliases.

Add a file called jsconfig.js to the root of your project with the following code;

// jsconfig.json  

{  
  "compilerOptions": {  
    "baseUrl": ".",  
    "paths": {  
      //Assuming your components/utilities live in ./src  
      //Update this path as necessary  
      "@Components/\*": ["./src/Components/\*"],  
      "@Utilities/\*": ["./src/Utilities/\*"]  
    }  
  },  
  //Add any build/compiled folders here to stop vscode searching those  
  "exclude": ["node\_modules", "build"]  
}  

You might need to update the paths in the config to match your project. This config assumes your components folder is in ./src which may or may not be the case.

Now you should have absolute webpack imports that work in vscode

Hopefully this quick tip helped you set up your project for faster, more productive development using absolute imports with webpack aliases.

Got more tips? Let me know! Everyone likes a good productivity hack!