When I import functions from files using absolute imports, I keep encountering errors that I have been trying to resolve. The errors manifest in a certain way, as shown here: https://i.sstatic.net/J7Ai1.png
Despite the errors, the functions are successfully imported and usable. It seems like my typescript configuration is causing Visual Studio Code to display these errors whenever something is imported with an absolute path. I've heard that starting with version 9 of Next.js, typescript support is included by default without requiring additional setup.
Here's what my tsconfig.json file looks like:
{
"compilerOptions": {
// Compiler options details omitted for brevity...
},
"exclude": [
"node_modules"
],
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
]
}
And here's 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
}
})