ember build error: the code generator has deoptimised the styling of as it exceeds the max of 100KB

I am new to ember app and trying incredibly hard to scale the learning curve. I have been at it since the last 6 months, have learnt a lot and a lot remains still.

Recently, while trying to configure the app to include bootstrap, something broke. I have been trying since the last 3 days to figure out what went wrong, I was hoping that someone from the community might be able to help me understand things a little better.

I have looked over other stackoverflow discussions, but still haven't resolved the issue relevant to my specific case.

Other discussions with similar problem: Discussion # 1

Discussion # 2

Discussion # 3

Problem: 1. the ember build process completes with warnings and culminates with a corrupt output file that throws a Uncaught SyntaxError: Invalid or unexpected token on the chromium client, which prevents the app to load.

Symptoms: 1. "After bower install bootstrap --save and necessary app.import(...) commands, the ember build process threw a couple of warnings [BABEL]: the code generator has deoptimised the styling of bower_components/bootsrap/....../jquery.js as it exceeds the max of 100KB, followed with a 129 JSHint errors.

first few lines of JSHint Errors:

bower_components/bootstrap/Gruntfile.js: line 8, col 1, 'module' is not defined. bower_components/bootstrap/Gruntfile.js: line 18, col 12, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 19, col 14, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 20, col 32, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 21, col 25, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 28, col 26, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 29, col 32, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 434, col 3, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 435, col 3, 'require' is not defined. bower_components/bootstrap/Gruntfile.js: line 23, col 30, '__dirname' is not defined. bower_components/bootstrap/Gruntfile.js: line 395, col 18, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 441, col 13, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 441, col 38, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 452, col 7, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 458, col 24, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 462, col 14, 'process' is not defined. bower_components/bootstrap/Gruntfile.js: line 466, col 24, 'process' is not defined 17 errors bower_components/bootstrap/dist/js/bootstrap.js: line 8, col 61, Missing semicolon. bower_components/bootstrap/dist/js/bootstrap.js: line 13, col 53, Missing semicolon. bower_components/bootstrap/dist/js/bootstrap.js: line 14, col 59, Expected '===' and instead saw '=='. bower_components/bootstrap/dist/js/bootstrap.js: line 14, col 78, Expected '===' and instead saw '=='. bower_components/bootstrap/dist/js/bootstrap.js: line 15, col 113, Missing semicolon. bower_components/bootstrap/dist/js/bootstrap.js: line 17, col 9, Expected an assignment or function call and instead saw an expression. bower_components/bootstrap/dist/js/bootstrap.js: line 35, col 49, Missing semicolon. bower_components/bootstrap/dist/js/bootstrap.js: line 42, col 6, Missing semicolon.

and similar errors pointing to files in the 'bootstrap' folder (which does not exist) and the 'jquery' folder in bower_components

2. reverting back to configuration without bootstrap did not resolve the issue, the build process throws the same errors even though no 'bootstrap' folder exists in the "bower_components" folder

3. ember-cli-build.js

``

/*jshint node:true*/
/* global require, module */
 var EmberApp = require('ember-cli/lib/broccoli/ember-app');

 module.exports = function(defaults) {
   var app = new EmberApp(defaults, {
     // Add options here
   });                                                                                                                                              

   // Use app.import to add additional libraries to the generated
   // output files.
   //
   // If you need to use different assets in different
   // environments, specify an object as the first parameter. That
   // object's keys should be the environment name and the values
   // should be the asset to use in that environment.
   //
   // If the library that you are including contains AMD or ES6
   // modules that you would like to import into your application
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.

 //      app.import('bower_components/bootstrap/dist/css/bootstrap.css');
 //      app.import('bower_components/bootstrap/dist/css/bootstrap-theme.css');
 //      app.import('bower_components/bootstrap/dist/js/bootstrap.js');
     return app.toTree();
 };

``

4. bower.json

   {
"name": "ember-client", "dependencies": { "ember": "~2.10.0", "ember-cli-shims": "0.1.3", "jquery": "^3.2.1" } }

5. package.json

   {
"name": "ember-client", "version": "0.0.0", "description": "Small description for ember-client goes here", "license": "MIT", "author": "", "directories": { "doc": "doc", "test": "tests" }, "repository": "", "scripts": { "build": "ember build", "start": "ember server", "test": "ember test" }, "devDependencies": { "broccoli-asset-rev": "^2.4.5", "ember-ajax": "^2.4.1", "ember-cli": "2.10.0", "ember-cli-app-version": "^2.0.0", "ember-cli-babel": "^5.1.7", "ember-cli-dependency-checker": "^1.3.0", "ember-cli-htmlbars": "^1.0.10", "ember-cli-htmlbars-inline-precompile": "^0.3.3", "ember-cli-inject-live-reload": "^1.4.1", "ember-cli-jshint": "^2.0.1", "ember-cli-qunit": "^3.0.1", "ember-cli-release": "^0.2.9", "ember-cli-sri": "^2.1.0", "ember-cli-test-loader": "^1.1.0", "ember-cli-uglify": "^1.2.0", "ember-data": "^2.10.0", "ember-export-application-global": "^1.0.5", "ember-load-initializers": "^0.5.1", "ember-resolver": "^2.0.3", "ember-simple-auth": "1.2.0", "ember-welcome-page": "^1.0.3", "loader.js": "^4.0.10" }, "engines": { "node": ">= 0.12.0" }, "private": true, "dependencies": { "ember-ajax": "2.5.6" } }

Resultant Error in file ember-client.js (compiled output of ember build in dist folder) Deep within the file is buried one line #!/usr/bin/env node that causes the issue on the client

    grunt.log.writeln('File ' + rawFilesJs.cyan + ' created.');
    };
  });

  #!/usr/bin/env node 

  define('ember-client/bower_components/bootstrap/grunt/change-version', ['exports'], function (exports) {
    'use strict';

    /* globals Set */
    /*!

Quick Fix: 1. the uncaught syntax error exists in the compiled js file (ember-client.js) in the dist folder, removing the syntax error (highlighted in the code below) fixes the 'uncaught syntax error' issue so the app can load successfully in the browser.

Question: a) why is this happening? b) how do I permanently fix this issue without having to edit the compiled file manually every time I build the app?

I've tried to provide as much information as I thought would be necessary to summarize the issue, please let me know if you need any more details from me to get to the root of the issue.

Nothing handled the action 'addPost' in ember.js

I am creating a post that has a description and created at time stamp.But when I submit the form i get the error

Nothing handled the action 'addPost'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble. Error

This is my controller

import Ember from 'ember';

export default Ember.Controller.extend({
actions: {
    addPost: function(){

        var description = this.get('description');

        //Create New Post
        var newPost = this.store.createRecord('post', {

            description: description,

        });

        // Save to Database
        newPost.save();

        // Clear Form
        this.setProperties({

            description: '',

        });
    }
}
});

This is my model

import Model from 'ember-pouch/model';
import DS from 'ember-data';

const {
  attr,
  hasMany,
  belongsTo
} = DS;

export default Model.extend({
description: DS.attr('string'),
createdAt: DS.attr('date', {
defaultValue() { return new Date(); }
})
});

This is the view

<form>
<lable>Enter the post</lable>

<button  >post</button>
</form>

This is the router.js

import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
   location: config.locationType,
   rootURL: config.rootURL
});
Router.map(function() {
   this.route('posts', function() {
   this.route('new');
   });
});
export default Router;

Unable to figure out what is the error.

New Relic: Page load time varying widely from day to day

We recently introduced New Relic SPA monitoring on our web app. It's been over two weeks, and the data that we are seeing on New Relic is ... confusing:

The initial page load time is varying vastly, with no apparent correlation with other data (we collect traffic data using MixPanel, and the data doesn't show any particular relation between traffic spikes and performance).

The application has a Rails backend, PostGreSQL DB, EmberJS frontend and we use Heroku and AWS S3 to server the static frontend site.

Could someone with experience with monitoring tell me what this could be a symptom of? And possibly how to fix this?

On New Relic, we're using SPA monitoring with default settings

Delete a record in Ember data not working

i have a table and i have a delete button in each row and when clicked the delete button the specific row should be deleted. The table is a component. Tried the following code.

MyComponent.js

  import Ember from 'ember';

   export default Ember.Component.extend({
   actions:{
    deleteCartRecord(cartDetails){
        debugger;
        this.sendAction('deleteRecords',cartDetails);
    }
 }

});

In MyComponent.hbs calling the action as follows

<button type="button" class="btn btn-danger" >Delete</button>

My Controller

   import Ember from 'ember';
   export default Ember.Controller.extend({
     actions:{
        deleteRecords(data){
          debugger; 
            let confirmation = confirm("are you sure to delete");
            if(confirmation)
            {
               debugger;
               data.deleteRecord();
               data.save();

            }
       }
  }
});

The template file in which component is called

    <hr>
</div>

<div class="col-lg-12 col-md-12">
    <div class="checkout-summery-wrapper">
        <div class="total-label">Total</div>
        <div class="total"></div>
        <!--<div class="tax-text">( Inclusive of all taxes )</div>-->
        <div class="place-order-button"><button type="button" class="btn siemens-btn">Place Order</button></div>
    </div>
</div>

<div class="col-lg-12 col-md-12">
    
    <div class="panel panel-default card-list-panel">
        <div class="panel-heading-cart col-lg-12 col-md-12">
            <div class="col-lg-11 col-md-11 heading">Generic Parts</div>
            <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div>
        </div>
        <div class="panel-body">
            
        </div>
    </div>
    
    
    <div class="panel panel-default card-list-panel">
        <div class="panel-heading-cart col-lg-12 col-md-12">
            <div class="col-lg-11 col-md-11 heading">Hot Gas Path</div>
            <div class="col-lg-1 col-md-1"><a href='#' class="delete-all">Delete All</a></div>
        </div>
        <div class="panel-body">
            
        </div>
    </div>
    
</div>

I have the following problems

1. In MyComponent.hbs newCart is passed as a parameter will this delete all the record or the specific record i want?
2. MyController is not invoked from the component why is that?
3. Is this the correct way of deleting record in ember?

Thank you in advance

A helper named could not be found when trying to render component in Ember

I have the following router setup:

Router.map(function() {
  this.route("login");
  this.route("dashboard");
  this.route("projects", function() {
    this.route("show", {path: "/:project_id"});

    this.route('tasks', {path: "/:project_id/tasks" },function() {
      this.route('new', {path: "/new"});
      this.route('show', {path: "/:task_id"});
    });
  });
});

And, in templates/projects/show.hbs, I'd like to render the component for creating a new task ( the component is automatically generated by ember, but I have my own template and controllers at controllers/projects/tasks/new.js and templates/projects/tasks/new.hbs ). I tried the following:

But I receive this error:

Assertion Failed: A helper named "tasks/new" could not be found

What is the proper way of fixing this?

jQuery limitation over Angulajs, Emberjs or Knockoutjs

What are the things jQuery can not do that Angularjs, Emberjs, or Knockoutjs can do and vice versa? Angularjs and the like seems overly complicated.

Cannot perform ember data queries/rest call inside Ember.service

I'm using ember 2.12

Here's my route

import Ember from 'ember';

export default Ember.Route.extend({
    rentalService: Ember.inject.service('rentals-service'),

    model(){
        this.get('rentalService').findRentals();
        console.log('Inside route');
        console.log(this.get('store'));
        return this.get('store').findAll('rental');
  }
});

Here's my ember rental-service

import Ember from 'ember';

export default Ember.Service.extend({
  findRentals() {
    console.log("Inside servce");
    console.log(this.get('store'));
    return "hello from servce";
  }
});

Why is it I cannot access the ember-data on the rental-service? whenever I console .log this.get('store') inside the rental-service it returns an undefined. However on the routes, whenever I console.log the same code it returns this value.

Does this mean I cannot perform a rest call using ember data inside a service?

I'm using Mirage to mock a web-server/http requests