I got Uncaught SyntaxError: Unexpected identifier error when trying to import

Question

I am new in vue. i tried to render a vue component. but i got error. i am not using vue-cli. i include a script https://cdn.jsdelivr.net/npm/vue

My html code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            VUE Study
        </title>
        <link href="stylee.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div class="container" id="head">
        </div>
        <script src="components/app.js"></script>
    </body>
</html>

app.js

import Index from "./Index.vue"

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

both app.js and Index.vue are in same folder. Please healp me to solve this..

Are you using vue-loader and any sort of bundler?

arapl3y
– arapl3y

2019-07-30 10:08:17 +00:00
Commented Jul 30, 2019 at 10:08 — arapl3y
– arapl3y, Commented Jul 30, 2019 at 10:08

tony19 · Accepted Answer · 2022-07-16 04:28:03Z

2

The error occurs because browser do not recognize import statement. Since you are not using a bundler like webpack you can register the components using Vue.component(). This will eliminate the need to import components inside other modules.

Vue.component('Index', {
  data() {
    return {
      value: 'Index component'
    }
  },
  template: `<h2>{{ value }}</h2>`
})

new Vue({
    el: '#head'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            VUE Study
        </title>
        <link href="stylee.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div class="container" id="head">
            <index />
        </div>
        <script src="components/app.js"></script>
    </body>
</html>

edited Jul 16, 2022 at 4:28

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jul 30, 2019 at 10:09

antonku

7,7252 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I got Uncaught SyntaxError: Unexpected identifier error when trying to import

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related