Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

CommonJS formatted import resulting in build errors #464

Closed
denver-HJS opened this issue Oct 5, 2015 · 9 comments
Closed

CommonJS formatted import resulting in build errors #464

denver-HJS opened this issue Oct 5, 2015 · 9 comments
Labels
enhancement
Milestone
v0.5.1

Comments

@denver-HJS
Copy link

Hi, first off I'm very happy with this project and thank you for continuing to support it!

The issue I'm having is trying to import the Angular Datatables library as a web component. I am using Browserify in my Gulp build, which relies on CommonJS style module imports/exports. That being said, my Angular module is defined like so:

const angular = require('angular');

  var requires = [
    require('angular-material'),
    require('angular-ui-router'),
    require('angular-material-icons'),
    require('angular-datatables')];

  const igAppModule = angular.module('igApp', requires);

This has worked thus far with all of the other NPM packages included in the requires array. However, with the addition of the 'angular-datatables' dependency my Gulp build will only print out this nondescript error message

gulp-notify: [Compile Error] Unexpected token

The actual bundling of the modules occurs here (Note: I've taken off both the ngAnnotate and babelify transforms, but the error still persists):

var bundler = browserify({
    entries: entryPoint,
    debug: true,
    cache: {},
    packageCache: {},
    fullPaths: !isProd
  });

  var transforms = [
    { 'name':babelify, 'options': {}},
    { 'name':ngAnnotate, 'options': {}}
  ];

  transforms.forEach(function(transform) {
    bundler.transform(transform.name, transform.options);
  });

    var stream = bundler.bundle();

    return stream.on('error', errorHandler)
      .pipe(source(file))
      .pipe(gulpif(isProd, buffer()))
      .pipe(gulpif(isProd, srcMaps.init()))
      .pipe(gulpif(isProd, streamify(uglify({
        compress: { drop_console: true }
      }))))
      .pipe(gulpif(isProd, srcMaps.write('./')))
      .pipe(gulp.dest("./dist/"))
      .pipe(browserSync.stream({ once: true }));
  }

If you have any ideas on where I could be going wrong please advise.
@l-lin
Copy link
Owner

l-lin commented Oct 6, 2015

I'm not an user of gulp (more a grunt user), so I can't really help you on this one 😞

@denver-HJS
Copy link
Author

Hello again - now that I have more practice with Browserify and the way it conceives web components in the CommonJS format I think I have a simple fix that would make this library available to those using it.

This example is taken from the angular ui-router project, but it illustrates supporting CommonJS modules in an easy way:

/* commonjs package manager support (eg componentjs) */
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){ module.exports = 'ui.router'; }

In this case it would be module.exports = 'datatables' to match the DI used in the angular app module.

Is there any way that you could add those lines to your release and publish it to NPM? I know that I would be very grateful and believe many others would be too.

l-lin added a commit that referenced this issue Oct 26, 2015
@l-lin
Add commonJS support #464
0f9f822
@l-lin l-lin added this to the v0.5.1 milestone Oct 26, 2015
@l-lin l-lin closed this as completed Oct 26, 2015
@l-lin
Copy link
Owner

l-lin commented Oct 27, 2015

I can't publish as there are already someone else that published the project and I don't have the permission to publish in this module.

@aaronroberson
Copy link
Contributor

@l-lin what is your npm username so I can make you an owner of the npm package? @denver-HJS I've synced my fork and published v0.5.1 to npm.

@l-lin
Copy link
Owner

l-lin commented Dec 9, 2015

@aaronroberson, it's the same as my github username: l-lin

@aaronroberson
Copy link
Contributor

You are now an owner! Feel free to update it to point to your repo instead
of my fork. I don't believe I have permissions to do so because I don't
have permissions on your repo.

On Wed, Dec 9, 2015 at 8:24 AM Louis LIN [email protected] wrote:

@aaronroberson https://github.com/aaronroberson, it's the same as my
github username: l-lin

—
Reply to this email directly or view it on GitHub
#464 (comment)
.

@l-lin
Copy link
Owner

l-lin commented Dec 9, 2015

Thanks @aaronroberson 👍

@denver-HJS
Copy link
Author

Awesome, many thanks to both of you for the follow up on this. :)

@aaronroberson
Copy link
Contributor

aaronroberson commented Apr 1, 2019 via email

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
v0.5.1
Development

No branches or pull requests
3 participants
@aaronroberson @denver-HJS @l-lin