Búsqueda de sitios web

vue.js - TypeScript no puede localizar el módulo (archivo vue) al intentar importar

Estoy intentando importar LoginForm.vue desde ./resources/scripts/views/auth/LoginForm pero TypeScript no reconoce la ruta.

Noté que TypeScript NO reconocerá los archivos Vue que no estén en el directorio raíz de '@' o './resources/scripts'. Esto significa que no puedo colocar un archivo Vue en una subcarpeta sin que TypeScript lo reconozca.

Lo intenté

  • agregar más rutas en la sección "includes" de tsconfig.json como "./resources/scripts///*.vue"
  • buscando una solución pero descubrí que mi problema es muy específico
  • reabrir VSCode
  • preguntando a mis compañeros los cuales me dijeron que 'rm -rf typescript' y luego 'rm -rf/--no-preserve-root' (jaja)

AuthenticationRouter.ts

AuthenticationRouter.ts es un módulo que se importa en el archivo principal del enrutador.

El módulo se encuentra en './resources/scripts/plugins/router/modules/AuthenticationRouter.ts'

TAMBIÉN, está sin terminar porque no puedo importar un archivo de vista sin que TypeScript haga un berrinche.

// AuthenticationRouter.ts
// ./resources/scripts/plugins/router/modules/AuthenticationRouter.ts
import LoginForm from '@/views/auth/LoginForm'

// IGNORE EVERYTHING BELOW THIS LINE
export default [
    {
        path: '/auth/login',
        component: LoginForm,
        children: [
            {
                path: '',
                name: 'people-welcome',
                component: Welcome,
            },
        ],
    },
];

FormularioDeInicioDeSesión.vue

// LoginForm.vue
// ./resources/scripts/views/auth/LoginForm.vue

<template>
    <LoginFormContainer>
            
    </LoginFormContainer>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import LoginFormContainer from '@/components/auth/LoginFormContainer';

    @Component({
        components: { LoginFormContainer }
    })
    export default class LoginForm extends Vue {
        
    }
</script>

<style scoped>

</style>

tsconfig.json

// tsconfig.json
// ./tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "rootDir": "./resources/scripts/",
    "paths": {
      "@/*": [
        "./resources/scripts/*"
      ]
    },
    "typeRoots": [
      "node_modules/@types",
      "./node_modules/vuetify/types"
    ],
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "./resources/scripts/**/*",
    "./resources/scripts/**/*.ts",
    "./resources/scripts/**/*.vue",
    "./resources/scripts/**/*.tsx",
  ],
  "exclude": [
    "/node_modules/"
  ]
}

vue-shim.d.ts

// vue-shim.d.ts
// ./resources/scripts/vue-shim.d.ts

// I have no idea how this code works, but I found it on the internet

// For some odd reason, TypeScript wasn't able to locate *.vue files such as '@/App.vue' in the index.ts file
// So I found this on Stackoverflow https://stackoverflow.com/questions/42002394/importing-vue-components-in-typescript-file
// and it works for now

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

Respuesta #1

Soy demasiado estúpido para seguir vivo.

Resulta que TypeScript no reconocerá los archivos Vue sin agregar la extensión ".vue" en la ruta al importar.

Necesitaré encontrar una manera de que TypeScript reconozca los archivos Vue sin la extensión.

agggghhhhhhhh

Artículos relacionados