TypeError: data must be a string or buffer when trying to use vue-bulma-tabs

Question

I have this weird bug with vue and vue-bulma-tabs.

Project is running at http://localhost:8081/ webpack output is served from /dist/ 404s will fallback to /index.html crypto.js:74 this._handle.update(data, encoding); ^ TypeError: Data must be a string or a buffer at TypeError (native) at Hash.update (crypto.js:74:16) at HarmonyExportImportedSpecifierDependency.updateHash (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js:144:8) at /Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/DependenciesBlock.js:33:5 at Array.forEach (native) at NormalModule.DependenciesBlock.updateHash (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/DependenciesBlock.js:32:20) at NormalModule.Module.updateHash (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/Module.js:162:41) at NormalModule.updateHash (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/NormalModule.js:327:30) at modules.forEach.m (/Users/esteban/Projects/experiments/example1/node_modules/webpack/lib/Chunk.js:253:31) at Array.forEach (native) 

I think this is due to webpack, but I do not understand what the problem is, and how I can fix it.

to play it just do it

 vue init webpack-simple example1 cd example1 npm i npm i -S bulma vue-bulma-tabs 

then add this to main.js file

 import {Tabs, TabPane} from 'vue-bulma-tabs' 

then run

 npm run dev 

et voilà! there is a mistake. What am I missing?

Answer 1

I found the problem, I'm not sure who is to blame.

vue-bulma-tabs uses import without extensions for Vue files. but a simple webpack template from vue does not support this.

the solution is to configure webpack to try .vue as well as .js on webpack.config.js under the permission key, add

extensions: ['.js', '.vue']

and now it works.

Answer 2

Thus, the main reason for this problem is the import, which does not find the file you are trying to import. See https://github.com/webpack/webpack/issues/4072#issuecomment-278626604 for a workaround to add some entries to help you find what is a file that you cannot import.