Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

(SystemJS) Multiple anonymous defines in module

See original GitHub issue

Hello,

I am getting the following error:

error

The weird thing is that my project was working earlier. I build my project into a separate directory so I have to copy over the required node modules. Before, I wasn’t preserving the folder structure so all the files were dumped into a build/libs/ directory. I now adjusted it so that it goes into the proper structure (e.g. build/node_modules/materialize-css/... or build/node_modules/@angular/...). This change however, started triggering the error above. I have seen #18 but I don’t see any differences between what I am doing and the solution mentioned there.

My setup:

Angular 2
SystemJS
Electron (I don’t think this matters, though)

app.html

...
<title>Carrots</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="../../../">

    <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

    <!-- Materialize -->
    <link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css" media="screen,projection" />
    <script src="node_modules/hammerjs/hammer.min.js"></script>
    <script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>
    <link href="./app/components/fonts/fonts.css" rel="stylesheet">

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    <link rel="stylesheet" ype="text/css" href="app/layouts/app/app.css" />
  </head>

  <body>
    <my-app>
      ...

systemjs.config.js

(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',

      // Materialize
      'materialize-css': 'npm:materialize-css',
      'angular2-materialize': 'npm:angular2-materialize',
      'materialize': 'npm:angular2-materialize'
    },
    // 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'
      },
      'materialize': {
        main: 'dist/materialize-directive',
        defaultExtension: 'js'
      },
      'materialize-css': {
        main: 'dist/js/materialize'
      }
    }
  })
})(this)

Structure:

Thanks!

Issue Analytics

State:
Created 7 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

3reactions

SamFarringtoncommented, Oct 19, 2016

I’ve managed to get it working…

I looked at the docs and in the Configuring-angular2-materialize-in-projects-created-with-angular-cli section I noticed that the package configuration for ‘materialize-css’ has the following property set

"format": "global"

I added that property the packages definition of materialize-css in my system js and this fixes the error for me.

My system.js.config.js is now as follows:

var isPublic = typeof window != "undefined";

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': (isPublic) ? '/' : 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'client',
      // 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',
      'js-base64': 'npm:js-base64/base64.js',
      'buffer': '@empty',
      'angular2-jwt': 'npm:angular2-jwt/angular2-jwt.js',
      'materialize-css': 'npm:materialize-css',
      'angular2-materialize': 'npm:angular2-materialize'
    },
    // 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'
      },
      'materialize-css': {
        "format": "global",
        "main": "dist/js/materialize",
        "defaultExtension": "js"
      },
      'angular2-materialize': {
        "main": "dist/index",
        "defaultExtension": "js"
      }
    }
  });
})(this);

Is there anyone out there who has better understanding of SystemJS who could say why this works?

We can then look adding this to the docs when we know it is the “correct” solution.

1reaction

allahbakshcommented, Oct 5, 2016

Even I am facing similar issue. I am trying to add materialize in code generated by jhipster and stuck at localhost/:103 Error: Error: Multiple anonymous defines in module http://localhost:9000/vendor/materialize-css/dist/js/materialize.js at eval (http://localhost:9000/vendor/materialize-css/dist/js/materialize.js:238:9) at eval (http://localhost:9000/vendor/materialize-css/dist/js/materialize.js:244:2) at eval (http://localhost:9000/vendor/materialize-css/dist/js/materialize.js:7470:3) Evaluating http://localhost:9000/vendor/materialize-css/dist/js/materialize.js Error loading http://localhost:9000/vendor/materialize-css/dist/js/materialize.js as “materialize-css” from http://localhost:9000/app/app.main.js(anonymous function) @ localhost/:103

@rubyboy do we have solution for this apart from what is mentioned in #18

Top Results From Across the Web

Multiple Anonymous Defines when importing module into ...

I am trying to import keycloak-js into systemjs.config.js in order to use the module in a word add-in by means of a wrapper...

systemjs/systemjs - Gitter

How do I prevent builder.compile from wrapping my module? It's creating the error: multiple anonymous defines in a module when consumed later.

Output - webpack

'anonymous' - Enable cross-origin loading without credentials; 'use-credentials' - Enable ... If multiple modules would result in the same name, output.

Errors with SystemJS - Material Design for Bootstrap

Trying to load mdb with a module loader - in this case - systemjs, reports a strange error; Multiple defines for anonymous module...

Understanding (all) JavaScript Module Formats and Tools

UMD module: Universal Module Definition, or UmdJS module ... To execute the code inside an anonymous function (() => {}) , the same...