Modules load and work on Chrome but not FF.

[quantuminformation]

The following app runs perfectly in Chrome but does not load anything apart from the main.js file via System.import.

https://github.com/QuantumInformation/vanilla-es6-shoppingcart

It can be run in chrome by running index.html in a browser or web server.

In FF I also get these warnings:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create es6-module-loader.js:7:27734
null es6-module-loader.js line 7 > eval:23:8

"Potentially unhandled rejection [1] initObservers@http://localhost:63342/es6-boilerplate/node_modules/es6-module-loader/dist/es6-module-loader.js line 7 > eval:33:13
ShoppingCart@http://localhost:63342/es6-boilerplate/node_modules/es6-module-loader/dist/es6-module-loader.js line 7 > eval:26:11```

[guybedford]

This sounds like an evaluation error in your application code.

[quantuminformation]

Thanks @guybedford.

I'm having trouble identifying such an issue: the only relevent code is this:

main.js

import ShoppingCart from './shoppingCart'

export class Main {
  constructor() {
    //todo look at a way to run this code after all dom is loaded
    //document.addEventListener("DOMContentLoaded", function (event) {
    //});

    //check if cart has stored items otherwise init with default items
    let cart;
    let items = localStorage.getItem("items");
    console.log(items);
    let parsedItems = JSON.parse(localStorage.getItem("items"));

    if (parsedItems === null) {
      cart = new ShoppingCart(['Ferrari F40', 'S Class', 'Tesla'], document.querySelector('#app'))
      //
    } else if (parsedItems === "") { //its been saved before but is empty (user deleted all items)
      cart = new ShoppingCart([], document.querySelector('#app'))
      //
    } else { // has user saved items
      cart = new ShoppingCart(parsedItems, document.querySelector('#app'))
    }
  }
}

shoppingcart.js

export default class ShoppingCart {
  /**
   *
   * @param defaults default items
   * @param element the element to control
   */
  constructor(defaults, element) {
    this.items = defaults;
    this.element = element;
    this.listDisplay = this.element.querySelector('#listDisplay');
    this.initObservers();
  }

  initObservers() {
    let self = this;
    Object.observe(this.items, (changes)=> {
      self.render();
      console.log(changes);
      //save changes to local storage
      localStorage.setItem("items", JSON.stringify(self.items));
    });
    this.element.querySelector('#addBtn').addEventListener("click", (e)=> {
      self.addItem(self.element.querySelector('#newItem').value);
    });
    //initial render if we have items + save
    if(this.items.length){
      self.render();
      localStorage.setItem("items", JSON.stringify(self.items));
    }
  }

  /**
   * @param item
   */
  addItem(item) {
    this.items.push(item);
  }

  removeItem(index) {
    //  let index = this.items.indexOf(item);
    //if (index > -1) {
    this.items.splice(index, 1);
    //}
  }

  render() {
    let self = this;
    let template = ""
    this.items.forEach(function (item, i) {
      template += '<li>' + item + '<button data-id="' + i + '">Delete</button></li> '
    })
    this.listDisplay.innerHTML = template;
    let result = this.listDisplay.querySelectorAll('button');

    Array.prototype.map.call(result, (el)=> {
      el.addEventListener("click", (e)=> {
        self.removeItem(e.target.getAttribute("data-id"));
      })
    });

    this.element.querySelector('#total').innerHTML = this.items.length + " items in list";
  }
}

[quantuminformation]

Opps sorry I forgot to add a shim for Object.observe for FF, will do so now and report back.

[quantuminformation]

Closing as this shim fixed the error:

https://github.com/MaxArt2501/object-observe