Simple vue component returns "Uncaught SyntaxError: import not found: default"

Question

Not sure what I'm doing wrong here, I'm breaking some large components down into smaller components, and I've just created a component that is mostly empty like so:

<div>
  test
</div>

<script>
  export default {
    data() {}
  }
</script>

I call it in the parent component using <my-new-component /> (which works with all other components.)

And in the parent component's script tag I have

import MyNewComponent from "path"; // everything directs correctly when I click on the component name and path in my IDE

export default {
  components: {
    MyNewComponent
  }
}

I can't get rid of the Uncaught SyntaxError: import not found: default within the MyNewComponent.vue file

This is how I'm using all my other components, what am I forgetting here? I'm on Vue 2.7

Answer 1

You need to wrap your HTML section in a template tag.

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

<script>
  export default {
    data() {}
  }
</script>