Parcel 2.0.0-alpha.3.2: * could not be cloned.

🐛 bug report

I have usual react project with webpack, babel@7, postcss@7 etc. And I tries to use parcel now. Parcel@1 is working good. But parcel@next show misterious error (see below).

1. I found, that fn(...args, function (err, ...re is from @parcel/utils/lib/promisify.js:4:17
2. Next I added more useful stacktrace using console.error(new Error("i'm here")) in lib/promisify.js (see below original error)
3. I had not found any 'could not be cloned' in node_modules, so looks it comes from Node.js. DOMException says about it too.

❯ parcel build src/index.jsx
DOMException [DataCloneError]: function (...args) {
    return new Promise(function (resolve, reject) {
      fn(...args, function (err, ...re...<omitted>... } could not be cloned.
    at Worker.postMessage (internal/worker.js:223:23)
    at ThreadsWorker.send (/Users/mxtnr/rocket/felix/front/node_modules/@parcel/core/node_modules/@parcel/workers/lib/threads/ThreadsWorker.js:62:17)
    at Worker.send (/Users/mxtnr/rocket/felix/front/node_modules/@parcel/core/node_modules/@parcel/workers/lib/Worker.js:81:17)
    at Worker.call (/Users/mxtnr/rocket/felix/front/node_modules/@parcel/core/node_modules/@parcel/workers/lib/Worker.js:91:10)
    at WorkerFarm.processQueue (/Users/mxtnr/rocket/felix/front/node_modules/@parcel/core/node_modules/@parcel/workers/lib/WorkerFarm.js:225:16)
    at Worker.<anonymous> (/Users/mxtnr/rocket/felix/front/node_modules/@parcel/core/node_modules/@parcel/workers/lib/WorkerFarm.js:182:35)
    at Worker.emit (events.js:210:5)
    at Worker.fork (/Users/mxtnr/rocket/felix/front/node_modules/@parcel/core/node_modules/@parcel/workers/lib/Worker.js:77:10)

useful stacktrace:

    at module.exports (/Users/mxtnr/rocket/felix/front/node_modules/parcel/node_modules/@parcel/utils/lib/promisify.js:4:17)
    at new NodeFS (/Users/mxtnr/rocket/felix/front/node_modules/parcel/node_modules/@parcel/fs/lib/NodeFS.js:48:58)
    at Command.run (/Users/mxtnr/rocket/felix/front/node_modules/parcel/lib/cli.js:97:63)
    at Command.listener (/Users/mxtnr/rocket/felix/front/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:210:5)
    at Command.parseArgs (/Users/mxtnr/rocket/felix/front/node_modules/commander/index.js:654:12)
    at Command.parse (/Users/mxtnr/rocket/felix/front/node_modules/commander/index.js:474:21)
    at Object.<anonymous> (/Users/mxtnr/rocket/felix/front/node_modules/parcel/lib/cli.js:85:9)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)

🎛 Configuration

Ok, I attached my configs, by parcel fails before it read any of them. When I install parcel into empty directory all going perfect.

cli command, .babelrc, .postcssrc, package.json,,,

parcel build test.jsx

.babelrc

{
      "plugins": [],
      "presets": [
        ["@babel/env", {
          "targets": {
          },
          "modules":     false,
          "useBuiltIns": false,
          "loose":       true
        }],
      ]
}

package.json (part)

{
  "name": "front",
  "version": "0.0.0",
  "main": "src/index.jsx",
  "dependencies": {
    "react": "^16.11.0",
  },
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "parcel": "^2.0.0-alpha.3.2",
    "postcss-modules": "^1.4.1",
  },
  "alias": {
    "src": "./src",
    "utils": "./src/utils",
    "components": "./src/components",
    "public": "./src/public",
    "layouts": "./src/layouts",
    "actions": "./src/actions",
    "containers": "./src/containers",
    "pages": "./src/pages",
    "reducers": "./src/reducers",
    "widgets": "./src/widgets"
  },

.postcssrc

{
  "modules": true,
  "plugins": {
    "postcss-import": {},
    "postcss-preset-env":  {
      "features": {},
      "autoprefixer": {
        "flexbox": false,
      }
    },
    "postcss-nested": {}
  },
  "sourceMap": true,
}

.browserslistrc

last 2 Chrome version
last 1 Safari version

💁 Possible Solution

Looks like parcel tried to send function via PostMessage…

💻 Code Sample

it’s no matter, parcel fails before it can read any source code

src/test.jsx

export function foo () {}

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-alpha.3.2
Node	v12.13.0
npm/Yarn	6.12.1/1.13.0
Operating System	macos 10.14.6 mojave

[mischnic]

TL;DR: As a workaround, use yarn instead of npm 😬

@fregante Great!

I think I’ve found the problem (it works with Yarn and is broken with npm): Some Parcel classes like MemoryFS or NodePackageManager register themselves to make sure they are serialized properly (because the structured cloning algorithm between worker threads doesn’t support among others functions). For that, the individual plugins called

import {registerSerializableClass} from '@parcel/utils';

class XYZ {}
registerSerializableClass(version, XYZ);

The worker delegation in @parcel/core would then use that list of classes to prepare objects:

import {
  prepareForSerialization,
  restoreDeserializedObject,
} from '@parcel/utils';

this.worker.postMessage(prepareForSerialization(data));

Yarn hoists the dependencies and so @parcel/utils (and the classes list) exists only once.

With npm however, every package get's its own list, so that objects of these classes aren't replaced and therefore cloning fails

./parcel/node_modules/@parcel/utils/src/serializer.js
./@parcel/optimizer-data-url/node_modules/@parcel/utils/src/serializer.js
./@parcel/reporter-cli/node_modules/@parcel/utils/src/serializer.js
./@parcel/resolver-default/node_modules/@parcel/utils/src/serializer.js
./@parcel/packager-css/node_modules/@parcel/utils/src/serializer.js
./@parcel/core/node_modules/@parcel/utils/src/serializer.js
./@parcel/cache/node_modules/@parcel/utils/src/serializer.js
./@parcel/package-manager/node_modules/@parcel/utils/src/serializer.js
./@parcel/packager-js/node_modules/@parcel/utils/src/serializer.js
./@parcel/transformer-html/node_modules/@parcel/utils/src/serializer.js
./@parcel/runtime-browser-hmr/node_modules/@parcel/utils/src/serializer.js
./@parcel/packager-html/node_modules/@parcel/utils/src/serializer.js
./@parcel/transformer-postcss/node_modules/@parcel/utils/src/serializer.js
./@parcel/runtime-js/node_modules/@parcel/utils/src/serializer.js
./@parcel/optimizer-terser/node_modules/@parcel/utils/src/serializer.js
./@parcel/transformer-js/node_modules/@parcel/utils/src/serializer.js
./@parcel/transformer-stylus/node_modules/@parcel/utils/src/serializer.js
./@parcel/bundler-default/node_modules/@parcel/utils/src/serializer.js
./@parcel/source-map/node_modules/@parcel/utils/src/serializer.js
./@parcel/transformer-babel/node_modules/@parcel/utils/src/serializer.js
./@parcel/reporter-hmr-server/node_modules/@parcel/utils/src/serializer.js
./@parcel/transformer-coffeescript/node_modules/@parcel/utils/src/serializer.js
./@parcel/scope-hoisting/node_modules/@parcel/utils/src/serializer.js
./@parcel/transformer-sass/node_modules/@parcel/utils/src/serializer.js
./@parcel/reporter-dev-server/node_modules/@parcel/utils/src/serializer.js
./@parcel/optimizer-htmlnano/node_modules/@parcel/utils/src/serializer.js
./@parcel/transformer-react-refresh-wrap/node_modules/@parcel/utils/src/serializer.js

[mischnic]

Mh, which npm version are you using? I just tried it again and:

node_modules $ find . -name "serializer.js"
./whatwg-mimetype/lib/serializer.js
./@parcel/utils/lib/serializer.js
./@parcel/utils/src/serializer.js
node_modules $ npm -v
6.13.4