Posted in Uncategorized

TypeError: Data must be a string or a buffer

   February 23, 2021  17 Comments on TypeError: Data must be a string or a buffer

Using the latest 2.2.0 release, although the error was on rc.4 before I updated too.

crypto.js:73
  this._handle.update(data, encoding);
               ^

TypeError: Data must be a string or a buffer
    at TypeError (native)
    at Hash.update (crypto.js:73:16)
    at HarmonyExportImportedSpecifierDependency.updateHash (/Users/kuchumovn/work/webapp/frontend/node_modules/webpack/lib/dependencies/HarmonyExportImportedSpecifierDependency.js:144:8)
    at /Users/kuchumovn/work/webapp/frontend/node_modules/webpack/lib/DependenciesBlock.js:33:5
    at Array.forEach (native)
    at NormalModule.DependenciesBlock.updateHash (/Users/kuchumovn/work/webapp/frontend/node_modules/webpack/lib/DependenciesBlock.js:32:20)
    at NormalModule.Module.updateHash (/Users/kuchumovn/work/webapp/frontend/node_modules/webpack/lib/Module.js:162:41)
    at NormalModule.updateHash (/Users/kuchumovn/work/webapp/frontend/node_modules/webpack/lib/NormalModule.js:327:30)
    at modules.forEach.m (/Users/kuchumovn/work/webapp/frontend/node_modules/webpack/lib/Chunk.js:253:31)
    at Array.forEach (native)

I supposse it’s computing a hash for a file, and a file is empty (?) or non-existent or something like that.
Anyway no clue on the real error in this error message.

Author: Fantashit

17 thoughts on “TypeError: Data must be a string or a buffer”

  1. 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.

  2. 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.

  3. 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.

  4. 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?

  7. 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)

  8. 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)

  10. 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.

  11. 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.

  12. 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.

  15. 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

  16. @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

Comments are closed.