Почему не работает однофайловый компонент?

Question

[tyoma_koder]

В подключении JS файла указал type="module"
Компонент

<template>
    <div>
        <p class="single-file-component">{{txt}}</p>
    </div>
</template>

<script>
    export default{
        name: 'componentName',
        data: function(){
            return{
                txt: 'Текст файлового компонента'
            }
        }
    }
</script>

JS

import Vue from 'vue'
import componentName from './components/template.vue'
Vue.component('file-component', componentName)

Выдаёт ошибку Uncaught SyntaxError: Unexpected identifier для обоих импортов

Answer 1

[Aetae]

Ты путаешь тёплое с мягким.
ES-modules - это стандарт javascript и работает он с файлами .js. Ни о каких .vue он знать не знает. Нельзя просто написать module и ожидать что оно само заработает.

Для отднофайловых компонентов сборка в любом случае нужна. Сборщики используют loader'ы, которые собственно и творят всю магию. Когда ты пишешь

import componentName from './components/template.vue'

сборщик находит в конфиге специальный loader для .vue и запускает его, тот обрабатывает файл и выдаёт в результате валидный js, который уже в свою очередь и импортируется. Вне сборщиков, в чистом браузере, поддержки loader'ов само собой (пока?) нет.

Comments

[tyoma_koder]

а нужно прописывать type="module" у сборщиков?

[Aetae]

tyoma_koder, как настроишь. Обычно сборщики собирают всё в кучу и выдают классический js, но можно указать цель сборки - esm(или что-то побоное) и он соберёт всё в модули.