Next-plugins: typescript with nextjs 9.0.5 & absolute imports using babel-plugin-module-resolver 3.2.0 breaks

[Thando-James]

Hie. I'm using nextjs 9.0.5, react 16.9.0, and babel-plugin-module-resolver 3.2.0... I've tried all the solutions i could find and I still cannot get it to work. Below are files

.babelrc

```{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
],
[
"module-resolver",
{
"root": ["./"],
"alias": {
"@src": "./src"
},
"extensions": [".js", ".jsx", ".tsx"]
}
]
]
}

```tsconfig.json```


```{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "baseUrl": ".",
  "paths": {
    "@src/*": ["./src/*"]
  }
}

next.config.js

```const withSass = require('@zeit/next-sass');

module.exports = withSass({
sassLoaderOptions: {},
webpack(config, options) {
config.resolve.extensions.push('.ts', '.tsx');
return config;
},
});
```

What am I missing?

[Thando-James]

Solved it by adding the baseUrl and paths in the complierOptions in the tsconfig like this

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
       "@src/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
}

[GuillaumeJasmin]

another way to solve this:
tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "."
  },
  ...
  "include": ["next-env.d.ts", "./src/**/*.ts", "./src/**/*.tsx"],
}

next.config.js

module.exports = {
  webpack(config) {
    config.resolve.modules.push(__dirname)
    return config;
  },
}

Then, you can use

import { Button } from "src/components/Button"