title: Absolute Imports: React and Typescript
body: <h2>Background</h2>
  
  <p>I have a React app bootstrapped using <code>create-react-app</code> and typescript. As the application has grown, (<strong>goal</strong>) I would like to implement absolute imports. I am using VS Code (Visual Studio Code) and with very little configuration, I got TS and VS Code to recognize my absolute imports.</p>
  
  <p>For TS, I took the following steps in my <code>tsconfig.json</code>:</p>
  
  <ul>
  <li>Change the 'baseUrl' to 'client': <code>"baseUrl": "client"</code></li>
  <li>Added 'client' to my <code>include</code> key: <code>"include": ["./**/*.ts", "./**/*.tsx", "client"]</code></li>
  </ul>
  
  <p>For VS Code, I changed my User Settings: Typescript -> Preferences: Import Module Specifier -> non-relative</p>
  
  <p>That worked great. All of my imports were using absolute imports, no errors. But, when I ran the app, I got an error: <code>Error: Cannot find module "component"</code> I expected to see my app like I did before the absolute imports. </p>
  
  <h2>What I Tried</h2>
  
  <p>Figured, the error was a webpack or babel issue. </p>
  
  <ol>
  <li><p><strong>Created <code>env</code> File</strong></p>
  
  <p>Added the following to an env file in the root of the app (same location as my package.json)</p></li>
  </ol>
  
  <pre><code>NODE_PATH=client/
  </code></pre>
  
  <p>That did not work. Same error: <code>Error: Cannot find module "components"</code>. Also tried changing NODE_PATH to REACT_APP_NODE_PATH that did not work either.</p>
  
  <ol start="2">
  <li><p><strong>Modify Babel Config</strong></p>
  
  <p>Added babel plugin module resolver with <code>yarn add -D babel-plugin-module-resolver</code>. Then modified my <code>babel.config.js</code> to:</p></li>
  </ol>
  
  <pre><code>module.exports = { 
    env {...}, 
    plugins: [
      [
        'module-resolver',
        {
          cwd: 'babelrc',
          extensions: ['.ts', '.tsx', '.js'],
          alias: {
            client: './client',
          },
        },
      ],
    ]
  }
  </code></pre>
  
  <p>That returns the same error. (I am restarting the server after every change to my config files)</p>
  
  <p><strong>Resources Referenced</strong>
  I used a lot of different articles to try to find clarity. Here are some:</p>
  
  <ul>
  <li>Absolute Imports with Create React App by Kyle Truong (<a href="https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d" rel="nofollow noreferrer">here</a>)</li>
  <li>Absolute Imports in Create React App by Michael Bednarz (<a href="https://dev.to/mr_frontend/absolute-imports-in-create-react-app-3ge8" rel="nofollow noreferrer">here</a>)</li>
  <li>Configuring React Absolute Imports For TypeScript by Justin Noel (<a href="https://justinnoel.dev/2019/06/18/configuring-react-absolute-imports-for-typescript/" rel="nofollow noreferrer">here</a>)</li>
  <li>Use absolute path in React components (<a href="https://stackoverflow.com/questions/56908357/use-absolute-path-in-react-components">StackOverflow</a>)</li>
  <li>How to import js modules (with absolute path) in my typescript file in React application?</li>
  </ul>
  
  <p>And many others. None of that worked. </p>
  
  <h2>Project Structure</h2>
  
  <p>My project structure is a little "unconventional" or not my typical pattern which could be causing an issue.</p>
  
  <pre><code>└── root dir
      ├── assets
      │   └── client
      │       ├── assets
      │       ├── components
      │       ├── hooks
      │       └── ...
      │   └── babel.config.js
      │   └── .babelrc
      │   └── webpack.config.js
      │   └── package.json
      └── server files (no server dir) 
  </code></pre>
  
  <p>So <code>client</code> is like my <code>src</code> in a typical react app. <code>assets</code> is the "entry dir" for my server which is in the <code>root dir</code>.</p>
  
  <p>Any help would be appreciated.</p>