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,
      },
    },
  },
});
0

In Typescript projects, the IDE uses path mappings from the tsconfig.json to resolve aliases. What does your tsconfig.json look like?

0

请先登录再写评论。