Angular2-jwt: Uncaught ReferenceError: require is not defined

Created on 8 Jan 2016 · 11Comments · Source: auth0/angular2-jwt

I'm getting that error to browser console. I'm using https://github.com/mgechev/angular2-seed/ project as base of my own project https://github.com/tarlepp/angular-sailsjs-boilerplate-frontend-angular2 and basically I've just add this library to dependencies and I get this error.

Any glues why this is happening?

Source

tarlepp

👍1

Most helpful comment

I am seeing this issue with a newly build Angular 4 app using angular-cli.

I provided a Demo app on github, just need to add your own clientID and domain in file auth.config.ts to test.

VM7601:19 Uncaught ReferenceError: require is not defined
    at eval (eval at webpackJsonp.217.module.exports (addScript.js:9), <anonymous>:19:14)
    at eval (<anonymous>)
    at webpackJsonp.217.module.exports (addScript.js:9)
    at Object.109 (angular2-jwt.js?7cf5:1)
    at __webpack_require__ (bootstrap ce92941…:52)
    at Object.256 (addScript.js:10)
    at __webpack_require__ (bootstrap ce92941…:52)
    at webpackJsonpCallback (bootstrap ce92941…:23)
    at scripts.bundle.js:1
(anonymous) @ VM7601:19
webpackJsonp.217.module.exports @ addScript.js:9
109 @ angular2-jwt.js?7cf5:1
__webpack_require__ @ bootstrap ce92941…:52
256 @ addScript.js:10
__webpack_require__ @ bootstrap ce92941…:52
webpackJsonpCallback @ bootstrap ce92941…:23
(anonymous) @ scripts.bundle.js:1
core.es5.js:3025 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
zone.js:1265 Uncaught TypeError: Cannot read property 'apply' of undefined
    at XMLHttpRequest.desc.get [as ontimeout] (zone.js:1265)
    at XHRLocalObject.AbstractXHRObject._cleanup (abstract-xhr.js:149)
    at XMLHttpRequest.xhr.onreadystatechange (abstract-xhr.js:125)
    at XMLHttpRequest.wrapFn (zone.js:1230)
    at ZoneDelegate.invokeTask (zone.js:398)
    at Zone.runTask (zone.js:165)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:460)
desc.get @ zone.js:1265
AbstractXHRObject._cleanup @ abstract-xhr.js:149
xhr.onreadystatechange @ abstract-xhr.js:125
wrapFn @ zone.js:1230
ZoneDelegate.invokeTask @ zone.js:398
Zone.runTask @ zone.js:165
ZoneTask.invoke @ zone.js:460

rajinder-yadav on 23 Apr 2017

👍4

All 11 comments

Are you bringing angular2-jwt in with a script tag? If we set up mapping in the System.config block and remove the script tag, this error should go away.

...

map: {
  "angular2-jwt": "node_modules/angular2-jwt/angular2-jwt"
}

...

Let me know if that works :)

chenkie on 16 Jan 2016

I'm having an issue getting this library working with the grunt-focused angular2-grunt-starter. I installed angular2-jwt via NPM no problem, and added a map to the file as you mentioned above. I also added angular2-jwt.js to the gruntfile's concat step as a dependency:

// Angular 2 Bundle with Deps
concat: {
    vendor: {
        files: {
            '<%= config.dist %>/vendor/bundle.js': [
                'node_modules/angular2/bundles/angular2-polyfills.js',
                'node_modules/systemjs/dist/system.src.js',
                'node_modules/rxjs/bundles/Rx.js',
                'node_modules/angular2/bundles/angular2.dev.js',
                'node_modules/angular2/bundles/router.dev.js',
                'node_modules/angular2/bundles/http.dev.js',
                'node_modules/angular2-jwt/angular2-jwt.js'
            ]
        }
    }
},

In the resulting bundle that gets created, require() is used many times. It's only when it gets down to the angular2-jwt-related stuff that it errors out that require() is not defined:

angular2-jwt_error

Is this some kind of incompatibility between the compiled Javascript that comes in the node package and my grunt setup? The only thing I can think of is that the Javascript version of angular2-jwt expects some kind of Webpack-specific environment so it's not liking my current build process.

MasterKale on 20 Jan 2016

There isn't anything webpack specific. How are you loading your modules?

escardin on 20 Jan 2016

The concat step I posted above bundles all of the various modules into a single bundle.js file that gets included in the body of index.html:

