A basic Vue component shows error message "SyntaxError: import not found: default"

Question

A basic Vue component shows error message "SyntaxError: import not found: default"

I seem to be facing an issue while breaking down some large components into smaller ones. One of the new components I created appears mostly empty:

<div>
  test
</div>

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

In my parent component, I include this new component using <my-new-component /> (which works fine with all other components).

In the script tag of the parent component, I have the following code:

import MyNewComponent from "path"; // everything seems correct when checking in the IDE

export default {
  components: {
    MyNewComponent
  }
}

However, I keep encountering the error message

Uncaught SyntaxError: import not found: default

within the MyNewComponent.vue file.

This is the same setup I use for all my other components. What could I possibly be missing? I am working on Vue 2.7

javascript vue.js

Answer 1

Answer №1

To properly structure your HTML code, enclose it within a template tag.

<template>
  <section>
    example content
  </section>
</template>

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

Answer 2

To properly structure your HTML code, enclose it within a template tag.

<template>
  <section>
    example content
  </section>
</template>

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

Answer 3

Answer №2

The problem was resolved when the OP wrapped the divs inside a template tag as shown below:

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

<script>
export default {
  data() {
    return {
      // impressive code here
    }
  }
}
</script>

For further reference, check out this link on why it's important for data to be returned as a function.

Answer 4

The problem was resolved when the OP wrapped the divs inside a template tag as shown below:

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

<script>
export default {
  data() {
    return {
      // impressive code here
    }
  }
}
</script>

For further reference, check out this link on why it's important for data to be returned as a function.

A basic Vue component shows error message "SyntaxError: import not found: default"

Answer №1

Answer №2

Similar questions

What is the best way to display label information on a Google line chart?

Adjust the position of the element by lifting it slightly

Obtain cell information when clicking on a specific field within a material-table

Dealing with file upload dialog using Selenium web automation

The functionality of the Google Analytics pageTracker function is hindered when it is loaded through AJAX requests

Activate function upon closure of window.open

Incorporating native JavaScript classes within an Angular application

TypeError: The firestore function within the firebase_app__WEBPACK_IMPORTED_MODULE_0__ object is not recognized in Vue.js

Creating a three.js lathe object using SVG spline with a Bézier curve

React does not accept objects as valid children. If you want to render a group of children, make sure to use an array instead

The outcome of a function within the $.ajax method is transformed into a string

"Is there a way to automatically delete items from a v-for loop after a

Best practices for organizing a Vue/Node application when integrating the Instagram API

The contrast between FormData and jQuery's serialize() method: Exploring the distinctions

Increase the lag time for the execution of the on('data') function in Node.js

Developing a project similar to the one designed for three.js

Ways to verify the $window variable in ng-if or ng-show

Guide on transferring binary image data to a JavaScript function

What methods can I use to integrate Cheerio with CSS Manipulation?

Transmit information back to ASP.NET using AngularJS