Angular 2 - SystemJS require is not defined

Question

I've been trying to update my angular-seed project from a Release Candidate to the Release Version. After updating my dependencies and fixing some breaking changes, I got this error when I run my project:

Error: (SystemJS) require is not defined
ReferenceError: require is not defined
    at eval (http://localhost:5555/node_modules/traceur/src/node/api.js:22:12)
    at eval (<anonymous>)
Evaluating http://localhost:5555/node_modules/traceur/src/node/api.js
Error loading http://localhost:5555/node_modules/traceur/src/node/api.js
Unable to load transpiler to transpile http://localhost:5555/node_modules/@angular/router/index.js
Error loading http://localhost:5555/node_modules/@angular/router/index.js as "@angular/router" from http://localhost:5555/app/app.module.js
    at eval (http://localhost:5555/node_modules/traceur/src/node/api.js:22:12)
    at eval (<anonymous>)
Evaluating http://localhost:5555/node_modules/traceur/src/node/api.js
Error loading http://localhost:5555/node_modules/traceur/src/node/api.js
Unable to load transpiler to transpile http://localhost:5555/node_modules/@angular/router/index.js
Error loading http://localhost:5555/node_modules/@angular/router/index.js as "@angular/router" from http://localhost:5555/app/app.module.js

I don't understand why this is happening since I haven't touched anything that has to do with SystemJS. Here is my index with the SystemJS code:

<% if (ENV === 'dev') { %>
<script>
  System.config(<%= JSON.stringify(SYSTEM_CONFIG, null, 2)
%>)
</script>
<% } %>

Here is the config object:

protected SYSTEM_CONFIG_DEV: any = {
  defaultJSExtensions: true,
  packageConfigPaths: [
    `/node_modules/*/package.json`,
    `/node_modules/**/package.json`,
    `/node_modules/@angular/*/package.json`
  ],
  paths: {
    [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
      '@angular/common': `node_modules/@angular/common/bundles/common.umd.js`,
      '@angular/compiler': `node_modules/@angular/compiler/bundles/compiler.umd.js`,
      '@angular/core': `node_modules/@angular/core/bundles/core.umd.js`,
      '@angular/forms': `node_modules/@angular/forms/bundles/forms.umd.js`,
      '@angular/http': `node_modules/@angular/http/bundles/http.umd.js`,
      '@angular/platform-browser': `node_modules/@angular/platform-browser/bundles/platform-browser.umd.js`,
      '@angular/platform-browser-dynamic': `node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js`,
      '@angular/router': `node_modules/@angular/router/index.js`,
      'rxjs/*': `node_modules/rxjs/*`,
      'app/*': `/app/*`,
      '*': `node_modules/*`
  },
  packages: {
    rxjs: { format: 'register', defaultExtension: 'js' }
  }
};

How can I fix this?

There's a similar issue and resolution in http://stackoverflow.com/a/34954984/280842 - does that solve the issue for you? — filype, Nov 14 '16 at 22:21
I already tried that solution but it didn't worked. After I switched `commonjs` to `system` it crashed on the terminal when I ran the project. — hxekyel, Nov 15 '16 at 12:34
@hxekyel What exactly does "crashed on the terminal" mean? What was the message? — Cobus Kruger, Feb 21 '17 at 11:02

Angular 2 - SystemJS require is not defined

0 Answers0