webpack: TypeError: Data must be a string or a buffer

Here is a workaround to help you to find the wrong import.

Let’s say you have some wrong import somewhere in your code:

export { Some } from './missing-file';

You can improve the error message by manually editing the following file: node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js and insert some log at line 144:

   updateHash(hash) {
      super.updateHash(hash);
      const hashValue = this.getHashValue(this.importDependency.module);

      if (this.importDependency.module != null){
         // console.log('Module resource: ', this.importDependency.module.resource);
      }else{
         console.log('\nFile not found: ', this.importDependency);
      }

      hash.update(hashValue);
   }

So you get this more explicit message:

 86% hashing                                                                               
File not found:  HarmonyImportDependency {
  module: null,
  request: './missing-file',
  userRequest: './missing-file',
  range: [ 562, 600 ],
  importedVar: '__WEBPACK_IMPORTED_MODULE_8__missing_file__',
  loc: SourceLocation { index: -1 } }
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 (/app/node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js:149:6)

Finally, search for ‘./missing-file’ string in your project to find which file contains the wrong import.

The problems occurs when trying to export a file not present on the disk. While import error show a clear error message:

import { MissingFile } from './MissingFile';

ERROR in /app/src/app/components/somecomponent/index.ts (6,29): Cannot find module './MissingFile'.)
webpack: Failed to compile.

The error during export does not help :

export { MissingFile } from './MissingFile';

webpack: Compiling...
 86% hashingcrypto.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 (/app/node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js:144:8)
    at /app/node_modules/webpack/lib/DependenciesBlock.js:33:5
    at Array.forEach (native)
    at NormalModule.DependenciesBlock.updateHash (/app/node_modules/webpack/lib/DependenciesBlock.js:32:20)
    at NormalModule.Module.updateHash (/app/node_modules/webpack/lib/Module.js:162:41)
    at NormalModule.updateHash (/app/node_modules/webpack/lib/NormalModule.js:327:30)
    at modules.forEach.m (/app/node_modules/webpack/lib/Chunk.js:253:31)
    at Array.forEach (native)
    at Chunk.updateHash (/app/node_modules/webpack/lib/Chunk.js:253:16)
    at Compilation.createHash (/app/node_modules/webpack/lib/Compilation.js:989:10)
    at sealPart2 (/app/node_modules/webpack/lib/Compilation.js:580:9)
    at next (/app/node_modules/tapable/lib/Tapable.js:138:11)
    at Compilation.<anonymous> (/app/node_modules/webpack/lib/ProgressPlugin.js:110:5)
    at next (/app/node_modules/tapable/lib/Tapable.js:140:14)
    at ExtractTextPlugin.<anonymous> (/app/node_modules/extract-text-webpack-plugin/index.js:297:5)
    at /app/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/app/node_modules/async/dist/async.js:936:13)
    at /app/node_modules/async/dist/async.js:840:16
    at /app/node_modules/extract-text-webpack-plugin/index.js:281:6
    at /app/node_modules/async/dist/async.js:356:16
    at iteratorCallback (/app/node_modules/async/dist/async.js:936:13)
    at /app/node_modules/async/dist/async.js:840:16
    at /app/node_modules/extract-text-webpack-plugin/index.js:278:13
    at /app/node_modules/async/dist/async.js:3025:16
    at eachOfArrayLike (/app/node_modules/async/dist/async.js:941:9)
    at eachOf (/app/node_modules/async/dist/async.js:991:5)
    at Object.eachLimit (/app/node_modules/async/dist/async.js:3089:3)
    at /app/node_modules/extract-text-webpack-plugin/index.js:252:11
    at /app/node_modules/async/dist/async.js:3025:16
    at eachOfArrayLike (/app/node_modules/async/dist/async.js:941:9)
    at eachOf (/app/node_modules/async/dist/async.js:991:5)
    at Object.eachLimit (/app/node_modules/async/dist/async.js:3089:3)
    at ExtractTextPlugin.<anonymous> (/app/node_modules/extract-text-webpack-plugin/index.js:249:10)
    at Compilation.applyPluginsAsyncSeries (/app/node_modules/tapable/lib/Tapable.js:142:13)
    at Compilation.seal (/app/node_modules/webpack/lib/Compilation.js:545:8)
    at /app/node_modules/webpack/lib/Compiler.js:474:16
    at /app/node_modules/tapable/lib/Tapable.js:225:11
    at _addModuleChain (/app/node_modules/webpack/lib/Compilation.js:452:11)
    at processModuleDependencies.err (/app/node_modules/webpack/lib/Compilation.js:423:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

I get that problem when I try to reexport not existing class from file, for example export { ManageUsersComponent } from './manage-users.component'; when ManageUsersComponent does not exist.

I get it, its a problem with code, but I would appreciate better error message instead of:

86% hashingTypeError: Data must be a string or a buffer
    at Hash.update (crypto.js:74:16)
    at HarmonyExportImportedSpecifierDependency.updateHash .../node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js:144:8)
    at .../node_modules/webpack/lib/DependenciesBlock.js:33:5
    at Array.forEach (native)

