IDEA isn't resolving Nuxt project aliases
I'm currently using Nuxt 3/Typescript 5.4.5, and I'm using the auto-generated Nuxt aliases for my project (i.e. ~/assets maps to <srcDir/assets and so on). This is running fine in my development environment, but I keep getting warnings from IDEA saying the module can't be found when I use this alias in a path import, i.e.:
Vue: Cannot find module ~/stores/user-preferences or its corresponding type declarations.
For reference, my nuxt.config.ts looks as follows:
import type { ModuleOptions, Nuxt, ViteConfig } from '@nuxt/schema';
import * as path from 'path';
import type { TSConfig } from 'pkg-types';
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
/**
* The Typescript configuration for this project
*
* @const
*/
const tsConfig: TSConfig = {
compilerOptions: {
/* Projects */
incremental: true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
composite: true, /* Enable constraints that allow a TypeScript project to be used with project references. */
/* Language and Environment */
target: 'ESNext', /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
/* Modules */
module: 'ESNext', /* Specify what module code is generated. */
moduleResolution: 'Bundler', /* Specify how TypeScript looks up a file from a given module specifier. */
baseUrl: path.resolve(__dirname), /* Specify the base directory to resolve non-relative module names. */
paths: { /* Specify a set of entries that re-map imports to additional lookup locations. */
'@@build-tooling': ['bin/build-tooling/lib'],
'@@build-tooling/*': ['bin/build-tooling/lib/*'],
'@@build-tooling-tasks/*': ['bin/build-tooling/tasks/*'],
'@@build-tooling-util': ['bin/build-tooling/util/index.ts'],
'@@config/*': ['config/*'],
'@@lib/*': ['lib/*'],
},
types: [ /* Specify type package names to be included without being referenced in a source file. */
'@pinia/nuxt',
`${__dirname}/bin/build-tooling/lib/index.ts`,
`${__dirname}/lib/test-utils/types.ts`,
'jest',
'node',
'vitest/globals',
],
resolveJsonModule: true, /* Enable importing .json files. */
/* JavaScript Support */
allowJs: true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
checkJs: true, /* Enable error reporting in type-checked JavaScript files. */
/* Emit */
declaration: true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
declarationMap: true, /* Create sourcemaps for d.ts files. */
inlineSourceMap: true, /* Include sourcemap files inside the emitted JavaScript. */
outDir: path.resolve(__dirname, './dist'), /* Specify an output folder for all emitted files. */
importsNotUsedAsValues: 'remove', /* Specify emit/checking behavior for imports that are only used for types. */
stripInternal: true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
preserveConstEnums: true, /* Disable erasing 'const enum' declarations in generated code. */
/* Interop Constraints */
isolatedModules: true, /* Ensure that each file can be safely transpiled without relying on other imports. */
esModuleInterop: true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
forceConsistentCasingInFileNames: true, /* Ensure that casing is correct in imports. */
/* Type Checking */
strict: true, /* Enable all strict type-checking options. */
noImplicitAny: true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
strictNullChecks: true, /* When type checking, take into account 'null' and 'undefined'. */
strictFunctionTypes: true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
strictBindCallApply: true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
strictPropertyInitialization: true, /* Check for class properties that are declared but not set in the constructor. */
noImplicitThis: true, /* Enable error reporting when 'this' is given the type 'any'. */
useUnknownInCatchVariables: true, /* Default catch clause variables as 'unknown' instead of 'any'. */
alwaysStrict: true, /* Ensure 'use strict' is always emitted. */
noUnusedLocals: true, /* Enable error reporting when local variables aren't read. */
noUnusedParameters: true, /* Raise an error when a function parameter isn't read. */
exactOptionalPropertyTypes: true, /* Interpret optional property types as written, rather than adding 'undefined'. */
noImplicitReturns: true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
noFallthroughCasesInSwitch: true, /* Enable error reporting for fallthrough cases in switch statements. */
noUncheckedIndexedAccess: true, /* Add 'undefined' to a type when accessed using an index. */
noImplicitOverride: true, /* Ensure overriding members in derived classes are marked with an override modifier. */
noPropertyAccessFromIndexSignature: true, /* Enforces using indexed accessors for keys declared using an indexed type. */
/* Completeness */
skipLibCheck: true, /* Skip type checking all .d.ts files. */
},
include: [
`${__dirname}/bin/build-tooling/**/*`,
`${__dirname}/config/**/*`,
`${__dirname}/lib/**/*`,
],
};
/**
* The Nuxt configuration for this project
*
* @default
* @const
* @see https://nuxt.com/docs/api/configuration/nuxt-config
*/
export default defineNuxtConfig({
/* Build: Shared build configuration (https://nuxt.com/docs/api/nuxt-config#build) */
build: {
/* Transpile: Dependencies to transpile with Babel (https://nuxt.com/docs/api/nuxt-config#transpile) */
transpile: [
'vuetify',
],
},
/* Components: Configuration for Nuxt component auto-registration (https://nuxt.com/docs/api/nuxt-config#components) */
components: [
// Don't use a path prefix for all core components (i.e. ~/compoonents/core/Foo.vue imports as <Foo />, not <CoreFoo />
{
path: '~/components/core',
pathPrefix: false,
},
'~/components',
],
css: [
'@/assets/styles/main.css',
],
/* Dev Tools: Use Nuxt devtools (https://nuxt.com/docs/api/nuxt-config#devtools) */
devtools: {
enabled: true,
},
/* Modules: Integrations for Nuxt modules (https://nuxt.com/docs/api/nuxt-config#modules-1) */
modules: [
// The Nuxt ESLint module for linting (https://eslint.nuxt.com/packages/module)
'@nuxt/eslint',
// The Nuxt Google Fonts module for application fonts (https://google-fonts.nuxtjs.org/)
[
'@nuxtjs/google-fonts', {
families: {
'Plus+Jakarta+Sans': true,
},
display: 'swap',
},
],
// The Nuxt Tailwind CSS module for styling (https://tailwindcss.nuxtjs.org/)
'@nuxtjs/tailwindcss',
// Nuxt test utils for testing (https://nuxt.com/docs/getting-started/testing)
'@nuxt/test-utils',
// The Pinia Nuxt module for state management (https://pinia.vuejs.org/ssr/nuxt.html)
'@pinia/nuxt',
// The TresJS Nuxt module for 3d modeling (https://docs.tresjs.org/guide/nuxt)
'@tresjs/nuxt',
// The Vuetify Nuxt module. There is not currently an official module for Nuxt 3 yet, so we have to manually
// define it (https://vuetifyjs.com/en/getting-started/installation/#using-nuxt-3)
(_options: ModuleOptions, nuxt: Nuxt): void => {
nuxt.hooks.hook('vite:extendConfig', (config: ViteConfig): void => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
config.plugins.push(vuetify({
autoImport: true,
}));
});
},
],
pinia: {
storesDirs: [
'<srcDir>/stores/**',
],
},
plugins: [
'~/plugins/vuetify/index.ts',
],
/* Src Dir: The source directory for the application (https://nuxt.com/docs/api/nuxt-config#srcdir) */
srcDir: path.resolve(__dirname, 'ui'),
/* Typescript: Configure Nuxt's TypeScript integration (https://nuxt.com/docs/api/nuxt-config#typescript) */
typescript: {
/* TSConfig: Extend Nuxt's generated TSConfig (https://nuxt.com/docs/api/nuxt-config#tsconfig) */
tsConfig,
},
/* Vite: Pass a configuration to Vite (https://nuxt.com/docs/api/nuxt-config#vite) */
vite: {
/* Vue: Configure Vite's Vue integration (https://nuxt.com/docs/api/nuxt-config#vue) */
vue: {
// Configure Vite to handle Vuetify assets (https://vuetifyjs.com/en/getting-started/installation/#using-nuxt-3)
template: {
transformAssetUrls,
},
},
},
});
请先登录再写评论。
In Typescript projects, the IDE uses path mappings from the
tsconfig.json
to resolve aliases. What does yourtsconfig.json
look like?