lpiepiora / bower-webpack-plugin Goto Github PK

Hi,
after installing a node module that has a bower.json inside and wanting to require this module (reflux in my example); it seems bower-webpack-plugin mess with it and fail to recognize it is a npm module :

ERROR in reflux (bower component)
Module not found: Error: Cannot resolve 'file' or 'directory' ./dist/reflux.js in C:\Users\hokkos\Code\reflux-webpack-example\node_modules\reflux
 @ reflux (bower component) 1:17-44

Here is a reproduction of the error :
https://github.com/hokkos/reflux-webpack-example

npm install
npm run start

It fails; comment the line in package.json file :

plugins: [new BowerWebpackPlugin()]

And it works.

Thanks.

Can you supply 2? Some repositories have .bower.js with a proceeding dot and vice versa.
I tried

           new BowerWebpackPlugin({
                manifestFiles: ["bower.json", ".bower.json"]
            }),

Module not found: Error: Cannot resolve module 'jquery'

Requesting a module, using the alias should resolve the actual name.

E.g. given resolve.alias: { xyz: "modu" }, the require("xyz") should resolve to /abc/bower_components/modu/bower.json.

See #1

Config:

resolve: {
  modulesDirectories: [
    destPath,
    'node_modules',
    'web_modules'
  ]
...
plugins: [
...
  new BowerWebpackPlugin({
    excludes: /.*\.less/
  }),
..

Causes an error:

ERROR in (webpack)-dev-server/client?http://localhost:3000
Module not found: Error: No bower component: /Users/[bower_components]/socket.io/[bower.json]
 @ (webpack)-dev-server/client?http://localhost:3000 1:9-29

The example needs to add the Bootstrap CSS to work correctly. Adding ...

require("./bower_components/bootstrap/dist/css/bootstrap.min.css");

... to entry.js seems to fix it.

Also the specified index.html has 'Bowerk Webpack Plugin' instead of 'Bower Webpack Plugin'

Hope that helps.

When I require "react", I only get the last module "react-dom" .
because of the bower.json 'main' field is an array.

{
"name": "react",
"main": ["react.js","react-dom.js"],
"ignore": []
}
But ,I want get both of the module ,how to resolve this ,thank you !

When I require "react", I only get the last module "react-dom" .
because of the bower.json 'main' field is an array.

{
"name": "react",
"main": ["react.js","react-dom.js"],
"ignore": []
}

Can we consider adding overrides support in project's bower.json or as an option object? The same way as wiredep and main-bower-files do. Fortunately, it should be limited to main keys.

Passing overrides as an option would be also great because it provides some opportunities of the decisions during build process.

This would also solve #19.

Is this plugin under the MIT license? If so, can you add the license file? Happy to add it and submit a PR @lpiepiora

I was previously having an issue with js-data which turned out to be because of this plugin. It seems that any plugin that contains a proper UMD definition will mess up globals inside of that script.

I have an example repo of this over here. This behaviour also occurs with angular-moment.

Is there any way to fix this so that I can load modules that don't need to be shimmed?

Hi friends.
Please help me with this. I try to use BowerWebpack for looking for bower_components, but it seems get only js file, how about css file. Thanks !

require('select2.css'); //This line is not work
require('select2'); //this line work as expect

The plugin should re-use existing resolve.modulesDirectories configuration when resolving modules.

It seems that simply the presence of this plugin in my webpack config prevents exposed variables from getting to the browser. In my setup below, I should have window.$ and window.jQuery available to the browser. I'm not sure if I'm misunderstanding something w/ either this plugin or webpack, or if I've encountered a bug.

Here is my config where everything works as expected and the browser gets its two vars:

var path = require("path");
var webpack = require("webpack");

module.exports = {
  context: __dirname + '/frontend', // the project dir
  entry: {
    _application: __dirname + "/frontend/javascripts/_application.coffee"
  },
  output: {
    filename: '[name].bundle.js',
    // We want to save the bundle in the same directory as the other JS.
    path: __dirname + '/app/assets/javascripts/webpack',
    sourceMapFilename: 'webpack/[file].map'
  },
  resolve: {
    root: [path.join(__dirname, "javascripts"),
           path.join(__dirname, "stylesheets")],
    extensions: ["", ".js", ".jsx", ".scss", ".css", ".sass", "config.js"]
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=runtime' },
      { test: /\.coffee$/, loader: "coffee-loader" },
      { test: require.resolve("jquery"), loader: "expose?jQuery" },
      { test: require.resolve("jquery"), loader: "expose?$" }
    ]
  }
};

And here's my output. Notice the module count:

Hash: 3a2446f63dff7fbe0421
Version: webpack 1.7.3
Time: 1824ms
                 Asset     Size  Chunks             Chunk Names
_application.bundle.js  1.47 MB       0  [emitted]  _application
    + 175 hidden modules

Now when I include this plugin the way I think I want to:

var path = require("path");
var webpack = require("webpack");
var BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
  context: __dirname + '/frontend', // the project dir
  entry: {
    _application: __dirname + "/frontend/javascripts/_application.coffee"
  },
  output: {
    filename: '[name].bundle.js',
    // We want to save the bundle in the same directory as the other JS.
    path: __dirname + '/app/assets/javascripts/webpack',
    sourceMapFilename: 'webpack/[file].map'
  },
  resolve: {
    root: [path.join(__dirname, "javascripts"),
           path.join(__dirname, "stylesheets")],
    extensions: ["", ".js", ".jsx", ".scss", ".css", ".sass", "config.js"]
  },
  plugins: [
    new BowerWebpackPlugin({
      excludes: /.*\.less/
    }),
    new webpack.ProvidePlugin({
      $:      "jquery",
      jQuery: "jquery"
    })
  ],
  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=runtime' },
      { test: /\.coffee$/, loader: "coffee-loader" },
      { test: require.resolve("jquery"), loader: "expose?jQuery" },
      { test: require.resolve("jquery"), loader: "expose?$" }
    ]
  }
};

