some bower_components can`t require

[tamamadesu]

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

[tamamadesu]

for example , when I install x-editable , I can`t require it in webpack!

[nilssolanki]

Have you tried specifying the exact path to the js file? Eg. require('x-editable/dist/bootstrap3-editable/bootstrap-editable.min.js');

Alternatively you could create an issue on the x-editable github repository, asking them to include a main (if it makes sense in this project).

[tamamadesu]

Finally, I built a bower_main_json.js file , like:

{ "bower_name":{ "main": [" xxx.js","xxx.css","xxx.jpg"] } }

and write a node script for replace the bower.json. so, I will run the script first !

[dickeylth]

@nilssolanki I've encounted similar problem, and webpack throws error: Module not found: Error: Cannot resolve module 'pointman/path/to/sub/file.js' in /xxx/mtop @ ./index.js 23:0-19.

In my code:

require('pointman/path/to/sub/file.js')

It seems that event in the bower components I set the "main": "index.js", requiring other single modules in the bower component is not resolvale, for example, for the following bower component:

• node_modules
• bower_components
  • test
    • index.js
    • test.js
    • bower.json
    • ...
• index.js

In the index.js, require 'test/test' would throw similar error:

var test = require('test/test');

ERROR in ./index.js
Module not found: Error: Cannot resolve module 'test/test' in /xxx/mtop @ ./index.js 25:8-28

adding the .js still won't work:

ERROR in ./index.js
Module not found: Error: Cannot resolve module 'test/test.js' in /xxx/mtop
 @ ./index.js 25:8-31

But moving test dir to node_modules would work, so I wonder if there's any different between bower & webpack integration and npm & webpack integration?

[cnlevy]

It is due to the fact that webpack (probably the webpack.ResolverPlugin.DirectoryDescriptionFilePlugin) expects the "main" field to be a string. It doesn't handle when "main" is an array of strings (angular-xeditable, for eample). Meanwhile, you can either:

• install the npm version
• or require() the file directly, like require('./bower_components/angular-xeditable/dist/js/xeditable.js')