Slava Ukraini!


This page contains outdated information and may no longer work as expected.

Absolute imports with TypeScript and Webpack

Published: | Modified: 

Fully Qualified Namespaces allow you to use absolute import paths instead of the relative hell that typically exists.

- import { Something } from '../../../models/something';
+ import { Something } from '@/models/something';

Normally when using imports, we would reference the path from the relative location of the file you are importing to.

Import syntax

import Language from '@/app/components/Language';
import { LanguagePicker, ListType } from '@/app/components/LanguagePicker';

// or require
const iconAll = require('@/icons/infinity.svg');

// or await import
async function infinityIcon() {
    return await import('@/icons/infinity.svg');

Configuring the tsconfig.json file

You just need to add the paths section to the compiler options of the TypeScript configuration file.

// tsconfig.json

  "compilerOptions": {
  "paths": {
    "@/*": [

Notice for Webpack users

If you are using Webpack to bundle, you are going to need to add the following to your configuration

// webpack.conf

module.export = {
  resolve: {
    alias: {
      '@': '/src',
    extensions: ['.ts', '.tsx', '.js', '.json'],