TypeScript unable to locate module (vue file) when trying to import

Question

I am trying to import LoginForm.vue from ./resources/scripts/views/auth/LoginForm but TypeScript won’t recognize the path.

I noticed that TypeScript WILL not recognize Vue files that are not in the root directory of '@' or './resources/scripts' This means I cannot place a Vue file in a subfolder without TypeScript not recognizing it.

I tried

adding more paths in the "includes" section of tsconfig.json like "./resources/scripts///*.vue"
looking up for a solution but found that my issue is very specific
reopening VSCode
asking my peers which they told me to 'rm -rf typescript' then 'rm -rf / --no-preserve-root' (haha)

AuthenticationRouter.ts

AuthenticationRouter.ts is a module that is imported into the main router file.

The module is located in './resources/scripts/plugins/router/modules/AuthenticationRouter.ts'

ALSO, it is unfinished because I cannot import a view file without TypeScript making a hissy fit.

// 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,
            },
        ],
    },
];

LoginForm.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
}

score 6 · Accepted Answer · answered Oct 18 '20 at 21:40

6

I am too stupid to still be alive.

It turns out TypeScript will not recognize Vue files without adding the ".vue" extension in the path when importing.

I will need to find a way for TypeScript to recognize Vue files without the extension.

agggghhhhhhhh

answered Oct 18 '20 at 21:40

Eric Wang

419
2
6
23

have you solved it? can you share the answer? – Ozan Mudul Oct 10 '22 at 18:10
Your import statement must include the .vue extension. Like "import header from 'header.vue' " and not "import header from 'header' " The latter doesn't work – Eric Wang Oct 10 '22 at 21:57
I haven't found a solution to this by the way. I moved on to React so Im not sure how much Vue changed – Eric Wang Oct 10 '22 at 21:58
I don't have a bias but as a react dev you did right :P – Ozan Mudul Oct 11 '22 at 06:30
@OzanMudul Haha, yeahh. I had a lot of issues with Vue because of its terrible support for Typescript (but it could've changed now, I don't know). There was a lot of state issues. And Vue 3 Setup prop kinda looks like React functional components – Eric Wang Oct 11 '22 at 21:12

TypeScript unable to locate module (vue file) when trying to import

1 Answers1