Transitioning away from bower in the latest 2.15.1 ember-cli update

I have been making changes to my Ember project, specifically moving away from using bower dependencies. After updating ember-cli to version 2.15.1, I transitioned the bower dependencies to package.json. Here is a list of dependencies that were moved:

"font-awesome": "~4.7.0",
"jquery.inputmask": "3.3.4",
"moment": "~2.18.1",
"moment-timezone": "0.5.13"

One of the bower dependencies we used was bootstrap-datepicker, but due to encountering an error message, I replaced it with ember-bootstrap-datetimepicker in hopes of resolving the issue. To ensure a clean setup, I reinstalled node_modules, removed bower_components, cleared tmp and dist folders, and ran npm cache clean && bower cache clean. In addition, I deleted bower.json and .bowerrc from the project and specified bowerDirectory as null in package.json to avoid broccoli looking for any bower components in ember-cli-build.js.

In my ember-cli-build.js :

const isProductionLikeBuild = ['production', 'staging', 'review', 'e2e-testing'].indexOf(env) > -1;
const app = new EmberApp(defaults, {
    fingerprint: {
      enabled: isProductionLikeBuild,
      prepend: envConf.assetsPrefix
    },
    sourcemaps: {
      enabled: !isProductionLikeBuild
    },
    minifyCSS: { enabled: isProductionLikeBuild },
    minifyJS: { enabled: isProductionLikeBuild },
    'ember-cli-babel': {
      includePolyfill: true
    },
    'ember-bootstrap-datetimepicker': {
       "importBootstrapCSS": true,
       "importBootstrapJS": true,
       "importBootstrapTheme": true
     },
    'ember-font-awesome': { fontsOutput: '/assets/fonts' },
    exportConfig: {
      environments: [
        'production',
        'staging',
        'review',
        'e2e-testing'
      ]
    }
  });

The app builds correctly when sourcemaps are turned off, however, I encounter an error after running ember s if they are enabled:

The Broccoli Plugin: [BroccoliMergeTrees: TreeMerger (vendor & appJS)] failed with:
Error: ENOENT: no such file or directory, open '/Users/martagajowczyk/Desktop/Project/project-frontend/tmp/source_map_concat-input_base_path-S2ZmmRR0.tmp/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js'
    at Error (native)
    ...
    
What could be causing this linking to bower_components?
Thanks

<p>Output from ember version --verbose && npm --version && yarn --version:</p>

<pre><code>reliable information about the topic.
ember-cli: 2.15.1
http_parser: 2.7.0
node: 6.10.3
v8: 5.1.281.101
uv: 1.9.1
zlib: 1.2.11
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k
os: darwin x64
3.10.10
0.24.6

Parts of my package.json including dependencies and dev-dependencies:

"devDependencies": {
    // List of dev dependencies
  },
  "dependencies": {
    // List of dependencies
  }

Answer №1

It appears that the issue you are facing is related to the ember-cli-bootstrap-datepicker addon. This extension includes the installation of the bootstrap-datepicker bower package, which is essential for its functionality.

If you are in need of an ember DatePicker, I suggest considering ember-pikaday.

For further addon recommendations, I advise checking out Ember Observer, or seeking guidance in the slack channel references provided on the community page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining click and change events in JQuery

