es6-modulespolymer-3.x

How to import an npm package into Polymer 3


I often find packages on npm that I want to include in a Polymer3 element.

the instructions to install the package are often to use npm with something like npm install fingerprintjs2

Below I included the basic Polymer 3 elementas an example. but i get the error

Uncaught TypeError: Cannot read property 'exports' of undefined

I dont understand how I should import from https://github.com/Valve/fingerprintjs2

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import './node_modules/fingerprintjs2/dist/fingerprint2.min.js';
class FingerPrint extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {display: block;}
      </style>
      <h2>Finger Print</h2>
    `;
  }
  ready() {
    super.ready();
    setTimeout(function () {
      Fingerprint2.get(function (components) {
        console.log(components)
      })  
  }, 5000)
  }
} window.customElements.define('finger-print', FingerPrint);

if I try to import it with

import Fingerprint2 from './node_modules/fingerprintjs2/dist/fingerprint2.min.js';

then I get the error Uncaught SyntaxError: The requested module '../fingerprintjs2/dist/fingerprint2.min.js' does not provide an export named 'default'

I also tried

import {Fingerprint2} from './node_modules/fingerprintjs2/dist/fingerprint2.min.js';

and get Uncaught SyntaxError: The requested module '../fingerprintjs2/dist/fingerprint2.min.js' does not provide an export named 'Fingerprint2'


Solution

  • very simple:

    import Fingerprint2 from 'fingerprint2'