We have also the same error!!! With Version 2 from Webpack we have only problems!

Just hit the same problem here. Upgrading to Node 7.4.0 did not resolve the issue for me.

Yup. It’s missing a check. Or even if it skips an explicit check, it should fail in a way that allows the user to fix the problem.

For those using @angular/material, we got this error using the latest release of the master branch.

https://github.com/angular/material2/issues/5320

Having "@angular/material": "2.0.0-beta.7" in our package.json file fixed the compilation error.

I had the same problem. Upgrading node from 6.9.4 to 7.4.0 solved the problem for me.

In my case it was this line:

export { default as navigator }      from './navigator'

I deleted the ./navigator file but apparently webpack doesn’t check if the file exists, then reads it, gets null or undefined, then feeds this non-existent value to the crypto hash generator and then explodes.

Looks like this is a null issue. That’s why it errors like that. I wonder if it should fail earlier, though.

I did the following change:

diff --git a/src/shopview/index.js b/src/shopview/index.js
index 505c1b1..f9c5046 100644
--- a/src/shopview/index.js
+++ b/src/shopview/index.js
@@ -3,5 +3,5 @@ import ShopRate from './shopinfo/shoprate'
 // import ShopInfo from './shopinfo/shopinfo'
 // import ShopHeader from './shopheader/shopheader'
 
-export { ShopHeader, ShopRate, ShopInfo, ShopView }
+//export { ShopRate, ShopView }
 export default ShopView

This made the error disappear (gives another error, but that’s perhaps expected). That earlier export referred to code that doesn’t exist so that might explain those nulls. I’m guessing webpack needs to be stricter in this case.

I got the same error after making a bunch of changes to the code and now it’s very hard to pinpoint exactly what change is causing the issue. Is there any way to know what file/module is making trouble?

@angular/cdk was missing on my case.

I’ve meet the same issue when replacing react-router with react-router-dom. And finally figured out what happened.

Steps to reproduce this issue:

1. npm i react-router --save
2. npm i react-router-dom --save
3. npm uninstall react-router --save
4. build with webpack

This is because react-router-dom also use react-router as dependency in code below

export { Redirect as default } from 'react-router'

when you uninstall react-router, npm just naively remove it without check if it’s other module’s dependency.

+1

Should be part added to web pack.

Another case to watch out for is if you override resolve.extensions to not include .js (because I don’t have any javascript!) and are importing an es2015 module supporting package from node_modules, like react-redux.

@Toub Someone give this guy a medal. Thank you Lord! Freaking @angular/cdk.

Suggestion from @Toub saved me several hours.

Should be part added to web pack.

Yes. Install @angular/cdk

On 11-Jul-2017 6:48 PM, “Kai” notifications@github.com wrote:

@thatisuday https://github.com/thatisuday @G-Pandey https://github.com/g-pandey What have you done afterwards? I’m missing cdk too. Am I supposed to install it manually?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/webpack/webpack/issues/4072#issuecomment-314440344, or mute the thread https://github.com/notifications/unsubscribe-auth/AFcnzQfH16IUQzt92moEoZVt22DJRBBFks5sM3YVgaJpZM4Lp5SW .

@Toub

I tried your debugging code but get nothing back below is the error and my edit to the file you specified

