Troubles migrating away from bower

Questions
1

I’ve been having issues with migrating away from bower using bower-away. When I try to start my project now, I get the following error:

yarn start 
yarn run v1.12.3
$ ember serve

Directory not found: bower_components


Stack Trace and Error Report: /var/folders/8h/j9zgv6t52pz2qd_xsnhlv0yr0000gn/T/error.dump.e8be45d71975e1facda7f232149d57d3.log
error Command failed with exit code 1.

In case there are those who don’t know how bower-away works, it adds all the dependencies in bower.json to the "dependencies" section of package.json with a prefix: "@bower_components/<package_name>": "<package_url>". It then replaces the physical bower_components directory with a symlink to node_modules/@bower_components.

Looking at the strack trace, the source code that is throwing the error (Line 261) seems to not like symlinks…

# node_modules/broccoli/lib/builder.js

254    checkInputPathsExist() {
255      // We might consider checking this.unwatchedPaths as well.
256      for (let i = 0; i < this.watchedPaths.length; i++) {
257        let isDirectory;
258        try {
259          isDirectory = fs.statSync(this.watchedPaths[i]).isDirectory();
260        } catch (err) {
261          throw new this.constructor.BuilderError('Directory not found: ' + this.watchedPaths[i]);
262        }
263        if (!isDirectory) {
264          throw new this.constructor.BuilderError('Not a directory: ' + this.watchedPaths[i]);
265        }
266      }
267    }

Any ideas? Or is there a more reliable away to migrate away from bower?

Thanks in advance!

2

I’ve not had the best experience using the yarn-specific "@bower_components/***" implementation and most of the time I’ve actually upgraded the bower dependencies to use the version that has been deployed directly to npm. People who used to “deploy” things on bower have now been catching up an moving their stuff to npm, but it can sometimes be a bit tricky with versions during the transition.

How big is your list of bower components? Is it even remotely possible that you might convert them to use npm directly? (I don’t mean switch from Yarn to npm, but I mean for them to be “real” npm dependencies)

3

Thanks for your response. It isn’t too big. There’s only 8 bower dependencies that have been moved into package.json via bower-away. So, it looks feasible to do.

Could you explain to me the process? I’m still new to the node.js ecosystem and how to manage dependencies.

Just in case, here is the list of bower components in my project.

1. "@bower_components/bourbon": "thoughtbot/bourbon.git",
2. "@bower_components/countdownjs": "mckamey/countdownjs#^2.6.0",
3. "@bower_components/font-awesome": "FortAwesome/Font-Awesome#~4.5.0",
4. "@bower_components/gsap": "greensock/GreenSock-JS#~1.19.0",
5. "@bower_components/material-design-lite": "google/material-design-lite#^1.2.1",
6. "@bower_components/neat": "thoughtbot/neat#^1.8.0",
7. "@bower_components/normalize-css": "necolas/normalize.css.git#semver:^8.0.0",
8. "@bower_components/refills": "thoughtbot/refills.git",
9. "@bower_components/seiyria-bootstrap-slider": "seiyria/bootstrap-slider#~6.0.6",
4

Ok so the main process that I’m thinking of is actually using direct requirements for things instead of going through bower, and when looking for direct requirements you should look to see if anyone has made something for the ember ecosystem (i.e. an ember addon).

The first thing that I would ask: is your app currently in a working state? If you’re saying that this bower-away upgrade has broken things and you’re trying to fix them all at once I would recommend checking out this video:

I would pay particular attention to “step 2” in the process

  1. Upgrade 3rd-party dependencies and addons, one at a time

In your case, you’re not thinking about upgrading, but instead porting across to direct npm dependencies and ember addons. For example GitHub - yapplabs/ember-cli-bourbon: Include bourbon in an ember-cli app. or https://github.com/martndemus/ember-font-awesome

1 Like
5

Thank you! I ended up taking the second approach of looking for the add-ons in the ember ecosystem, and adding them one at a time and fixing any issues caused by the migration. Things seem to be working now!

1 Like
6

I’m so glad that ended up working for you :heart_eyes: :tada: