🐛 Upgrading from 1.2.0 to 1.3.0 breaks moment.js #418

Olian04 · 2017-12-27T22:17:21Z

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

The text was updated successfully, but these errors were encountered:

brandon93s · 2017-12-27T22:53:33Z

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 · 2017-12-27T23:24:03Z

The addition of the following lines resulted in the "breaking change". Commenting them out in master restores previous functionality:

parcel/src/Resolver.js

Lines 50 to 58 in 0eb4487

    
           // libraries like d3.js specifies node.js specific files in the "main" which breaks the build 
        
           // we use the "module" or "jsnext:main" field to get the full dependency tree if available 
        
           const main = [pkg.module, pkg['jsnext:main']].find( 
        
             entry => typeof entry === 'string' 
        
           ); 
        
           if (main) { 
        
             pkg.main = main; 
        
           }

Original: #298
PR: #299
Follow-up: #359

@fathyb @devongovett

For reference, moment's package.json:

"main": "./moment.js",
"jsnext:main": "./src/moment.js",

./moment.js
./src/moment.js

Olian04 · 2017-12-27T23:29:32Z

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

fathyb · 2017-12-27T23:35:37Z

@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 }; }

Olian04 · 2017-12-29T00:35:18Z

@fathyb yea, parcel users Babel for js files. But it uses tsc for ts files. So I'm not really sure how referring to Babel is relevant. Or am I missing something?

Olian04 · 2017-12-29T00:36:13Z

@brandon93s what exactly makes this a question? o_0

fathyb · 2017-12-29T03:52:21Z

@Olian04 TypeScript sources are treated like any JavaScript files once they are processed. If you use "module": "es6" your import declarations are transformed by Babel to require calls with default interoperability like described above.

brandon93s · 2017-12-30T04:46:54Z

@Olian04 - mostly a parcel team question to spawn discussion on how to handle this. The change that lead to this behavior is valid, and consumers can get past it with appropriate imports. However, it won't be compatible in many cases with existing code so we'll need to determine a path forward for handling it.

swyxio · 2018-01-04T04:42:00Z

ah. so parcel doesnt work with typescript imports?

gregorysl · 2018-01-09T22:57:12Z

Any update on this one?

robcrocombe · 2018-01-10T10:45:38Z

This is also breaking my project. I need import moment from 'moment'; for Parcel, but import * as moment from 'moment'; for running tests (which compile from TS directly). Any help would be appreciated.

fathyb · 2018-01-10T12:47:54Z

#530 has been created to fix this and has been tested with moment. I encourage you to try it while it's being reviewed as it changes how Parcel interpret import * as.

trustyoo86 · 2018-02-20T18:09:50Z

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! 👍

TimNZ · 2018-03-03T08:07:02Z

I've tried to use two react date UI packages that require('moment') and are broken by the es6'fying of the returned moment object (if I understand the issue correctly) by Parcel/Babel
i.e. { default: moment, __esModule: true }

What exactly is happening, and is there anything I can do now to stop that happening? Such as a .babelrc option?

Not using typescript.

Not realistic to have to create forks of packages that then use moment to work around this.

jdalton · 2018-03-09T08:02:50Z

@Olian04

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

Your expectation is incorrect. If it worked in previous versions of parcel then that was a 🐛.

brandon93s added the ❔ Question label Dec 28, 2017

brandon93s mentioned this issue Jan 3, 2018

Parcel not working with HyperHTML (import package sub-folder) #477

Closed

emmenko mentioned this issue Jan 3, 2018

TypeError: _super.call is not a function apollographql/apollo-client#2785

Closed

yesmeck mentioned this issue Jan 9, 2018

Uncaught TypeError: moment.locale is not a function ant-design/ant-design#8876

Closed

fathyb mentioned this issue Jan 10, 2018

[WIP/RFC] Fix ES6 wildcard import of functions #530

Closed

fathyb mentioned this issue Jan 17, 2018

🙋 moment.js zh-cn fail #491

Closed

tadasant mentioned this issue Feb 13, 2018

zen-observable import breaks queries in apollo-client when transpiled apollographql/apollo-link#248

Closed

fathyb mentioned this issue Mar 9, 2018

Set TypeScript option esModuleInterop to true by default #971

Merged

davidnagli added 🐛 Bug 🙏 Help Wanted and removed ❔ Question labels Mar 9, 2018

devongovett closed this as completed in #971 Mar 20, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛 Upgrading from 1.2.0 to 1.3.0 breaks moment.js #418

🐛 Upgrading from 1.2.0 to 1.3.0 breaks moment.js #418

Olian04 commented Dec 27, 2017

brandon93s commented Dec 27, 2017

brandon93s commented Dec 27, 2017 •

edited

Olian04 commented Dec 27, 2017

fathyb commented Dec 27, 2017 •

edited

Olian04 commented Dec 29, 2017

Olian04 commented Dec 29, 2017

fathyb commented Dec 29, 2017

brandon93s commented Dec 30, 2017

swyxio commented Jan 4, 2018

gregorysl commented Jan 9, 2018

robcrocombe commented Jan 10, 2018

fathyb commented Jan 10, 2018

trustyoo86 commented Feb 20, 2018

TimNZ commented Mar 3, 2018 •

edited

jdalton commented Mar 9, 2018 •

edited

🐛 Upgrading from 1.2.0 to 1.3.0 breaks moment.js #418

🐛 Upgrading from 1.2.0 to 1.3.0 breaks moment.js #418

Comments

Olian04 commented Dec 27, 2017

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

🤔 Expected Behavior

😯 Current Behavior

🔦 Context

🌍 Your Environment

brandon93s commented Dec 27, 2017

brandon93s commented Dec 27, 2017 • edited

Olian04 commented Dec 27, 2017

fathyb commented Dec 27, 2017 • edited

Olian04 commented Dec 29, 2017

Olian04 commented Dec 29, 2017

fathyb commented Dec 29, 2017

brandon93s commented Dec 30, 2017

swyxio commented Jan 4, 2018

gregorysl commented Jan 9, 2018

robcrocombe commented Jan 10, 2018

fathyb commented Jan 10, 2018

trustyoo86 commented Feb 20, 2018

TimNZ commented Mar 3, 2018 • edited

jdalton commented Mar 9, 2018 • edited

brandon93s commented Dec 27, 2017 •

edited

fathyb commented Dec 27, 2017 •

edited

TimNZ commented Mar 3, 2018 •

edited

jdalton commented Mar 9, 2018 •

edited