Vue cannot resolve index.vue in parent folder

Question

I'm trying to import a component using just the path folder, but I keep getting the error Cannot find module './components/layout/Navbar'.Vetur(2307)

Here's how I import the component

import Navbar from "./components/layout/Navbar";

@Component({
  components: {
    Navbar
  }
})

vue.config.js

const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery",
        jQuery: "jquery"
      })
    ]
  }
};

Answer 1

I do not think this is a good solution, but if there are no other options, then maybe it can help.
It's better to specify the entire file. I would recommend such a solution if you have a big legacy where you need to rewrite a lot.

---

You can declare any module in shims-vue.d.ts.

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

Typescript will not produce an error that there is no module.

But with this approach, you lose hints at the stage of writing code. Only the webpack at the assembly stage will say that the module does not exist.

Answer 2

Try to import the vue files with the extension... Navbar/index.vue

Otherwise the vue loader doesn't know that this file is a vue file.

I assume that you have correctly implemented the vue loader or you are using the vue cli