Is it possible to listen for both click and change events in one code block? $(document).on("click", "button.options_buy",function(event) { // code for click event } $(document).on("change", "select.options_buy",function(event) { // code for chan ...

A guide on rendering a JSON array received from a URL using AJAX in AngularJS

Upon receiving a JSON array from the following URL: , it appears like this:https://i.stack.imgur.com/1Xrf4.png Within my AngularJS controller, I have the following code: $('#example-1').DataTable({ "ajax" : 'http://blahblahbla ...

Unable to set options, such as the footer template, in Angular UI Typeahead

I am looking for a way to enhance the results page with a custom footer that includes pagination. I have noticed that there is an option to specify a footer template in the settings, but I am struggling to find examples of how to configure these options th ...

An issue arises in Github Actions when encountering a private repository listed in the package.json file

I have included this line in the dependency section of my package.json file. "<repository>": "git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43264b5407264b5408262d3797716c6068">[email prot ...

Display the device model using Google Cloud Monitoring API

I've been utilizing a Node.js library to fetch metrics from my Google Cloud Compute Engine instances. You can find the library here. When creating a time series, the resulting data looks like this: { "points": [...], "metric": { "lab ...

The waypoints.js snippet seems to be malfunctioning in this specific context

After experimenting with waypoints.js (jQuery.waypoints) for some time, I've been attempting to utilize this library to incorporate animations on children elements within a specific container. Here is the approach I have taken: var waypoints = $( ...

How to focus on an input element in Angular 2/4

Is there a way to focus on an input element using the (click) event? I'm attempting to achieve this with the following code, but it seems like there may be something missing. (I am new to Angular) sTbState: string = 'invisible'; private ele ...

Getting an input value dynamically in a React variable when there is a change in the input field

I am having an issue with my search text box. I need to extract the value onchange and send a request to an API, but when I try using the normal event.target method, it shows an error. How can I fix this? The problem is that onchange, I need to call a func ...

How can I make v-for display additional profiles to achieve an infinite scroll effect?

Hey there! I've got a Firestore database set up to fetch profiles and display them on a page using v-for. I want to implement infinite scroll for a smoother user experience. Here's the JavaScript composable code I'm working with: import { pr ...

Encountering XMLHttpRequest errors when trying to make an AJAX POST request

I'm encountering an issue with a modal containing a form for submitting emails. Despite setting up the ajax post as usual, the submission is failing consistently. The console displays the following two errors: Setting XMLHttpRequest.withCredent ...

Refresh only a portion of a page using PHP and JavaScript

I have a webpage set up with multiple sections in separate divs. Currently, the essential divs required are <div id="main">...</div> & <div id="sidebar">...</div> Each div contains PHP code like: <?php include("page.php") ...

Dots are used to indicate overflow of title in React Material UI CardHeader

Is there a way to add ellipsis dots to the title in my Cardheader when it exceeds the parent's width (Card width)? Here is what I have attempted so far: card: { width: 275, display: "flex" }, overflowWithDots: { textOverflow: &apo ...

Potential Cross-Origin Resource Sharing (CORS) problem arises when integrating Node Express with an Ionic

Currently, I have an Ionic application that communicates with a Node Express application using Restangular. Everything works smoothly when the Node Express server is configured to use HTTP. On the Ionic app side: RestangularProvider.setBaseUrl('http ...

Extract information from an external website using AJAX in Laravel

On my cart page, I utilize ajax to retrieve destination information from the user and provide them with shipping options to calculate their shipping cost. While everything is functioning properly, one issue remains: I am unsure of how to iterate through t ...

jQuery plugin modifies keypress events

I have integrated the Jquery ImgAreaSelector plugin into my website. Within my site, I have implemented several keypress triggers using jquery. For example: $(document).bind('keypress', 'S', function(){ alert("You have pressed S key ...

Exploring the bind() method in the latest version of jQuery,

After upgrading my JQuery version, one of the plugins I was using stopped working. Despite trying to use the migrate plugin and changing all instances of bind() to on(), I still couldn't get it to work properly. The plugin in question is jQuery Paral ...

How can I go about refreshing my mapbox gl source data?

Hey there, I'm encountering an issue when attempting to update my mapbox source on click. I currently have two sources (cells, heatmap), and I am trying to add a new source using this code snippet: this.map.addSource("points", { type: "geojson", ...

Envelop a HTML element within another HTML element with the help of jQuery

Unique link Here is some sample HTML: <div><img src="http://i.imgur.com/4pB78ee.png"/></div> I am looking to use jQuery to wrap the img tag with an a tag, like this: $(function() { var a = '<a href="http://i.imgur.com/4pB78e ...

Show a specific div using jQuery fadeIn() when the user reaches the top of an HTML section

The code below has a specific purpose: 1) Determine the current scroll position. 2) Locate the parent article and determine its offsetTop for each .popup_next which represents a section on the site. 3) Calculate an offset value by adding 30px to the off ...

The submit button is not reading the JavaScript file for validation and instead goes directly to my PHP file

**Hello, I'm new to Stack Overflow. My submit button is not reading the JavaScript file I created; instead, it goes straight to the PHP file without validating the input fields first in the JavaScript file. I've been stuck here for hours and can& ...