parcel: 🐛 Upgrading from 1.2.0 to 1.3.0 breaks moment.js

I’m using typescript and when i upgrade parcel from 1.2.0 to 1.3.1 (I’ve tried with 1.3.0 as well) the moment.js library starts complaining about moment not being a function.

🎛 Configuration (.babelrc, package.json, cli command)

// package.json
{
  "scripts": {
    "start": "parcel index.html --out-dir temp/"
  },
  "dependencies": {
    "moment": "^2.20.1",
    "parcel-bundler": "1.3.0",
    "typescript": "^2.6.2"
  }
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <script src="./app.ts"></script>
</body>
</html>

//app.ts
import * as moment from 'moment';

console.log( moment() );

No tsconfig.json

🤔 Expected Behavior

I would expect a moment object to be printed to the console.

😯 Current Behavior

With parcel v1.2.0 the moment object is printed just fine. But with parcel v1.3.0 or v1.3.1 it throws a TypeError.

b6623a1acd83678d58392c21229a4b42.js:6473 Uncaught TypeError: moment is not a function
    at Object.require.2.moment (b6623a1acd83678d58392c21229a4b42.js:6473)
    at newRequire (b6623a1acd83678d58392c21229a4b42.js:41)
    at require.4 (b6623a1acd83678d58392c21229a4b42.js:66)
    at b6623a1acd83678d58392c21229a4b42.js:71

🔦 Context

Gist of all files used to recreate bug: https://gist.github.com/Olian04/ce4e23c11a17d60c9a39247a879e54c7

🌍 Your Environment

Software	Version(s)
Parcel	1.2.0 & 1.3.0 & 1.3.1
Node	9.3.0
npm/Yarn	5.5.1 / 1.3.2 (I’ve tried with both)
Operating System	Ubuntu 17.04

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

I’m also using typescript in my projects now. I have experienced the same error as yours, Typescript is upgraded to version 2.7, it supports es6 module. so I solved the same problem as yours, try version up for typescript, and add tsconfig.json

{
 "esModuleInterop": true
}

I solved moment js problem. try this! 👍

trustyoo86 on Feb 20, 2018

@brandon93s import moment from 'moment'; isn’t valid ts, since moment doesn’t provide a default export.

Olian04 on Dec 27, 2017

Unsure yet exactly why the default behavior has changed, but the following is a workaround:

// change this
import * as moment from 'moment';

// to this
import moment from 'moment';

OR

// change this
console.log ( moment() );

// to this
console.log( moment.default() );

https://momentjs.com/docs/#/use-it/typescript/

brandon93s on Dec 27, 2017

@Olian04 ~moment is exported as default in it’s ES6 form, see the code (referenced by jsnext:main). The problem here is that the main field points to a UMD module, which uses module.exports.~

edit: Didn’t understood you were talking about ts. Yeah allowSyntheticDefaultImports is the way to go. Parcel uses Babel which will automatically find if a module is ES6 or CommonJS and export the correct value accordingly, so it’s safe to use :

var _moment = require("moment");

var _moment2 = _interopRequireDefault(_moment);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

fathyb on Dec 28, 2017