# Issue with ember build "\[BABEL\]: the code generator has deoptimised the styling of bower\_components/bootsrap/....../jquery.js as it exceeds the max of 100KB" **URL:** \ **Category:** Ember CLI\ **Created:** [April 3, 2017, 12:49pm UTC](https://discuss.emberjs.com/t/issue-with-ember-build-babel-the-code-generator-has-deoptimised-the-styling-of-bower-components-bootsrap-jquery-js-as-it-exceeds-the-max-of-100kb/12715 "2017-04-03T12:49:17Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![gautam](https://avatars.discourse-cdn.com/v4/letter/g/7ab992/32.png) [@gautam](https://discuss.emberjs.com/u/gautam)\ **Post date:** [April 3, 2017, 12:49pm UTC](https://discuss.emberjs.com/t/issue-with-ember-build-babel-the-code-generator-has-deoptimised-the-styling-of-bower-components-bootsrap-jquery-js-as-it-exceeds-the-max-of-100kb/12715/1 "2017-04-03T12:49:17Z")
Hi Everyone, 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. **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 1. 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 2. ember-cli-build.js ```auto /*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(); }; ``` 1. bower.json 2. package.json ```auto { "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 above) 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. ---
**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\ **Post date:** [April 3, 2017, 1:15pm UTC](https://discuss.emberjs.com/t/issue-with-ember-build-babel-the-code-generator-has-deoptimised-the-styling-of-bower-components-bootsrap-jquery-js-as-it-exceeds-the-max-of-100kb/12715/2 "2017-04-03T13:15:03Z")
Perhaps not asking why and switching to a bootstrap NPM version like this [GitHub - martinic/ember-cli-bootstrap-css: Lightweight addon that only adds bootstrap.css](https://github.com/martinic/ember-cli-bootstrap-css) will solve it 😉 ---
**Author:** ![gautam](https://avatars.discourse-cdn.com/v4/letter/g/7ab992/32.png) [@gautam](https://discuss.emberjs.com/u/gautam)\ **Post date:** [April 7, 2017, 4:26pm UTC](https://discuss.emberjs.com/t/issue-with-ember-build-babel-the-code-generator-has-deoptimised-the-styling-of-bower-components-bootsrap-jquery-js-as-it-exceeds-the-max-of-100kb/12715/3 "2017-04-07T16:26:53Z")
Thanks broerse, I’ll try the plugin - it’ll help in some way or the other, I’m sure 🙂 Nevertheless, it seems the root of the issue was that for some reason (could be human error) there was a duplicate ‘bower\_components’ folder in my ‘app’ folder which was causing the build to break. ‘How’ that folder found its way into the ‘app’ folder, I don’t know and that’s a question I don’t think I should ask 😉