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

Question

我在使用 vue 和 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)

我认为与 webpack 有关，但我不明白问题是什么或如何解决。

要复制它，只需这样做

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

然后将其添加到 main.js 文件

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

然后运行

npm run dev

瞧瞧！有错误。我错过了什么？

Answer 1

我发现了问题，但我不确定是谁的错。

vue-bulma-tabs 使用不带 Vue 文件扩展名的导入。但是 vue 的 webpack-simple 模板不支持。

解决方案是配置 webpack 以尝试 .vue 和 .js 在 webpack.config.js 的 resolve 键下，添加

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

现在正在工作。

Answer 2

所以这个问题的根本原因是有一个导入没有找到您要导入的文件。请参阅 https://github.com/webpack/webpack/issues/4072#issuecomment-278626604 解决方法，添加一些日志记录以帮助您找到无法导入的文件。

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

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

webpack

vue.js

bulma