Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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

Tags:

2

Answers


  1. 0

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

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

<script>
  export default {
    data() {}
  }
</script>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search