Issues with import into es6 project

[RobMaskell]

I've pulled this into my project from NPM and I'm trying to import it into a webcomponent but

import { humanizeDuration } from 'humanize-duration/humanize-duration.js'; gives an error that there is not export named humanizeDuration

So I tried

import 'humanize-duration/humanize-duration.js'; but this gives an error Uncaught (in promise) TypeError: Cannot set property 'humanizeDuration' of undefined from the following line 1118 code

  humanizeDuration.humanizer = humanizer;

  if (typeof define === 'function' && define.amd) {
    define(function () {
      return humanizeDuration;
    });
  } else if (typeof module !== 'undefined' && module.exports) {
    module.exports = humanizeDuration;
  } else {
    this.humanizeDuration = humanizeDuration;
  }
})(); // eslint-disable-line semi

basically the last line of real code in the above snippet.

Any ideas how to get around it?

[EvanHahn]

This seems like an issue with how CommonJS imports are being rewritten with imports.

Does import humanizeDuration from 'humanize-duration work?

[RobMaskell]

Fair shout, I gave it a try and this was the result Uncaught (in promise) SyntaxError: The requested module '../../node_modules/humanize-duration/humanize-duration.js' does not provide an export named 'default'

[EvanHahn]

Are you using anything to transpile ES6 imports to be compatible with CommonJS exports?

[RobMaskell]

It's a polymer app, so currently just running with npm start without any transpiling, babel used for prod though

[EvanHahn]

Okay. Are you able to import any other CommonJS modules this way?

[RobMaskell]

I seem to remember having similar issues with time-elements that I also use, but I think they now have two versions and modern one and a legacy.
I did try adding the script tag to index.html and while that does work in dev it breaks when the proper build script runs which is what reminded me of time-elements.
I think the polymer dev server does something for imports in terms of rewriting them but I'm not sure exactly what.

[EvanHahn]

Could you try writing a simple CommonJS module and using it? Here's a simple one:

module.exports = function () {
  return 'Hello world!'
}

My guess is that this isn't a problem with Humanize Duration but instead a problem with some module setup.

[RobMaskell]

Hmmm I just found this PWA Stater Kit FAQ maybe it just needs a ESM. I'll have a play with script tags and see if I can make it work.

[andrew-c-tran]

@RobMaskell see #159

[RobMaskell]

Thanks @andrew-c-tran I'll check this out at the weekend when I have a little more time

[RobMaskell]

Ok I tried and changed my imports as follows

import { LitElement, html } from 'lit-element';

import * as humanizeDuration from 'humanize-duration';

import '@polymer/marked-element/marked-element.js';
import '@polymer/paper-spinner/paper-spinner-lite.js'
import '@polymer/paper-fab/paper-fab.js';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/iron-icons/device-icons.js';

I get the following error

humanize-duration.js:1185 Uncaught (in promise) TypeError: Cannot set property 'humanizeDuration' of undefined
    at humanize-duration.js:1185
    at humanize-duration.js:1187

it doesn't like the line

this.humanizeDuration = humanizeDuration;

[EvanHahn]

@RobMaskell I suspect this is an issue with your build setup. How are you bundling dependencies?