Resolving modules with absolute imports in TypeScript and Next.js

I've been trying to get rid of some errors that keep appearing when I import functions from files using absolute imports. The errors that I get appear as follows.

The functions are actually imported and can be used just fine. However, my typescript configuration makes VS code throw errors like that whenever something is imported using an absolute path. My understanding is that starting with version 9 of Next.js, typescript is supported out of the box without having to do too much extra work.

My tsconfig.json file

{
"compilerOptions": {
"target": "esnext",
"lib": [
  "dom",
  "dom.iterable",
  "esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"strictNullChecks": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"sourceMap": true,
"baseUrl": ".",
"paths": {
  "@actions/*": [
    "redux/actions/*"
  ],
  "@components/*": [
    "./components/*"
  ],
  "@controllers/*": [
    "controllers/*"
  ],
  "@interfaces/*": [
    "interfaces/*"
  ],
  "@layouts/*": [
    "layouts/*"
  ],
  "@lib/*": [
    "lib/*"
  ],
  "@models/*": [
    "models/*"
  ],
  "@options/*": [
    "options/*"
  ],
  "@public/*": [
    "public/*"
  ],
  "@reducers/*": [
    "redux/reducers/*"
  ],
  "@redux/*": [
    "redux/*"
  ],
  "@static/*": [
    "static/*"
  ],
  "@store/*": [
    "./store/*"
  ],
  "@style": [
    "style/*"
  ],
  "@utils": [
    "utils/*"
  ],
  "@dummy/*": [
    "__dummy__/*"
  ]
}
},
"exclude": [
  "node_modules"
],
"include": [
  "next-env.d.ts",
  "**/*.ts",
  "**/*.tsx"
]
}

My next.config.js file

/* eslint-disable */
const withPlugins = require("next-compose-plugins")
const withFonts = require("next-fonts")
const withImages = require("next-images")
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin")
/* eslint-enable */

module.exports = withPlugins([[withFonts], [withImages]], {
webpack: (config) => {
    if (config.resolve.plugins) {
        config.resolve.plugins.push(new TsconfigPathsPlugin())
    } else {
        config.resolve.plugins = [new TsconfigPathsPlugin()]
    }

    config.resolve.extensions.push(".ts", ".tsx")
    return config
}
})