<!doctype html>
<html lang="en">
  <head>
    <base href="/">
    <meta charset="utf-8"/>
    <title>Angular2 App</title>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="dist/assets/css/main.css">
  </head>
  <body>

    <app></app>

    <script src="dist/vendor/bundle.js"></script>
    <script>
      System.config({
        packages: {
          './': { defaultExtension: 'js' }
        },
        map: {
          'angular2': 'node_modules/angular2',
          'rxjs': 'node_modules/rxjs',
          'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt'
        }
      });
      System.import('dist/bootstrap')
        .then(null, console.error.bind(console));
    </script>
  </body>
</html>

Is that enough to answer your question? I'm still learning the ins-and-outs of Angular2 development so bear with me.

MasterKale on 20 Jan 2016

I'm not a system.js expert, but I'm surprised that starter works. the map to node modules conflicts with the contents of the bundle and should probably be unnecessary.

I think that the dev bundles are built with system packaging, whereas angular2-jwt is being built with node module resolution.

The map entry makes node module resolution work with system.js and would resolve the require statements properly. Your bundle is executing outside of that context though and so there isn't a require defined at the time it executes.

That's my theory anyway.

escardin on 20 Jan 2016

Shoot, I think you're right. All of the Angular2 modules include calls to System.register() that inject require:

System.register("angular2/src/facade/facade", ["angular2/src/facade/lang", "angular2/src/facade/async", "angular2/src/facade/exceptions", "angular2/src/facade/exception_handler"], true, function(require, exports, module) {

I'll try wrapping the angular2-jwt module in a System.register() call after lunch and see if that helps any.

MasterKale on 20 Jan 2016

You probably just need to change compilerOptions.module to system from common

escardin on 20 Jan 2016

compilerOptions.module is already set to 'system': https://github.com/jkuri/angular2-grunt-starter/blob/master/tsconfig.json

MasterKale on 20 Jan 2016

I got things working by copying the angular2-jst TypeScript file from node_modules and dropping it into a folder within my src/ directory. The build system picked up the .ts file like any other in there loaded it fine. It doesn't really solve the issue, but at least it's possible to use angular2-jwt in System.js environments.

MasterKale on 20 Jan 2016

I am seeing this issue with a newly build Angular 4 app using angular-cli.

I provided a Demo app on github, just need to add your own clientID and domain in file auth.config.ts to test.

VM7601:19 Uncaught ReferenceError: require is not defined
    at eval (eval at webpackJsonp.217.module.exports (addScript.js:9), <anonymous>:19:14)
    at eval (<anonymous>)
    at webpackJsonp.217.module.exports (addScript.js:9)
    at Object.109 (angular2-jwt.js?7cf5:1)
    at __webpack_require__ (bootstrap ce92941…:52)
    at Object.256 (addScript.js:10)
    at __webpack_require__ (bootstrap ce92941…:52)
    at webpackJsonpCallback (bootstrap ce92941…:23)
    at scripts.bundle.js:1
(anonymous) @ VM7601:19
webpackJsonp.217.module.exports @ addScript.js:9
109 @ angular2-jwt.js?7cf5:1
__webpack_require__ @ bootstrap ce92941…:52
256 @ addScript.js:10
__webpack_require__ @ bootstrap ce92941…:52
webpackJsonpCallback @ bootstrap ce92941…:23
(anonymous) @ scripts.bundle.js:1
core.es5.js:3025 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
zone.js:1265 Uncaught TypeError: Cannot read property 'apply' of undefined
    at XMLHttpRequest.desc.get [as ontimeout] (zone.js:1265)
    at XHRLocalObject.AbstractXHRObject._cleanup (abstract-xhr.js:149)
    at XMLHttpRequest.xhr.onreadystatechange (abstract-xhr.js:125)
    at XMLHttpRequest.wrapFn (zone.js:1230)
    at ZoneDelegate.invokeTask (zone.js:398)
    at Zone.runTask (zone.js:165)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:460)
desc.get @ zone.js:1265
AbstractXHRObject._cleanup @ abstract-xhr.js:149
xhr.onreadystatechange @ abstract-xhr.js:125
wrapFn @ zone.js:1230
ZoneDelegate.invokeTask @ zone.js:398
Zone.runTask @ zone.js:165
ZoneTask.invoke @ zone.js:460

rajinder-yadav on 23 Apr 2017

👍4

do we have solution for this ?