Revising JS code to import ES module to fix error: Uncaught SyntaxError: Unexpected token 'export'

Question

This code works fine, using version 3.0.3 of an external library:

HTML:

<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js"></script>

<button id="emoji-button">Click Me</button>
<input type="text" id="input" />

Javascript:

const button = document.querySelector('#emoji-button');

const picker = new EmojiButton();
picker.on('emoji', emoji => {
    document.querySelector('#input').value += emoji;
});
button.addEventListener('click', () => {
picker.togglePicker(button);
});

The new version of the library (https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js) no longer works - as I get an error in the JS:

Uncaught SyntaxError: Unexpected token 'export'

This is a known issue, and the developer confirmed:

As of version 4, Emoji Button is exported as an ES module only

The person who raised the issue said:

I found a workaround by using the browser modules functionality:

<script type='module' src="/js/emoji.js"></script>
import { EmojiButton } from '/js/vendor/emojibutton.min.js'

Unfortunately I am not clear how to adjust the code that works for 3.0.3 to work for version 4+.

I tried changing this:

<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js"></script>

To this:

<script type="module" src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js"></script>

But from there - how do I edit my 3.0.3 code to include the import section mentioned in the workaround?

The same person who opened that issue, also suggested a workaround — Nir Alfasi
– Nir Alfasi, Commented Jul 25, 2020 at 13:26

AKT · Accepted Answer · 2020-07-25 13:25:38Z

0

You can add your import inside your javascript file, where you use the export. And you can remove the script tag from your HTML.

import {EmojiButton} from 'https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js';

const button = document.querySelector('#emoji-button');

const picker = new EmojiButton();
picker.on('emoji', emoji => {
    document.querySelector('#input').value += emoji;
  });
button.addEventListener('click', () => {
  picker.togglePicker(button);
});

answered Jul 25, 2020 at 13:25

AKT

1,0818 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Revising JS code to import ES module to fix error: Uncaught SyntaxError: Unexpected token 'export'

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related