Next.js typescript import aliases with babel-plugin-module-resolver

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.

I'm not sure if this is an issue with my configuration or with Next.js.

Here are a few pages referencing similar issues whose tips I followed without success:

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)

Next.js version 9.3.5

babel-plugin-module-resolver version 4.0.0

tsconfig.json

{
  "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"
  ]
}

.babelrc

{
  "presets": [ "next/babel" ],
  "plugins": [
    "inline-react-svg",
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "@components": "./components",
        "@icons": "./assets/icons",
        "@views": "./views"
      }
    }]
  ]
}

Solution

After thinking on this some more I realized I was trying to do two things:

Handle typescript aliases
Use babel-plugin-inline-react-svg to import SVGS

The provided configuration actually works for regular typescript imports however this configuration doesn't allow svg imports to be aliased, I tried adding the extension to module-resolver with no luck.

After doing some more research I found an open issue being tackled at babel-plugin-inline-react-svg: https://github.com/airbnb/babel-plugin-inline-react-svg/pull/17

It seems this is a know compatibility issue between babel-plugin-module-resolver and babel-plugin-inline-react-svg.