title: Next.js typescript import aliases with babel-plugin-module-resolver
body: <p>I'm setting up a Next.js project with typescript. I've been following several guides but I seem to be facing an issue with import aliases.</p>
  
  <p>I'm not sure if this is an issue with my configuration or with Next.js.</p>
  
  <p>Here are a few pages referencing similar issues whose tips I followed without success:</p>
  
  <ul>
  <li><a href="https://github.com/zeit/next-plugins/issues/535" rel="nofollow noreferrer">https://github.com/zeit/next-plugins/issues/535</a></li>
  <li><a href="https://medium.com/anna-coding/how-to-use-absolute-module-import-path-in-next-js-dcbc806272e5" rel="nofollow noreferrer">https://medium.com/anna-coding/how-to-use-absolute-module-import-path-in-next-js-dcbc806272e5</a></li>
  </ul>
  
  <p>I tried messing around with Next.js' webpack configuration to solve the problem (adding resolve.alias options directly to next.config.js, but this didn't help and Next.js supposedly supports typescript out of the box now (resolve.extensions are well defined)</p>
  
  <p><strong>Next.js version 9.3.5</strong></p>
  
  <p>b<strong>abel-plugin-module-resolver version 4.0.0</strong></p>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve",
      "baseUrl": ".",
      "paths": {
        "@components/*": ["./components/*"],
        "@icons/*": ["./assets/icons/*"],
        "@views/*": ["./views/*"]
      }
    },
    "exclude": [
      "node_modules"
    ],
    "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx"
    ]
  }
  
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>{
    "presets": [ "next/babel" ],
    "plugins": [
      "inline-react-svg",
      ["module-resolver", {
        "root": ["./"],
        "alias": {
          "@components": "./components",
          "@icons": "./assets/icons",
          "@views": "./views"
        }
      }]
    ]
  }
  
  </code></pre>