Import without the .vue extension

Ionic Framework Ionic Vue
1

Hello,

I recently started an Ionic application using VueJS.
I created it with the Ionic CLI.
The CLI created a shims-vue.d.ts but it seems that is it not working as I expected.
I would like to import Vue files without using the ‘.vue’ but as soon as I remove the ‘.vue’ I have a :

TS2307 : cannot find module ‘@/App’ or its corresponding type declaration.

I have tried hundreds of manipulations found on internet, like changing the shims-vue.d.ts file to the Vue 2 one, or importing the file into the files section of the tsconfig.json, moving the file into the root folder of the project, and others dark solutions, but non of them solved my issue

Here is my shims-vue.d.ts (generated by Ionic CLI and untouched)

declare module '*.vue' {
  import { defineComponent } from 'vue';

  const component: ReturnType<typeof defineComponent>;
  export default component;
}

My tsconfig.json (generated by the CLI and untouched)

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

The strange thing is that if I put a ‘@ts-ignore’ before the error on the import, the application is still working fine with the serve command. (Building, using the web version and buidling an android version)

I am using Webstorm 2020.3.1 to develop my application and cannot get rid of this error, did any one of you already solve this problem or know a solution ?

2

You need to import components with the .vue extension. There’s really no way to get around this, since *.vue is not technically a valid file type.

Even in a non-ionic-cli created project, you need to use the file extension when importing.