javascriptvue.js

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


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


Solution

  • OP fixed the issue by wrapping the divs into a template tag like so

    <template>
      <div>
        test
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          // cool code here
        }
      }
    }
    </script>
    

    Here is a reminder as of why data should return a function.