Getting '(SystemJS) require is not defined' when trying to use BabyParse

I'm trying to use BabyParse in my Angular 2 app with SystemJS.

I've done npm install --save @types/babyparse and npm install --save babyparse and my systemjs.config.js file looks like this:

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs': 'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
      'moment': 'npm:moment/moment.js',
      'keycloak-js': 'npm:keycloak-js/dist/keycloak.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap',
      'lodash': 'npm:lodash/lodash.js',
      'babyparse': 'npm:babyparse/babyparse.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {main: './main.js', defaultExtension: 'js'},
      rxjs: {defaultExtension: 'js'},
      'angular-in-memory-web-api': {main: './index.js', defaultExtension: 'js'},
      'ng2-bootstrap': {main: 'index.js', defaultExtension: 'js'},
    }
  });
})(this);

In my component file, I imported BabyParse with import * as Baby from 'babyparse'; but when I try to run the app, I get the following error message in my console:

Error: (SystemJS) require is not defined

Here's the tracelog:

create:22 Error: (SystemJS) require is not defined
    ReferenceError: require is not defined
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:41:17)
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:881:3)
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:883:3)
        at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28)
        at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:96:43)
        at http://localhost:3000/node_modules/zone.js/dist/zone.js:462:57
    Evaluating http://localhost:3000/node_modules/babyparse/babyparse.js
    Error loading http://localhost:3000/node_modules/babyparse/babyparse.js as "babyparse" from http://localhost:3000/app/campaigns/campaign-create.component.js
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:41:17)
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:881:3)
        at eval (http://localhost:3000/node_modules/babyparse/babyparse.js:883:3)
        at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:203:28)
        at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:96:43)
        at http://localhost:3000/node_modules/zone.js/dist/zone.js:462:57
    Evaluating http://localhost:3000/node_modules/babyparse/babyparse.js
    Error loading http://localhost:3000/node_modules/babyparse/babyparse.js as "babyparse" from http://localhost:3000/app/campaigns/campaign-create.component.js(anonymous function) @ create:22ZoneDelegate.invoke @ zone.js:203Zone.run @ zone.js:96(anonymous function) @ zone.js:462ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308

Solution

In one (or more) of your files you are using the require statement.

Find it and either add a reference to node.d.ts or replace it with ES6-style import.

Adding reference

1) Install typings

2) Install node.d.ts using typings

3) add the following line to the top of your file that contains the require statement:

///<reference path="../typings/globals/node/index.d.ts" />

Using ES6-style import

import {memberName1, memberName2, memberNameN} from "../path/to/file";

Edit

The error is not in your file but it babyparse.js itself. In line 41 in babyparse.js there is a 'require' statement:

var fs = fs || require('fs').

Change this statement to fit the way you load modules in your project.

BTW are you trying to use it in client side? because 'fs' is a module of Node.js. It looks like babyparse is a server-side module.