Can't bring in Vue from import but can access it if I bring it in html file

Question

So I'm switching from React over to Vue and have just a simple hello world sort of project up that works only when I bring in Vue in script tag in my HTML file. However I can't import the node module like:

import './node_modules/vue/dist/vue.js

or

import Vue from 'vue'

Like I said if I have a script in my HTML file such as

<script src='./node_modules/vue/dist/vue.js'></script>
<script src="app.js"></script>

Then I can have in my app.js :

 new Vue({
    el: '#app',
    data: {
        message: 'Hello vue'
    }
});

And have it work just fine.

Why can I only bring Vue in from a script tag?

Notes that might or might not matter : I used NPM and installed Vue through NPM it is listed in my dependencies. I'm not using webpack or any sort of transpiler like babel.

Answer 1

<script src="app.js" type="module"></script>

You have to declare the script as of type "module" to tell the browser it's an ES6 module file and then you can use the import keyword assuming your browser supports it. Browser support: https://caniuse.com/#feat=es6-module