TypeError: Data must be a string or a buffer when trying touse vue-bulma-tabs

Question

I'm having this weird error 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 is related to webpack but I don't get what the issue is or how can I fix it.

to reproduce it, just do this

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

then add this to the main.js file

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

then run

npm run dev

et voilà! there is the error. what am I missing?

Answer 1

So the root cause of this problem is that there is an import that 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 logging to help you find what is the file you are not being able to import.