My output is the following. Notice two less modules than before:

Note: The code generator has deoptimised the styling of "/Users/EricFields/Development/vanda/frontend/bower_components/jquery/dist/jquery.js" as it exceeds the max of "100KB".
Hash: 088000ddc3b4debaf043
Version: webpack 1.7.3
Time: 4625ms
                 Asset     Size  Chunks             Chunk Names
_application.bundle.js  1.36 MB       0  [emitted]  _application
   [2] jquery (bower component) 45 bytes {0} [built]
    + 173 hidden modules

In this scenario, window.$ and window.jQuery are no longer available.

I'd love some help or insight. Happy to provide more details. Thank you.

I am using angular js , and a module i try http://likeastore.github.io/ngDialog/ also requiring angular.js and is getting failed.

require('angular') inside ngDialog is looking for angular inside node_modules instead of bower_components

Handle module dependencies. When a bower manifest declares a dependency on some other module, the referenced module should be also included.

For example, if for module X, a bower.json contains:

  "dependencies": {
    "jquery": ">= 1.9.0"
  }

then, when the module is required via require("x"), the require("jquery") should be automatically added.

Here's how I reproduce the problem, maybe you can tell me what is going wrong?

git clone [email protected]:angular-class/angular2-webpack-starter.git
cd angular2-webpack-starter/
bower install bootstrap
bower install jquery
npm install --save-dev webpack file-loader style-loader css-loader bower-webpack-plugin
npm install

Edit the webpack.config.js to add these lines:

var BowerWebpackPlugin = require('bower-webpack-plugin');

Change the config.plugins line to this:

config.plugins = [].concat(
new BowerWebpackPlugin(),
newwebpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
combine_common_chunks, environment_plugins.all, environment_plugins[NODE_ENV]);

Then when I run rm -rf build; NODE_ENV=development npm run webpack --colors --display-error-details --display-cached

It blows up with tons of errors.

Any idea? Thanks in advance for your help.

Hi,

I am trying to exclude 'angular' from being loaded via the BowerWebpackPlugin in favour of using the npm package, but for some reason this does not seem to work. The 'excludes' regular expression seems to be ignored and the package still loads via bower.

        new BowerWebpackPlugin({
            modulesDirectories: ["js/libs/bower_components"],
            manifestFiles: "bower.json",
            includes: /.*/,
            excludes: [/angular/],
            searchResolveModulesDirectories: false
        }),

I'm having trouble figuring out how to add libraries that are added to jQuery, for example MaterializeCSS.

This is the error I'm getting:

Uncaught TypeError: $(...).dropdown is not a function

My plugins in my config looks like this:

plugins: [
    new BowerWebpackPlugin(),
    new webpack.ProvidePlugin({
      $: 'jquery',
      Vue: 'vue',
      VueResource: 'vue-resource',
      VueRouter: 'vue-router'
    })
  ],

Hi!
I found that this plugin ignores resolve.modulesDirectories configuration option. In my case it is set to ["node_modules", "bower_components"] and I want webpack to look at node_module first, but instead I get my deps that are available in both node_modules and bower_components bundled from last one. May be I just missed something.

When using a custom directory for bower modules, unless explicitly pointed at this directory in the webpack configuration, this plugin fails to resolve any modules.
The expected bower behaviour is to install and resolve components to the directory specified in configuration, which defaults to bower_components when left unspecified.

http://bower.io/docs/config/#directory

Hi,
I re-did your example and when doing :

webpack --progress --colors

It shows :

 54% 3/4 build modules

and hangs, never finish, and eat up RAM.

So I found that now it works. But I got yet another trouble. :)
After bower install videojs we will get bower.json:

...
  "main": [
    "dist/video-js/video.js",
    "dist/video-js/video-js.css"
  ],
...

This will compile to:

function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__(18);
    module.exports = __webpack_require__(19);

/***/ },

And it will not work correctly because we will take last file - CSS.

some bower_componentse`s bower.json has no setting "main" ， so, when I require the bower_component , it is error ! , how I should do ?

Something wrong when i require 'Swiper' from bower

Hi,
I try to integrate some bower packages in a boilerplate project : react-starter-kit that uses webpack.
I setted up this branch to try it :
https://github.com/hokkos/react-starter-kit/tree/BowerIntegration
It seems the require('d3') is correct in the entry javascript file : src/app.js, but not in a nested javascript file : src/components/Link.js

I can't make it works. If you have an idea, thanks a lot.