How to use ES6 import (client-side JS)

Question

I am trying to use VeeValidate and the examples show the usage of ES6 import like this:

import { Validator } from 'vee-validate';

My understanding is that this works only with npm and not with CDN. I want to just write client-side js and not use node js. Do I have to look into something like browserify or webpack?

I tried to copy the javascript from the CDN link and just make it a local js file for importing, but could not get it working. Did it not work because I did not have export statements?

If you copy in your local you need to specify path also by default it looks inside node_modules. — Rahul Sharma, Mar 05 '18 at 11:06

TOPKAT · Accepted Answer · 2022-12-21T09:22:50.623

13

The first thing to do is to put type="module" as an attribute of your <script> tag

Full example:

<script type='module' src='module-a.mjs' /> 

<script type="module">
  import * as moduleA from 'module-a.mjs'
</script>

You may want to add a .mjs extension to explicitly tell that this file is a js module and avoid syntax errors in your IDE.

Currently import / export syntax is supported by 96% of all users browser (caniuse.com).

Documentation:

edited Dec 21 '22 at 09:22

answered Jul 07 '18 at 18:52

TOPKAT

6,667
2
44
72

1

Is it necessary to import 'module-a.mjs' first in order to use it in the module 'module-b.mjs'? – Muhammad Siddiqui Sep 16 '22 at 20:04

score 1 · Answer 2 · answered Mar 05 '18 at 13:22

The issue, as you said is that import is currently only being supported globally via Node. If you want to quickly import code on the client side, and jQuery is an option, then you can use:

$.getScript( "ajax/test.js" )
.done(function( script, textStatus ) {
    console.log( textStatus );
})
.fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

This will load and execute the JavaScript code from the server. The callback done is called when the script has finished downloading, but not necessarily completed execution.

For more info, you can look at the official reference

score 0 · Answer 3 · answered Mar 05 '23 at 18:41

0

This method for loading modules locally (i.e. client-side) unfortunately gets blocked by CORS in Chrome and Chromium based browsers.

answered Mar 05 '23 at 18:41

Gene Yuss

33
5

Chau Phu Cuong · Answer 4 · 2019-03-15T01:29:50.540

-1

Try this :

const url = './demo.js';
try { import(url).loadPageInto(main);} 
catch (error) { main.textContent = error.message; }

edited Mar 15 '19 at 01:29

answered Mar 14 '19 at 13:45

Chau Phu Cuong

11
1

How to use ES6 import (client-side JS)

4 Answers4