Parcel: The "data" argument must be one of type string, TypedArray, or DataView. Received type object

Created on 14 Oct 2019 · 10Comments · Source: parcel-bundler/parcel

🐛 bug report

Watching .sass files resulted in a weird exception. It only happened once and I'm not able to reproduce it.

🎛 Configuration (.babelrc, package.json, cli command)

No configuration.

🤔 Expected Behavior

The .sass files should be compiled normally.

😯 Current Behavior

The compilation fails with the following error:

> parcel watch resources/sass/*.sass --no-source-maps -d public/assets/css --no-hmr

🚨  The "data" argument must be one of type string, TypedArray, or DataView. Received type object
    at Hash.update (internal/crypto/hash.js:58:11)
    at Bundle.getHash (/mnt/Portable/Projekte/treb/node_modules/parcel-bundler/src/Bundle.js:301:12)
    at Bundle.package (/mnt/Portable/Projekte/treb/node_modules/parcel-bundler/src/Bundle.js:186:23)
    at Bundler.bundle (/mnt/Portable/Projekte/treb/node_modules/parcel-bundler/src/Bundler.js:325:56)
    at process._tickCallback (internal/process/next_tick.js:68:7)

💁 Possible Solution

???

🔦 Context

I need the .sass files compiled to CSS.

💻 Code Sample

Nothing wrong with my .sass files.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.12.3
| Node | 10.16.3
| npm/Yarn | 6.12.0
| Operating System | Ubuntu x64 5.0.0-31-generic #33~18.04.1

Bug

Source

axelrindle

👍1

Most helpful comment

This may or may not help anyone else (doesn't fix parcel itself either), but I also got this error and it turned out I had a script tag pointing to a non-existent file. Fixing that resolved this issue for me. 👍

jordanjtidwell on 14 Dec 2019

👍9

All 10 comments

I've seen this bug intermittently as well. I'm having trouble figuring out steps to reliably reproduce it, but I looked through the code and may see what's causing it:

Within the parcel-bundler source, a newly generated Asset instance has its hash field set to null.
Within Pipeline.process, it calls processAsset to do the actual processing. As the last step of processing, it populates the asset's hash field.
The call to processAsset is wrapped in a try/catch block, since processing an asset may fail.
Therefore, if processing an asset throws an exception before the last step, then the hash field remains null.

The error message in the call stack is consistent with passing a null to Node's Hash object, as demonstrated in the Node REPL:

$ node
Welcome to Node.js v12.1.0.
Type ".help" for more information.
> const crypto = require('crypto');
undefined
> let hash = crypto.createHash('md5');
undefined
> hash.update(null)
Thrown:
TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type object

So it seems that an error during processing may result in an asset having a null hash, which then throws an error when the bundle tries to use that hash.

joshkel on 22 Oct 2019

Hit this bug as well. It only happens on refresh when there is a malformed target.

I added some exception-handling code to Bundle.js, and discovered that it was because of malformed HTML in a watched file, specifically:

<body>
  <script src="scriptCannotBeUnitaryTag" />
</body>

I modified Bundle.js to add some error handling:

  getHash() {
    let hash = crypto.createHash('md5');
    for (let asset of this.assets) {
      try {
        hash.update(asset.hash);
      } catch (Ex) { // Added this clause
        console.error("Couldn't import: ", asset.name, "\n\nBecause:", Ex);
      }
    }
    return hash.digest('hex');
  }

Which gave me this output (path elided):

$ parcel -p 5050 index.html
Server running at http://localhost:5050 
⠋ Building...Couldn't import:  [...]/index.html 

Because: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type object
    at Hash.update (internal/crypto/hash.js:70:11)
    at Bundle.getHash ([...]/node_modules/parcel/src/Bundle.js:302:12)
    at Bundle.package ([...]/node_modules/parcel/src/Bundle.js:186:23)
    at Bundler.bundle ([...]/node_modules/parcel/src/Bundler.js:325:49)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Timeout._onTimeout ([...]/node_modules/parcel/src/Bundler.js:817:7) {
  code: 'ERR_INVALID_ARG_TYPE'
}
✨  Built in 15ms.

Hopefully this is enough detail for someone to fix this! I'd love to get the root error message ("index.html:1:1: Unexpected token (1:1)") instead of the weird TypeError message.

afeinman on 24 Oct 2019

👍1

Just an update on this.

I had the same issue, but it completely nuked my package.json, presenting only the following afterwards:

{
  "devDependencies": {
    "sass": "^1.23.7"
  }
}

It took all my keywords, scripts, etc.

vSanjo on 3 Dec 2019

👍1

came into same issue with The "data" argument must be one of type string, TypedArray, or DataView. Received type object(in my error pug file) when bundling pug(error) with parcel, then my parcel task could not re-run well but always alerting with The "data" argument must be one of type string, TypedArray, or DataView. Received type object(with same error line in pug file)~

cdll on 3 Dec 2019

😕2

jordanjtidwell on 14 Dec 2019

👍9

came into same issue with The "data" argument must be one of type string, TypedArray, or DataView. Received type object(in my error pug file) when bundling pug(error) with parcel, then my parcel task could not re-run well but always alerting with The "data" argument must be one of type string, TypedArray, or DataView. Received type object(with same error line in pug file)~

Same with me - my package.json (cut off the stuff like author etc)

{
"main": "index.js",
  "scripts": {
    "dev": "parcel ./src/index.pug",
    "build": "parcel build ./src/index.pug"
  },
  "dependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-plugin-transform-react-pug": "^7.0.1",
    "pug": "^2.0.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "sass": "^1.25.0"
  }
}

and .babelrc (if needed)

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-proposal-class-properties","babel-plugin-transform-react-pug"]
  }

Edit:
After cleaning node_modules and running again npm install (clear install) - all is working well in exact config

403-html on 16 Feb 2020

came into same issue with The "data" argument must be one of type string, TypedArray, or DataView. Received type object(in my error pug file) when bundling pug(error) with parcel, then my parcel task could not re-run well but always alerting with The "data" argument must be one of type string, TypedArray, or DataView. Received type object(with same error line in pug file)~

Same with me - my package.json (cut off the stuff like author etc)
{
"main": "index.js",
  "scripts": {
    "dev": "parcel ./src/index.pug",
    "build": "parcel build ./src/index.pug"
  },
  "dependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-plugin-transform-react-pug": "^7.0.1",
    "pug": "^2.0.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "sass": "^1.25.0"
  }
}
and .babelrc (if needed)
{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-proposal-class-properties","babel-plugin-transform-react-pug"]
  }
Edit:
After cleaning node_modules and running again npm install (clear install) - all is working well in exact config

Clearing the node_modules and re-installing them also worked for me

MartijnKeesmaat on 18 Mar 2020

Same here. Issue happened, reran the command and now it works again.

augnustin on 23 Mar 2020

I have same error in watch mode when i have fixed pug syntax error in my template. After rerun the command it builds without errors

imamatory on 6 May 2020

I have created .sassrc file and after i copied this piece of code: { "includePaths": ["node_modules"] } as it stated in the docs and now it's working as expected