Integration help

[vnihoul77]

I am trying to install the Popup picker from Picmojs but I am limited by the following:

• I can't modify any file as I am integrating the code in a co-code builder (no access to index.js,..) but can host files
• I can't use NPM nor Yarn as I am working in the browser

Here's what the documentation says

Use ESM from CDN You can also import the ESM version of PicMo directly. You will first to create an ES module that imports PicMo:

index.js import { createPicker } from 'https://unpkg.com/picmo@latest/dist/index.js'; createPicker(...);

Then you can import the local module from a script tag:

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

I indeed tried in a Fiddle (even without the script that as I didn't understand this part) and it seems to be working all fine: Link to Fiddle

However, this relates to the createPicker function, but I'm interested in the Popup picker and therefore need the createPopup function.

According to their documentation:

A popup picker is not displayed until it is triggered by clicking on a popup trigger, usually a button.

To use a popup picker, you must first install the @picmo/popup-picker package. This package contains the createPopup function.

createPopup(pickerOptions: PickerOptions, popupOptions: PopupOptions):PopupPickerController

-> I don't know how to "first install the @picmo/popup-picker package".

Here's what I tried based on the previous working example:

import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/umd/picmo-popup.js';

Link to Fiddle

But I always get the same error: "<a class='gotoLine' href='#43:10'>43:10</a> Uncaught SyntaxError: The requested module 'https://unpkg.com/@picmo/popup-picker@latest/dist/umd/picmo-popup.js' does not provide an export named 'createPopup'"

Any hint for me? I'm really stuck on this part.

[joeattardi]

You're using the UMD version of the module with an import statement. This won't work; only ES modules work with imports. UMD modules are loaded with a script tag.

But then you are mixing an ESM import (your import of the main picmo package) with a UMD, which won't work either.

Two options:

(1) Use the UMD version of the base picmo package as well, both loaded with script tags. (2) Use the ESM distribution of @picmo/popup-picker from unpkg. Note that you will need to add ?module to the URL, otherwise your browser will likely give an error about an invalid relative path. If you do it this way you don't need the picmo import since the popup module imports it.

So for the ESM route, you need just a single import:

import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module';

Hope this helps. In the future please use the discussions for asking general questions like this, thanks!

[vnihoul77]

Wahoo, that's a really complete answer, I can't thank you enough for that!

I managed to make it work using your solution, but it only works in Fiddle for some reason and throws the SyntaxError: Cannot use import statement outside a module error when used on a regular web page:

Note: I am aware this is a very frequently asked question but I am using pure Javascript and therefore I can't manage to fix it using the Node.js solutions on StackOverflow

I am trying to install the Popup picker from Picmojs but it was really tricky as it's not a usual library to import as a script tag.

For some reason, my code is working in Fiddle, but as soon as implemented on my web page, it throws the SyntaxError: Cannot use import statement outside a module error.

Here's my working fiddle code:

import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module';

const triggerButton = document.getElementById('button');

// Create the picker
const picker = createPopup({

    className: "",
  hideOnClickOutside: true,
  hideOnEmojiSelect: true,
  hideOnEscape: true,
  showCloseButton: true,
  position: 'bottom-start', //https://floating-ui.com/docs/computeposition#placement
  //position: 'auto';

}, {
  // The element that triggers the popup
  triggerElement: triggerButton,

  // The element to position the picker relative to - often this is also the trigger element,
  referenceElement: triggerButton,

});

// The picker emits an event when an emoji is selected. Do with it as you will!
picker.addEventListener('emoji:select', event => {
  console.log('Emoji selected:', event.emoji);
});

triggerButton.addEventListener('click', event => {
  picker.toggle()
});

<input id="button" class="pickerContainer" type="button" value="Input Button">

However, when used on an HTML element of Bubble (a no-code editor), I get errors.

I also get the same result when the code is used in a script tag on Fiddle (Example)

//import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module';

const triggerButton = document.getElementById('button');

// Create the picker
const picker = createPopup({

    className: "",
  hideOnClickOutside: true,
  hideOnEmojiSelect: true,
  hideOnEscape: true,
  showCloseButton: true,
  position: 'bottom-start', //https://floating-ui.com/docs/computeposition#placement
  //position: 'auto';

}, {
  // The element that triggers the popup
  triggerElement: triggerButton,

  // The element to position the picker relative to - often this is also the trigger element,
  referenceElement: triggerButton,

});

// The picker emits an event when an emoji is selected. Do with it as you will!
picker.addEventListener('emoji:select', event => {
  console.log('Emoji selected:', event.emoji);
});

triggerButton.addEventListener('click', event => {
  picker.toggle()
});

<script type="module">
import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module';
</script>

<input id="button" class="pickerContainer" type="button" value="Input Button">

Any hint on why this is not working? Thanks!