To preface, I'm aware that I should probably avoid using Bower and instead use NPM to manage all my JavaScript dependencies. However, I'm working with some legacy code which uses Bower heavily, and until I can move everything over to NPM, I'd like to get a working version of my code base with Bower and Webpack.
That being said, I'm following the configuration setup for using Bower with Webpack from the official guide: https://webpack.github.io/docs/usage-with-bower.html
In particular, I've set up a Github repo where I was able to bower install jquery
and using the configuration from the official guide, I was able to require("jquery")
in my source code and have it work with Webpack. Given that this worked for jQuery, I assumed that it would work for other bower packages, including React.
However, after running bower install react
, I attempted to require("react")
in my source code but Webpack threw an error saying, Module not found: Error: Cannot resolve module 'react' in /Users/wmock/Desktop/using-bower-with-webpack/src
.
This is my Github repo: https://github.com/fay-jai/Using-Bower-Through-Webpack
I have 3 branches:
- The "jquery-working" branch follows the configuration from the official guide and works with jQuery installed via Bower.
- The "jquery-react-not-working" branch is the same configuration as above but with React installed via Bower. This doesn't work.
- The "master" branch has a working version for both jQuery and React installed via Bower, BUT it doesn't follow the configuration setup specified in the official Webpack documentation.
Question:
- Is there a way to get the "jquery-react-not-working" branch to work? In other words, is there a way to follow the official documentation and have bower packages like React work with Webpack?
- Are there any drawbacks to using the approach specified in the "master" branch? Should this be the more preferred way to use Bower with Webpack?
EDIT (4/12/2016):
- It seems like the DirectoryDescriptionFilePlugin can't handle an array of filenames which is why the "jquery-react-not-working" branch doesn't work.
- I'd love to hear more answers for my 2nd question but my gut tells me that using the approach specified in the "master" branch will not be ideal because: a) you have to manually alias each library and b) you might run into version conflicts if multiple libraries use the same underlying libraries as well.