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?

Quodlibet

Answer 1

I found the issue, I'm not sure who's fault it is though.

vue-bulma-tabs uses import without the extensions for Vue files. but the webpack-simple template from vue doesn't support that.

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

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

and now is working.

Quodlibet

Answer 2

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.

Notornis

yes indeed it couldn't find it, but the issue is that the vue-bulma-tabs package uses the loading of vue files without the extension, while the project created with vue cli doen't enables that option by default. the main issue is that the file that cannot be imported is not in my project code, but some package I'm loading. – Quodlibet

@carlous exactly...that is the root cause – Icarian