Parcel tries to install custom vue components from npm

Question

When I run parcel watch index.js, I see a console error (shown below). Why is it trying to use npm to load my component?

npm ERR! 404 Not found : MyComponent
npm ERR! 404 
npm ERR! 404  'MyComponent' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because 
npm ERR! 404  1. name can no longer contain capital letters
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/jonny/Projects/invoices/npm-debug.log
🚨  /home/jonny/Projects/invoices/src/App.vue:7:40: Failed to install Invoice.
    at PromiseQueue.install [as process] (/usr/local/lib/node_modules/parcel-bundler/src/utils/installPackage.js:46:11)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

App.vue

<template>
    <div>
        {{name}}
        <my-component></my-component>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import MyComponent from "MyComponent"

    export default Vue.extend({
        data: function() {
            return {
                name: 'Hello World!',
            }
        },
        components: {
            MyComponent // This line is the problem!
        }
    });
</script>

<style scoped>

</style> 

MyComponent.vue

<template>
    <div >
    </div>
</template>

<script>
    export default MyComponent = Vue.component('my-component', {
        data: function () {
            return {
                myvalue: 0
            }
        },
    });
</script>

index.js

import Vue from 'vue';
import {default as App} from './App';

new Vue({
    el: '#app',
    render: h => h(App),
});

Answer 1

The import path should be relative for local files.

Parcel's module resolution uses the standard Node algorithm, where plain module names (MyComponent in this case) would cause a lookup in the node_modules directory (or direct to NPM in Parcel's case).

But MyComponent is actually a local file (MyComponent.vue). Assuming MyComponent.vue is in the same directory as App.vue, the relative path would be ./MyComponent.vue:

// import MyComponent from "MyComponent" // DON'T DO THIS
import MyComponent from "./MyComponent"