Vue component cannot resolve relative component imports in typescript

Question

I just upgraded to typescript using the vue-cli vue upgrade typescript command. The command exits succesfully.

However, now, the relative imports that previously worked in javascript can no longer be resolved.

I have the following Home component, that imports another component:

<script lang="ts">
    import Navbar from "./Navbar"

    export default {
        name: "Home",
        components: {
            Navbar
        }
    }
</script>

The Navbar component:

<script lang="ts">
export default {
    name: "Navbar"
}
</script>

The import Navbar from "./Navbar" statement in the home component gives me the following error: Cannot find module './Navbar'.Vetur(2307)

I suspect it has something to do with the tsconfig configuration. It's auto generated as part of the automatic typescript upgrade:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Ohgodwhy · Accepted Answer · 2020-03-27 17:06:32Z

3

This is correct. The reason this occurs is that the vetur cannot find the path to the module ./Navbar. However, it can find the path to ./Navbar.vue.

You can see from the comment by a Vetur maintainer that importing components without the .vueextension is not supported.

You will also need to declare a vue-shim.d.ts that declares the typings for .vue so you don't get explosions there, as well:

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

Now, mind you, this will only happen in files where the script lang="ts", outside of that you won't see this issue as Vetur will not process any of the javascript within the script block as typescript (true for SFCs)

answered Mar 27, 2020 at 17:06

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue component cannot resolve relative component imports in typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related