Aurelia Binding Error


#1

This is a really weird error I’m seeing in my application. If I use: “aurelia-bootstrapper”: “2.3.0” and I do someobject.push({key: value}); the html that is repeating in a for loop bound to that object is adding 2 more empty objects and those rendering empty html.

When I downgrade to “aurelia-bootstrapper”: “2.2.0” it adds one empty object when pushing to the array. Any idea why this might be happening? This was working fine about two week ago. I’m not sure if I upgraded some package and now it’s all messed up.

My package.json

   {
  "name": "my site",
  "license": "UNLICENSED",
  "version": "1.1.2",
  "appversion": "1.0",
  "build": "1",
  "main": "dist/main.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/site/some-app.git"
  },
  "scripts": {
    "build": "npm run build:dev && npm run build:stage && npm run build:prod",
    "build:dev": "cross-env NODE_ENV=dev npm run webpack -- --progress --profile",
    "build:qa": "cross-env NODE_ENV=qa npm run webpack -- --progress --profile",
    "build:stage": "cross-env NODE_ENV=stage npm run webpack -- --progress --profile",
    "build:prod": "cross-env NODE_ENV=prod npm run webpack -- --progress --profile",
    "build:prodstats": "cross-env NODE_ENV=prod npm run webpack -- --progress --profile --json > stats.json",
    "start": "npm run server:dev",
    "start:local": "npm run server:local",
    "server": "npm run server:dev",
    "server:local": "cross-env NODE_ENV=local npm run webpack-dev-server -- --inline --progress --profile",
    "server:dev": "cross-env NODE_ENV=localdev npm run webpack-dev-server -- --inline --progress --profile --watch",
    "server:dev:hmr": "npm run server:dev -- --hot",
    "server:prod": "http-server dist --cors",
    "webpack": "cross-env TS_NODE_PROJECT=tsconfig.tsnode.json TS_NODE_FAST=true ./node_modules/.bin/webpack",
    "webpack-dev-server": "cross-env TS_NODE_PROJECT=tsconfig.tsnode.json TS_NODE_FAST=true ./node_modules/.bin/webpack-dev-server"
  },
  "dependencies": {
    "@types/clndr": "^1.4.0",
    "aurelia-bootstrapper": "2.2.0",
    "hard-source-webpack-plugin": "^0.9.0",
    "interactjs": "^1.2.8",
    "jquery": "^3.1.1",
    "jquery-visible": "^1.2.0",
    "npm": "^6.1.0",
    "scrolltofixed": "^1.0.6",
    "tooltipster": "^4.2.2"
  },
  "devDependencies": {
    "@easy-webpack/core": "^2.0.1",
    "@types/dropzone": "^5.0.4",
    "@types/flexslider": "^2.0.28",
    "@types/jqueryui": "^1.11.32",
    "@types/moment-range": "^3.1.0",
    "@types/scrolltofixed": "0.0.28",
    "@types/tooltipster": "0.0.29",
    "@types/velocity-animate": "^1.2.28",
    "@types/webpack": "^4.4.4",
    "aurelia-api": "^3.0.0-rc9",
    "aurelia-authentication": "^3.0.0-rc9",
    "aurelia-bootstrap-tagsinput": "^1.1.2",
    "aurelia-dialog": "1.0.0-rc.2.0.0",
    "aurelia-froala-editor": "file:custom/aurelia-froala-editor",
    "aurelia-kendoui-bridge": "^1.5.1",
    "aurelia-mdl-plugin": "^1.0.0",
    "aurelia-webpack-plugin": "^3.0.0",
    "autogrow": "^1.0.6",
    "autoprefixer": "^8.6.4",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "bluebird": "^3.4.7",
    "clean-webpack-plugin": "^0.1.16",
    "cleave.js": "^1.3.7",
    "clipboard": "^2.0.1",
    "clipboard-js": "^0.3.3",
    "clndr": "^1.4.6",
    "copy-webpack-plugin": "^4.5.2",
    "countdown": "^2.6.0",
    "cross-env": "^5.2.0",
    "css-loader": "^0.28.11",
    "dropzone": "^5.4.0",
    "exports-loader": "^0.7.0",
    "expose-loader": "^0.7.3",
    "express": "^4.16.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "firebase": "^5.2.0",
    "flexslider": "^2.6.0",
    "font-awesome": "^4.7.0",
    "froala-oembed": "^1.0.2",
    "fs": "0.0.1-security",
    "getmdl-select": "^2.0.1",
    "happypack": "^5.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "http-server": "^0.11.1",
    "jquery-autotab": "^1.9.2",
    "jquery-ui": "^1.12.0",
    "jquery-ui-bundle": "^1.12.1-migrate",
    "json-loader": "^0.5.4",
    "kendo-ui-core": "^2018.2.620",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "lity": "^2.2.2",
    "load-script": "^1.0.0",
    "lodash": "^4.17.10",
    "mapbox": "^1.0.0-beta3",
    "mapbox-gl": "^0.46.0",
    "material-design-lite": "^1.3.0",
    "medium-editor": "^5.23.2",
    "medium-editor-insert-plugin": "^2.5.0",
    "moment": "^2.22.2",
    "moment-duration-format": "^2.2.2",
    "moment-range": "^4.0.1",
    "mysql": "^2.12.0",
    "nprogress": "^0.2.0",
    "numeral": "^2.0.6",
    "perfect-scrollbar": "^0.6.12",
    "plyr": "^3.3.21",
    "raw-loader": "^0.5.1",
    "rotate-icon": "^1.0.0",
    "scrollmagic": "^2.0.5",
    "slugify": "^1.2.6",
    "socket.io": "^2.1.1",
    "socket.io-client": "^2.1.1",
    "style-loader": "^0.21.0",
    "swiper": "^4.3.3",
    "tag-it": "^2.0.0",
    "ts-loader": "^4.4.2",
    "typescript": "^2.5.3",
    "typings": "^2.1.0",
    "url-loader": "^1.0.1",
    "url-metadata": "^2.1.7",
    "validate.js": "^0.12.0",
    "velocity-animate": "^1.2.3",
    "webpack": "^4.14.0",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

Update: I had to use NPM shrinkwrap because the current packages have this binding error. Hopefully this helps someone else. Revert back to Aurelia bootstrap 2.2 and then make sure to revert all the peer dependencies to earlier versions and it works.


#2

for fixing subdependecies, see Trying the new features of aurelia-framework@1.3.0-rc for the easier option with yarn