SyntaxError: import declarations may only appear at top level of a module — в чем причина ошибки?

Question

[Vadim kyklaed]

Добрый день! подскажите в чем проблема ошибки
SyntaxError: import declarations may only appear at top level of a module

делаю импорт

Answer 1

[RidgeA]

Код чем-то транспилится или в таком виде попадает в браузер?
Если второе - https://jakearchibald.com/2017/es-modules-in-browsers/

Comments

[Vadim kyklaed]

Не понимаю термина транспилится

у меня бэк на джанге а клиентскую делаю на vuejs

мне что бы обрабатывать ответ от апи мне нужен axios
сейчас пакет axios утсановлся локально прямо в папку проекта

а так у меня index рендерит джанго а все остальное на vue ? script находится прямо в теле html

[Roman K]

Vadim kyklaed, ты почитай хотя бы ОДНУ статью о том, как разрабатывать vue. Хотябы гайд официальный. Как вебпак работает, которого у тебя скорее всего нет.

Миллион информации в интернете, а ты флудишь тут.
Вот хотя бы:
apirobot.me/posts/django-vue-how-to-create-and-con...

[Vadim kyklaed]

Roman Kitaev, да я уже понял чего мне не хватает. спасибо

Answer 2

[Серж Ткач]

Решили аналогичную проблемку следующим образом:

Просто подключение:

<script src="static/CodeMirror/src/codemirror.js"></script>

Заменил на подключение с указанием типа:

<script type="module" src="static/CodeMirror/src/codemirror.js"></script>

Вдохновился здесь.

Answer 3

[Roman K]

import declarations may only appear at top level of a module

import declarations may only appear at top level of a module

import declarations may only appear at top level of a module

Comments

[Vadim kyklaed]

я его импортирую в теле html в теге script так нельзя ?

Answer 4

[Иван]

Ну видимо вы где то не там разместили импорт. В так Ванги в отпуске.

Answer 5

[Марат Нагаев]

Написано же, import только в начале модуля.

Comments

[Vadim kyklaed]

я понимаю смысл ошибки, но импорт установлен в начале модуля

[mShpakov]

Vadim kyklaed, код покажите

[Vadim kyklaed]

mShpakov,

<script>
    import axios from 'axios'
    Vue.component("message-item",{
        delimiters: ['[[', ']]'],
        props: ['message','message_id'],
        template:
            "<div>"+
            "<li>[[ message.message_text ]]</li> <a :href='`/api/mark_read/id=${message.id}`'>Check</a>"+
            "<p>[[lastid]]</p>"+
            "</div>",

        data: function () {
            return {
                lastid: this.message_id
            }
        },
        created: function () {
            this.axios.get('/api/get_messages/last_id=${lastid}').then((response) => {
            console.log(response.data)
})
        },

    })

    var app5 = new Vue({
        el: '#app-5',
        delimiters: ['[[', ']]'],
        data: {
            title: 'Message form space',
            lastid:0
        },

})

</script>