I discovered a clever fix for the issue at hand:

To solve the problem, install an additional package called moment-es6 which comes with a default export. Then, import it using 'moment-es6' instead of 'moment':

import moment from 'moment-es6';

• If you are using systemjs, make sure to include the following in the systemjs.config.js map section:
  

  'moment-es6': 'npm:moment-es6/index.js'

• Include 'node_modules/moment-es6/**' in the include section of your rollup configs under commonjs (rollup-plugin-commonjs)

Here is the technique I used to successfully integrate typescript (version 2.1.6) with rollup (version 0.41.4) when working with moment.js.

1. For importing moment, stick to the conventional method:

   import * as moment from 'moment';

import moment from 'moment'; is not recommended for a package that does not have a default export, as it will lead to a runtime error:

moment_1.default is not a function

2. When using moment in typescript, cast moment as any and then call the default function:

   const momentFunc = (moment as any).default ? (moment as any).default : moment;
   const newFormat = momentFunc(value).format(format);
   

The usage of moment(value).format(format) can cause an error during rollup tree shaking process:

Cannot call a namespace ('moment')

We encountered a similar issue with ng-packagr, which utilizes rollup for generating a module that can be shared in an npm repository. Our project was constructed using @angular-cli with webpack.

We had two dependencies imported using the asterisk method:

 import * as dataUrl from 'dataurl';

One dependency worked well and was used like this:

 dataUrl.parse(url)

However, another import caused an error (Cannot call a namespace) because the exported object needed to be used as a function:

 import * as svgPanZoom from 'svg-pan-zoom';
 svgPanZoom(element); <== error: Cannot call a namespace

To resolve this, we assigned the exported initializer function to another constant and utilized that in the code:

 import * as svgPanZoomImport from 'svg-pan-zoom';
 const svgPanZoom = svgPanZoomImport;

 svgPanZoom(element);

We also made the recommended changes to our tsconfig.json configuration.

Version Information: ng-packagr: 1.4.1 rollup: 0.50.0 typescript: 2.3.5 @angular/cli: 1.4.8 webpack: 3.7.1

I hope this information proves useful,

Rob

I encountered the same issues that were mentioned earlier.

The code

import * as moment from 'moment';

worked fine when I was developing and loading via systemjs, but it didn't work during rollup.

On the other hand, import moment from 'moment'; worked in a rollup build but not during development.

To solve this issue without changing the code depending on the build type, I decided to add moment as a global variable and created a helper function that I import wherever I need to use it instead of directly importing moment.

This approach allows me to use the same code in both scenarios, although it may not be the most elegant solution. If there is a better way, please share!

Here's the helper function, which I added to its own file called momentLoader.ts:

import { default as mom } from 'moment';
export default function moment(args?: any): mom.Moment {
    let m = window["moment"];
    if (!m) { 
        console.error("moment does not exist globally.");
        return undefined;
    }
    return m(args);
}

To use moment in other classes, I simply import the function and call it as if I had imported moment directly:

import moment from '../../momentLoader';

let d = moment().utc("1995-12-25");

let m = moment("1995-12-25");

In order to load moment as a global variable using systemjs, I followed these steps: http://momentjs.com/docs/#/use-it/system-js/

In my case, the moment configuration for systemjs looks like this:

let meta = {
    'lib:moment/moment.js': { format: 'global' }
};

System.config({
    paths: paths,
    map: map,
    packages: packages,
    meta: meta
});

System.import('lib:moment/moment.js');

For the rollup build, make sure to include moment.js on the page using a script tag, as it won't be included in the rollup build file by default.

According to information in this discussion, using the code import moment from 'moment'; should resolve the issue.

Starting from release 2.13.0,

import * as moment from 'moment';

After attempting various methods mentioned earlier without success, I finally found a solution that worked for me:

import moment from 'moment-with-locales-es6';

Encountered a similar issue with momentJs (2.24) while working on my Angular 5 (5.2.9) project (migrated from Ng2) using Gulp and Rollup (0.58.0) for the production build.

As mentioned by others here,

import * as moment from 'moment';

is only effective during development (via SystemJS) when referencing momentJs in the packages list:

{
  name: 'moment',
  path: 'node_modules/moment/min/moment.min.js'
}

However, when using Rollup (for Production build), momentJs code is structured as an ES6 module (located in moment/src) and exports differently from conventional exports. This is why import moment from 'moment'; works with Rollup's

include: [
  'node_modules/rxjs/**',
]

and ES6 modules import.

Although utilizing an ES6 wrapper (like moment-es6) seems like a simple solution, it still relies on momentJs. Alternatively, there's another straightforward approach to address this problem - modifying your import statement from Development to Production. For instance, Gulp can employ gulp-replace at a specific stage:

return gulp.src([
     ...
    ])
    .pipe(replace('import * as moment from \'moment\';', 'import moment from \'moment\';'))
     ...;