CODEWITHSUNDEEP
vue.jsvue-router
Casey Crookston
Casey Crookston

Reputation: 13965

Could not find a declaration file for module './router'

I have a TypeScript based Vue.js project, using Visual Studio 2017 as my IDE.

This is the 'router/index.js' file:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import TimeSheet from '@/components/TimeSheet'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            redirect: {
                name: "Home"
            }
        },
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            path: '/timesheet',
            name: 'TimeSheet',
            component: TimeSheet
        }
    ]
})

And this is the content of my 'main.ts' file:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = true;

import router from './router'

new Vue({
    render: h => h(App),
    router
}).$mount('#app')

On this line:

import router from './router'

I am getting:

vue.js could not find a declaration file for module './router'

I am seeing a LOT of threads on this error, but so far none have provided a solution. Here's how the project is layed out:

enter image description here

EDIT:

Contents of tsconfig.json

{
  "compilerOptions": {
    "noEmit": true,
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "node"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Upvotes: 1

Views: 2449

Answers (1)

Casey Crookston
Casey Crookston

Reputation: 13965

I got this working by changing the file router/index.js to index.ts and then I changed the contents of the file from...

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import TimeSheet from '@/components/TimeSheet'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            redirect: {
                name: "Home"
            }
        },
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            path: '/timesheet',
            name: 'TimeSheet',
            component: TimeSheet
        }
    ]
})

to...

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import TimeSheet from '@/components/TimeSheet.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            redirect: {
                name: "Home"
            }
        },
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            path: '/timesheet',
            name: 'TimeSheet',
            component: TimeSheet
        }
    ]
})

Upvotes: 3

Related Questions