1

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"
  ]
}
4
  • can you share the content of tsconfig.json? Commented Aug 29, 2018 at 20:56
  • @Sphinx, happily! Added to OP Commented Aug 29, 2018 at 20:58
  • same result :( I sure do appreciate your help! Commented Aug 29, 2018 at 21:23
  • Since you are using main.ts, your router/index.js should be router/index.ts to minimise errors Commented Sep 5, 2018 at 3:26

1 Answer 1

3

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
        }
    ]
})
Sign up to request clarification or add additional context in comments.

1 Comment

Can you try to insert "src/**/*.js", into the include array of your tsconfig.json and see if this works with a .js file?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.