ES6 Module Support?

[kaseyhinton]

I am trying to use this library in a polymer 3 typescript project. Would it be possible to add support for es6 modules?

Code

import dayjs from 'dayjs';

Result

my-app.ts:73 One or more components failed to load SyntaxError: The requested module '../node_modules/dayjs/dayjs.min.js' does not provide an export named 'default'

Workaround

<script src="node_modules/dayjs/dayjs.min.js" async></script>

[ghost]

try this import * as dayjs from 'dayjs';

[kaseyhinton]

When i import like that i receive an error

One or more components failed to load TypeError: Cannot set property 'dayjs' of undefined

Is there something i have not configured properly with typescript perhaps?

[ghost]

Have you ever tried the --allowSyntheticDefaultImports option for tsc? I think with that option you may use the ES6 syntax.

[alxdnlnko]

Script tag workaround helps in browser, but I can't test (jest) my ES6 modules which use dayjs.
I vote for ES6 modules support! Isn't it a "must-have" feature nowdays, when browsers get native modue imports support? Especially for such nice and usefull tool like dayjs :)

[iamkun]

🎉 This is included in version 1.8.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[juhangsin]

One issue with --allowSyntheticDefaultImports is that, as library developers we can't rely on this to be set. We really need way to use this library without this flag.

[jogibear9988]

Why is this issue closed? I still get this error when using

import dayjs from '/node_modules/dayjs/dayjs.min.js';

[jogibear9988]

like this I could use it in ES6 directly (without minification)

import dayjs from '../../node_modules/dayjs/esm/index.js'
import LocalizedFormat from '../../node_modules/dayjs/esm/plugin/localizedFormat/index.js'

[hakimio]

@iamkun browser config in your package.json should be pointing to esm bundle like in firebase package.json to fix this issue. Please take a look at it when you have some time.

[iamkun]

Should we use esm in this way?

import dayjs from 'dayjs/esm/index.js'

[hakimio]

@iamkun at least when using Angular, that would cause "deep import" warnings. If you fixed package.json we could just use ES6 module without doing these kind of deep imports.

[hakimio]

Detailed discussion about this on firebase repository: firebase/firebase-js-sdk#3315 (comment)

[hakimio]

If we follow NodeJS documentation module config should point to ES6 module and main can point to commonJS module for backwards compatibility. I think it might be best if dayjs defined its modules the same way firebase does:

  "main": "dayjs.min.js",
  "module": "esm/index.js",
  "browser": "esm/index.js"

[iamkun]

@hakimio Thanks. You can find some related issue here #598

[hakimio]

@iamkun if you can't change module because of #492 , maybe you could at least add browser config?

[iamkun]

Cool, I'm not sure if browser has the same side effect or not, some more test is needed before adding.

[hakimio]

@iamkun browser config shouldn't have any effect on nodejs. It just might be important to test if it doesn't break TypeScript projects.

[hiredgunhouse]

I try that:

import * as dayjs from 'dayjs'
var someDate = dayjs(new Date()).add(28, 'day')

and I get dayjs is not a function
How come there is no sample of ES6 import in the docs?

[hakimio]

@hiredgunhouse
For some reason the way you import it changed: import dayjs from 'dayjs';:
https://stackblitz.com/edit/js-uccszw

[iamkun]

🎉 This issue has been resolved in version 1.10.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[lukepuplett]

I'm running version 1.10.5 and I have the original problem still.

Uncaught SyntaxError: The requested module '../lib/dayjs/dayjs.min.js' does not provide an export named 'default'

Transpiled TypeScript to deployed JavaScript looks like this in browser:

import dayjs from "../lib/dayjs/dayjs.min.js";

[nativ69]

Same problem here.
however, I found a workaround, just import ESM directly.
for example:
import dayjs from 'https://unpkg.com/[email protected]/esm/index.js'; this is for JavaScript, for TypeScript (haven't tested by myself) import index.d.js

the downside is for this workaround are:
A. it's without minification
B. browser will make 4 requests to load the basic needed (index.js, en.js, utils.js and constants.js)

It will be better if dayjs include minified esm bundle version for browsers.

[EricYangXD]

import dayjs from 'node_modules/dayjs/esm/index';

works fine for my angular project.

[MagnusOxlund]

Is there still no ES module support for deployment directly to browsers?