[{"data":1,"prerenderedAt":614},["ShallowReactive",2],{"site-info":3,"\u002Fwriting\u002Fcreating-alias-for-package-imports-in-react":55},{"id":4,"title":5,"baseTitle":6,"body":7,"city":14,"description":11,"extension":15,"firstName":16,"lastName":17,"meta":18,"navigation":19,"path":35,"resumeUrl":36,"role":37,"seo":38,"socialLinks":39,"state":52,"stem":53,"__hash__":54},"siteInfo\u002Fsite-information.md","Site Information","| Front-End Software Engineer | Cincinnati, OH",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"Cincinnati","md","Dave","Berning",{},[20,23,26,29,32],{"name":21,"to":22},"About","\u002Fabout",{"name":24,"to":25},"Work","\u002Fwork",{"name":27,"to":28},"Writing","\u002Fwriting",{"name":30,"to":31},"Endorsements","\u002Fendorsements",{"name":33,"to":34},"Contact","\u002Fcontact","\u002Fsite-information","\u002Fresume","Front-End Software Engineer",{"description":11},[40,44,48],{"label":41,"href":42,"icon":43},"LinkedIn","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdavidberning\u002F","simple-icons:linkedin",{"label":45,"href":46,"icon":47},"GitHub","https:\u002F\u002Fgithub.com\u002Fdaveberning","simple-icons:github",{"label":49,"href":50,"icon":51},"Email","mailto:daveberning@icloud.com","lucide:mail","OH","site-information","NPLL1hH9hpVz07oyT1KXspbl9TxZpTQW2UUiJAMDAjs",{"id":56,"title":57,"body":58,"category":597,"description":598,"extension":15,"externalUrl":599,"featuredImage":600,"meta":601,"navigation":150,"path":602,"platform":599,"publishedAt":603,"readingTime":132,"seo":604,"status":605,"stem":606,"tags":607,"updatedAt":612,"__hash__":613},"writing\u002Fwriting\u002Fcreating-alias-for-package-imports-in-react.md","Creating Aliases for Package Imports in React",{"type":8,"value":59,"toc":591},[60,69,74,85,287,290,294,433,436,440,443,472,475,517,536,558,561,580,584,587],[61,62,63,64,68],"p",{},"The more I work in React, the more I love it. It's a very mature framework that is immensely popular. While working with the Vue CLI, there was one feature I really appreciated: a default alias for the ",[65,66,67],"code",{},"src"," directory. Having a Webpack alias for a commonly referenced directory eliminates fragile relative paths, produces cleaner code, and is much easier to read. Let's dive in.",[70,71,73],"h2",{"id":72},"importing-without-an-alias","Importing Without an Alias",[61,75,76,77,80,81,84],{},"Let's look at how messy imports get without an alias. Imagine that ",[65,78,79],{},"SomeComponent.jsx"," is nested deep within the directory structure and needs to import ",[65,82,83],{},"AnotherComponent.jsx"," from a few levels up.",[86,87,91],"pre",{"className":88,"code":89,"language":90,"meta":11,"style":11},"language-js shiki shiki-themes github-light github-dark","import React, { Component } from 'react';\nimport AnotherComponent from '.\u002F..\u002F..\u002F..\u002F..\u002F..\u002Fcomponents\u002FanotherComponent\u002FAnotherComponent';\nimport ProfileImage from '.\u002F..\u002F..\u002F..\u002F..\u002F..\u002F..\u002Fassets\u002Fprofile.jpg';\n\nclass SomeComponent extends Component {\n  render() {\n    return (\n      \u003Cdiv>\n        \u003Cimg src={ProfileImage} alt=\"My profile image!\" \u002F>\n        \u003CAnotherComponent \u002F>\n      \u003C\u002Fdiv>\n    );\n  }\n}\n\nexport default SomeComponent;\n","js",[65,92,93,116,130,145,152,171,180,189,202,231,242,252,258,264,270,275],{"__ignoreMap":11},[94,95,98,102,106,109,113],"span",{"class":96,"line":97},"line",1,[94,99,101],{"class":100},"szBVR","import",[94,103,105],{"class":104},"sVt8B"," React, { Component } ",[94,107,108],{"class":100},"from",[94,110,112],{"class":111},"sZZnC"," 'react'",[94,114,115],{"class":104},";\n",[94,117,118,120,123,125,128],{"class":96,"line":12},[94,119,101],{"class":100},[94,121,122],{"class":104}," AnotherComponent ",[94,124,108],{"class":100},[94,126,127],{"class":111}," '.\u002F..\u002F..\u002F..\u002F..\u002F..\u002Fcomponents\u002FanotherComponent\u002FAnotherComponent'",[94,129,115],{"class":104},[94,131,133,135,138,140,143],{"class":96,"line":132},3,[94,134,101],{"class":100},[94,136,137],{"class":104}," ProfileImage ",[94,139,108],{"class":100},[94,141,142],{"class":111}," '.\u002F..\u002F..\u002F..\u002F..\u002F..\u002F..\u002Fassets\u002Fprofile.jpg'",[94,144,115],{"class":104},[94,146,148],{"class":96,"line":147},4,[94,149,151],{"emptyLinePlaceholder":150},true,"\n",[94,153,155,158,162,165,168],{"class":96,"line":154},5,[94,156,157],{"class":100},"class",[94,159,161],{"class":160},"sScJk"," SomeComponent",[94,163,164],{"class":100}," extends",[94,166,167],{"class":160}," Component",[94,169,170],{"class":104}," {\n",[94,172,174,177],{"class":96,"line":173},6,[94,175,176],{"class":160},"  render",[94,178,179],{"class":104},"() {\n",[94,181,183,186],{"class":96,"line":182},7,[94,184,185],{"class":100},"    return",[94,187,188],{"class":104}," (\n",[94,190,192,195,199],{"class":96,"line":191},8,[94,193,194],{"class":104},"      \u003C",[94,196,198],{"class":197},"s9eBZ","div",[94,200,201],{"class":104},">\n",[94,203,205,208,211,214,217,220,223,225,228],{"class":96,"line":204},9,[94,206,207],{"class":104},"        \u003C",[94,209,210],{"class":197},"img",[94,212,213],{"class":160}," src",[94,215,216],{"class":100},"=",[94,218,219],{"class":104},"{ProfileImage} ",[94,221,222],{"class":160},"alt",[94,224,216],{"class":100},[94,226,227],{"class":111},"\"My profile image!\"",[94,229,230],{"class":104}," \u002F>\n",[94,232,234,236,240],{"class":96,"line":233},10,[94,235,207],{"class":104},[94,237,239],{"class":238},"sj4cs","AnotherComponent",[94,241,230],{"class":104},[94,243,245,248,250],{"class":96,"line":244},11,[94,246,247],{"class":104},"      \u003C\u002F",[94,249,198],{"class":197},[94,251,201],{"class":104},[94,253,255],{"class":96,"line":254},12,[94,256,257],{"class":104},"    );\n",[94,259,261],{"class":96,"line":260},13,[94,262,263],{"class":104},"  }\n",[94,265,267],{"class":96,"line":266},14,[94,268,269],{"class":104},"}\n",[94,271,273],{"class":96,"line":272},15,[94,274,151],{"emptyLinePlaceholder":150},[94,276,278,281,284],{"class":96,"line":277},16,[94,279,280],{"class":100},"export",[94,282,283],{"class":100}," default",[94,285,286],{"class":104}," SomeComponent;\n",[61,288,289],{},"Those relative paths are ugly — but more importantly, they're fragile. Move a component up a level and all its dependencies break. Failed to compile.",[70,291,293],{"id":292},"importing-with-a-webpack-alias","Importing With a Webpack Alias",[86,295,297],{"className":88,"code":296,"language":90,"meta":11,"style":11},"import React, { Component } from 'react';\nimport AnotherComponent from '@\u002Fcomponents\u002FanotherComponent\u002FAnotherComponent';\nimport ProfileImage from '@\u002Fassets\u002Fprofile.jpg';\n\nclass SomeComponent extends Component {\n  render() {\n    return (\n      \u003Cdiv>\n        \u003Cimg src={ProfileImage} alt=\"My profile image!\" \u002F>\n        \u003CAnotherComponent \u002F>\n      \u003C\u002Fdiv>\n    );\n  }\n}\n\nexport default SomeComponent;\n",[65,298,299,311,324,337,341,353,359,365,373,393,401,409,413,417,421,425],{"__ignoreMap":11},[94,300,301,303,305,307,309],{"class":96,"line":97},[94,302,101],{"class":100},[94,304,105],{"class":104},[94,306,108],{"class":100},[94,308,112],{"class":111},[94,310,115],{"class":104},[94,312,313,315,317,319,322],{"class":96,"line":12},[94,314,101],{"class":100},[94,316,122],{"class":104},[94,318,108],{"class":100},[94,320,321],{"class":111}," '@\u002Fcomponents\u002FanotherComponent\u002FAnotherComponent'",[94,323,115],{"class":104},[94,325,326,328,330,332,335],{"class":96,"line":132},[94,327,101],{"class":100},[94,329,137],{"class":104},[94,331,108],{"class":100},[94,333,334],{"class":111}," '@\u002Fassets\u002Fprofile.jpg'",[94,336,115],{"class":104},[94,338,339],{"class":96,"line":147},[94,340,151],{"emptyLinePlaceholder":150},[94,342,343,345,347,349,351],{"class":96,"line":154},[94,344,157],{"class":100},[94,346,161],{"class":160},[94,348,164],{"class":100},[94,350,167],{"class":160},[94,352,170],{"class":104},[94,354,355,357],{"class":96,"line":173},[94,356,176],{"class":160},[94,358,179],{"class":104},[94,360,361,363],{"class":96,"line":182},[94,362,185],{"class":100},[94,364,188],{"class":104},[94,366,367,369,371],{"class":96,"line":191},[94,368,194],{"class":104},[94,370,198],{"class":197},[94,372,201],{"class":104},[94,374,375,377,379,381,383,385,387,389,391],{"class":96,"line":204},[94,376,207],{"class":104},[94,378,210],{"class":197},[94,380,213],{"class":160},[94,382,216],{"class":100},[94,384,219],{"class":104},[94,386,222],{"class":160},[94,388,216],{"class":100},[94,390,227],{"class":111},[94,392,230],{"class":104},[94,394,395,397,399],{"class":96,"line":233},[94,396,207],{"class":104},[94,398,239],{"class":238},[94,400,230],{"class":104},[94,402,403,405,407],{"class":96,"line":244},[94,404,247],{"class":104},[94,406,198],{"class":197},[94,408,201],{"class":104},[94,410,411],{"class":96,"line":254},[94,412,257],{"class":104},[94,414,415],{"class":96,"line":260},[94,416,263],{"class":104},[94,418,419],{"class":96,"line":266},[94,420,269],{"class":104},[94,422,423],{"class":96,"line":272},[94,424,151],{"emptyLinePlaceholder":150},[94,426,427,429,431],{"class":96,"line":277},[94,428,280],{"class":100},[94,430,283],{"class":100},[94,432,286],{"class":104},[61,434,435],{},"Much better. The code is cleaner and, since we're using absolute paths, far less fragile.",[70,437,439],{"id":438},"how-to-set-up-webpack-aliases-in-create-react-app","How to Set Up Webpack Aliases in create-react-app",[61,441,442],{},"This assumes you're using create-react-app, React's CLI. To configure a Webpack alias, you'll need to eject first so you have direct access to the config files.",[444,445,446,453,459,466],"ol",{},[447,448,449,450],"li",{},"Run: ",[65,451,452],{},"npm run eject",[447,454,455,456],{},"Open ",[65,457,458],{},"config\u002Fwebpack.config.dev.js",[447,460,461,462,465],{},"Find the ",[65,463,464],{},"alias"," object",[447,467,468,469],{},"Add the following: ",[65,470,471],{},"'@': path.resolve('src')",[61,473,474],{},"Your alias object should look something like this:",[86,476,478],{"className":88,"code":477,"language":90,"meta":11,"style":11},"alias: { '@': path.resolve('src'), 'react-native': 'react-native-web' }\n",[65,479,480],{"__ignoreMap":11},[94,481,482,484,487,490,493,496,499,502,505,508,511,514],{"class":96,"line":97},[94,483,464],{"class":160},[94,485,486],{"class":104},": { ",[94,488,489],{"class":111},"'@'",[94,491,492],{"class":104},": path.",[94,494,495],{"class":160},"resolve",[94,497,498],{"class":104},"(",[94,500,501],{"class":111},"'src'",[94,503,504],{"class":104},"), ",[94,506,507],{"class":111},"'react-native'",[94,509,510],{"class":104},": ",[94,512,513],{"class":111},"'react-native-web'",[94,515,516],{"class":104}," }\n",[61,518,519,520,523,524,531,532,535],{},"You can also create aliases for commonly used ",[65,521,522],{},"node_modules",". For my projects, I usually add one for ",[525,526,530],"a",{"href":527,"rel":528},"https:\u002F\u002Fbulma.io\u002F",[529],"nofollow","Bulma",", the Flexbox CSS framework. Note: the alias doesn't have to start with ",[65,533,534],{},"@"," — it can be anything you want.",[86,537,539],{"className":88,"code":538,"language":90,"meta":11,"style":11},"'bulma': path.resolve('node_modules\u002Fbulma\u002Fcss\u002Fbulma.css')\n",[65,540,541],{"__ignoreMap":11},[94,542,543,546,548,550,552,555],{"class":96,"line":97},[94,544,545],{"class":111},"'bulma'",[94,547,492],{"class":104},[94,549,495],{"class":160},[94,551,498],{"class":104},[94,553,554],{"class":111},"'node_modules\u002Fbulma\u002Fcss\u002Fbulma.css'",[94,556,557],{"class":104},")\n",[61,559,560],{},"Then in any component, import it like any other package:",[86,562,564],{"className":88,"code":563,"language":90,"meta":11,"style":11},"import Bulma from 'bulma';\n",[65,565,566],{"__ignoreMap":11},[94,567,568,570,573,575,578],{"class":96,"line":97},[94,569,101],{"class":100},[94,571,572],{"class":104}," Bulma ",[94,574,108],{"class":100},[94,576,577],{"class":111}," 'bulma'",[94,579,115],{"class":104},[70,581,583],{"id":582},"wrapping-up","Wrapping Up",[61,585,586],{},"Webpack aliases are a small configuration change with a big payoff. Cleaner imports, more resilient code, and less time hunting down broken relative paths every time you restructure a directory. If you're working on a React project of any meaningful size, it's worth setting up early.",[588,589,590],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":11,"searchDepth":12,"depth":12,"links":592},[593,594,595,596],{"id":72,"depth":12,"text":73},{"id":292,"depth":12,"text":293},{"id":438,"depth":12,"text":439},{"id":582,"depth":12,"text":583},"Article","Learn how to configure Webpack aliases in React to replace fragile relative imports with clean, absolute paths — and make your codebase easier to maintain.",null,"https:\u002F\u002Fres.cloudinary.com\u002Fdlvp2b6ki\u002Fimage\u002Fupload\u002Fv1775697673\u002Fundraw_react_ytu4_1_f1k394.png",{},"\u002Fwriting\u002Fcreating-alias-for-package-imports-in-react","2017-12-29",{"title":57,"description":598},"published","writing\u002Fcreating-alias-for-package-imports-in-react",[608,609,610,611,530],"JavaScript","React","Webpack","Create React App","2026-04-08","-mryZdquQXaHaHozcejzD2bcHxjnVgvP0I0y1ir0YeE",1775699599306]