This relative module was not found?

Question

I tried running npm run serve, and it came back with this error:

This relative Module was not found:

*./components/Map.vue 

It exists, and I'm pretty sure I've linked the pages right. How do I correct this?

My config looks like this:

module.exports = {
  pages: {
    home: {
      
      entry: './src/components/main.js',
      
      template: './src/pages/home/App.vue',
      
      filename: './src/pages/home/App.vue',
      
      title: 'Home Page',
      
      chunks: ['chunk-vendors', 'chunk-common', 'Home']
    },
    map: {
      
      entry: './src/pages/map/main.js',
      
      template: './src/pages/map/App.vue',
      
      filename: './src/pages/map/App.vue',
      
      title: 'Map',
      
      chunks: ['chunk-vendors', 'chunk-common', 'Map']
      },
  }
}

Am I linking things wrong?

edit:

I have changed my templating based on another answer given on here to the a similar question. Now it's telling me:

These dependencies were not found:

• C:\Users\xadri\OneDrive\Documents\Adrian Code Projects\demo2\demo2\demo2\src\pages\Home\main.js in multi (webpack)-dev-server/client?http://192.168.1.5:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/pages/Home/main.js
• C:\Users\xadri\OneDrive\Documents\Adrian Code Projects\demo2\demo2\demo2\src\pages\Map\main.js in multi (webpack)-dev-server/client?http://192.168.1.5:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/pages/Map/main.js

And is saying I can download them.

module.exports = {
  pages: {
    'index': {
      entry: './src/pages/Home/main.js',
      template: 'public/index.html',
      title: 'Home',
      chunks: [ 'chunk-vendors', 'chunk-common', 'index' ]
    },
    'map': {
      entry: './src/pages/Map/main.js',
      template: 'public/index.html',
      title: 'Map',
      chunks: [ 'chunk-vendors', 'chunk-common', 'about' ]
    }
  }
}

Answer 1

The error is likely caused by the invalid config you currently have.

From the docs for pages:

• template should point to an .html file (not a .vue file)
• entry should be a .js file (that imports a .vue file)
• filename should be the output filename in the output folder (don't link it back to the original source files)