[Bug Report] Running completion hooks...error: Missing file extension "vue" for "./components/HelloWorld"

[SvenMeyer]

Environment

Vuetify Version: 2.2.10
Vue Version: 2.6.11
Browsers: Firefox 72.0
OS: Linux x86_64

Steps to reproduce

found 0 vulnerabilities

✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? Yes
? Select locale English

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

added 7 packages from 5 contributors and audited 32055 packages in 6.255s

39 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

⠋  Running completion hooks...error: Missing file extension "vue" for "./components/HelloWorld" (import/extensions) at src/App.vue:47:24:
  45 | 
  46 | <script>
> 47 | import HelloWorld from './components/HelloWorld';
     |                        ^
  48 | 
  49 | export default {
  50 |   name: 'App',


1 error found.

Expected Behavior

no error

Actual Behavior

⠋  Running completion hooks...error: Missing file extension "vue" for "./components/HelloWorld" (import/extensions) at src/App.vue:47:24:
  45 | 
  46 | <script>
> 47 | import HelloWorld from './components/HelloWorld';
     |                        ^
  48 | 
  49 | export default {
  50 |   name: 'App',


1 error found.

Reproduction Link

https://github.com/vuetifyjs/vuetify

[KaelWD]

vuejs/vue-cli#3267 (comment)

This must be a recent change enforcing eslint after installing a plugin.

[7iomka]

Sometimes this occur even if you correctly configured eslint.
You need manually clean cache folder from node_modules.

[ekediala]

Sometimes this occur even if you correctly configured eslint.
You need manually clean cache folder from node_modules.

Could you please be clearer what you mean by manually cleaning cache from node_modules?
Do you mean to run npm cache clean --force? I'm stuck with the same problem.

[mazhiyu]

Sometimes this occur even if you correctly configured eslint.
You need manually clean cache folder from node_modules.

Could you please be clearer what you mean by manually cleaning cache from node_modules?
Do you mean to run npm cache clean --force? I'm stuck with the same problem.

When I create vue project with using ESLint + Airbnb config, and then run vue add vuetify will cause this problem, but any other config like ESLint + Prettier will be OK.

[7iomka]

Sometimes this occur even if you correctly configured eslint.
You need manually clean cache folder from node_modules.

Could you please be clearer what you mean by manually cleaning cache from node_modules?
Do you mean to run npm cache clean --force? I'm stuck with the same problem.

maybe, I just manually removing cache folder)

[ikubij]

This works:
import HelloWorld from '@/components/HelloWorld.vue';
or
import HelloWorld from './components/HelloWorld.vue';

This below part is for **webpack** (Try a work around for eslint)

To make Webpack automatically resolve .vue extensions use the resolve.extensions option, and include the defaults.

resolve: {
    extensions: ['*', '.js', '.vue', '.json']
}

Then you can import without using .vue

[remram]

Try to use the advanced configuration

Before you start vue add vuetify you should change App.vue the import line there:

• From: import HelloWorld from './components/HelloWorld';
• To: import HelloWorld from './components/HelloWorld.vue';

And very important when you get the question: Use a pre-made template? (will replace App.vue and HelloWorld.vue You should answer with No

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) No
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? Yes
? Select locale English

[johnleider]

This Issue is being closed due to inactivity.

If you have any questions, please reach out to us in our Discord community.