`** NG Live Development Server is running on http://localhost:4200. ** 86% hashingcrypto.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 (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\dependencies\HarmonyExportImportedSpecifierD ependency.js:144:8) at C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\DependenciesBlock.js:33:5 at Array.forEach (native) at NormalModule.DependenciesBlock.updateHash (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\DependenciesBlock.js:32:20) at NormalModule.Module.updateHash (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\Module.js:162:41) at NormalModule.updateHash (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\NormalModule.js:327:30) at modules.forEach.m (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\Chunk.js:253:31) at Array.forEach (native) at Chunk.updateHash (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\Chunk.js:253:16) at Compilation.createHash (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\Compilation.js:989:10) at sealPart2 (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\Compilation.js:580:9) at next (C:\wamp\www\nationalgrid\public_cli\node_modules\tapable\lib\Tapable.js:202:11) at Compilation.<anonymous> (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\ProgressPlugin.js:110:5) at next (C:\wamp\www\nationalgrid\public_cli\node_modules\tapable\lib\Tapable.js:204:14) at ExtractTextPlugin.<anonymous> (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\index.js:317:5) at C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:421:16 at iteratorCallback (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:998:13) at C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:906:16 at C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\index.js:301:6 at C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:421:16 at iteratorCallback (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:998:13) at C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:906:16 at C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\index.js:298:13 at C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:3083:16 at eachOfArrayLike (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:1003:9) at eachOf (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:1051:5) at Object.eachLimit (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:3145:5) at C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\index.js:271:11 at C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:3083:16 at eachOfArrayLike (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:1003:9) at eachOf (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:1051:5) at Object.eachLimit (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\node_modules\async\dist\async.js:3145:5) at ExtractTextPlugin.<anonymous> (C:\wamp\www\nationalgrid\public_cli\node_modules\extract-text-webpack-plugin\index.js:268:10) at Compilation.applyPluginsAsyncSeries (C:\wamp\www\nationalgrid\public_cli\node_modules\tapable\lib\Tapable.js:206:13) at Compilation.seal (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\Compilation.js:545:8) at C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\Compiler.js:474:16 at C:\wamp\www\nationalgrid\public_cli\node_modules\tapable\lib\Tapable.js:289:11 at _addModuleChain (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\Compilation.js:452:11) at processModuleDependencies.err (C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\Compilation.js:423:13) at _combinedTickCallback (internal/process/next_tick.js:73:7) at process._tickCallback (internal/process/next_tick.js:104:9)`

updateHash(hash) { super.updateHash(hash); const hashValue = this.getHashValue(this.importDependency.module); if (this.importDependency.module != null){ // console.log('Module resource: ', this.importDependency.module.resource); }else{ console.log('\nFile not found: ', this.importDependency); } hash.update(hashValue); }

I had the same issue because of

export { default } from 'Progress';
export { default as ProgressBar } from 'ProgressBar';

instead of

export { default } from './Progress';
export { default as ProgressBar } from './ProgressBar';

I think the error wasn’t very clear but your comments help me.

@stephenad are you sure to edit the right file?

Your stack trace is still at line 144, so you probably edited an other version of this file.

Try again with C:\wamp\www\nationalgrid\public_cli\node_modules\angular-cli\node_modules\webpack\lib\dependencies\HarmonyExportImportedSpecifierDependency.js

Please ignore my above comment.

for anyone using angular material2 in their project, here’s the fix:

npm install – --save @angular/cdk

this is because material 2 now uses cdk as a dependency. CDK is the short form of component dev kit. This signifies that these are general-purpose tools for building components that are not coupled to Material Design

Ref: https://github.com/angular/material2/blob/master/guides/getting-started.md#step-1-install-angular-material-and-angular-cdk

Like @michaelz and @dargoan I had an issue with @angular/material package. Be sure to have "@angular/material": "2.0.0-beta.7" and not "@angular/material": "^2.0.0-beta.7". After cleaning node_modules, then npm install all is working fine.

Retested this morning, with "@angular/material": "2.0.0-beta.7" as suggested by @michaelz . It worked nice. Also, yesterday, there was a problem with npm registry when trying to fecth latest angular packages. Now resolved.

@herlon214 , this bug is fixed indeed, I was getting this error because yarn installed maximum satisfying version of webpack (2.2.1) and I resolved this by adding webpack to dependencies explicitly, now it updates to maximum available

For me is fail to configure resolve.extensions cause this error. Add the missing .vue extensions solve the problem. FYI:

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

Thx @Toub you help figure this out!

Sorry I am not a webpack expert, please open a ticket on Stackoverflow.

yes webpack 4 so how i solve this ? 😦 @Toub

88% hashinginternal/crypto/hash.js:58
    throw new ERR_INVALID_ARG_TYPE('data',
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, TypedArray, or DataView. Received type undefined
    at Hash.update (internal/crypto/hash.js:58:11)
    at BulkUpdateDecorator.update (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\lib\util\createHash.js:35:14)
    at CssModule.updateHash (D:\Intan\workspace\belisada-seller\node_modules\mini-css-extract-plugin\dist\index.js:105:10)
    at Compilation.createHash (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:2296:11)
    at hooks.optimizeTree.callAsync.err (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:1288:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:1244:27)
    at hooks.make.callAsync.err (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\lib\Compiler.js:624:17)
    at _done (eval at create (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:9:1)
    at _err2 (eval at create (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:44:22)
    at _addModuleChain (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:1095:12)
    at processModuleDependencies.err (C:\Users\Intan\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:1007:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)

Thanks @Toub This was killing me! And thanks @carlosvillademor for pointing me to this post!

@Toub You saved my day. Really thanks