Why doesn't the single-file component work?

Question

Vue.js

Specified type="module" in JS file connection
Component

<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)

Throws Uncaught SyntaxError: Unexpected identifier for both imports

Answer 1

You are confusing warm with soft.
ES-modules is a standard javascriptand works with .js. .vueHe doesn't know about any . You can't just write moduleand expect it to work.
For single-file components, an assembly is needed anyway. Collectors use loader's, which actually do all the magic. When you write

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

the collector finds a special loaderfor in the config .vueand launches it, it processes the file and produces a valid one as a result js, which, in turn, is imported. Outside of faucets, in a pure browser, support for loader's is (yet?) non-existent.