Module not found: Error: Can't resolve when using Gulp.js WebPack

[ralphjesy12]

I am using Gulp.js via Laravel Elixir and Webpack

{ [Error: ./~/vue-bulma-tabs/src/index.js
Module not found: Error: Can't resolve './Tabs' in '/App/node_modules/vue-bulma-tabs/src'
resolve './Tabs' in '/App/node_modules/vue-bulma-tabs/src'
  using description file: /App/node_modules/vue-bulma-tabs/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /App/node_modules/vue-bulma-tabs/package.json (relative path: ./src)
    using description file: /App/node_modules/vue-bulma-tabs/package.json (relative path: ./src/Tabs)
      as directory

[blackfyre]

It should work, with ES6 imports & webpack... Another option would be to use Laravel Mix instead of Elixir.

[Rkaede]

This source for this component uses imports without specifying .vue in the filename:

From vue-bulma-tabs/src/index.js:

import Tabs from './Tabs' // should be './Tabs.vue'

To work around this you'll need to configure webpack to import .vue files without needing an extension. Adding the following to your webpack config should resolve the issue:

resolve: {
    extensions: ['*', '.js', '.vue'],
},