Issues with pbkdf2 "process.browser" Parcel 2

[KararTY]

Related project: https://github.com/KararTY/perplex-chat

When running npm start and opening up the project in the browser, I get the following output in the console:

Uncaught ReferenceError: process is not defined
    at Object.1c3TL (default-encoding.js:3)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.1HeQo.process (async.js:4)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.33oEs../lib/async (browser.js:1)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.1iLKE.randombytes (index.js:14)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.5TNMp.crypto (randomstring.js:3)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.26fWS../lib/randomstring (ping.js:28)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.18pkc.randomstring (ping.js:4)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.5j62H.process (client.js:13)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.3rlaj../transport (index.js:15)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.60EqM../await (index.js:15)
    at newRequire (index.6c552a7a.js:68)
    at localRequire (index.6c552a7a.js:80)
    at Object.3EW1a.uhtml (index.ts:2)
    at newRequire (index.6c552a7a.js:68)
    at index.6c552a7a.js:111
    at index.6c552a7a.js:134

which seems to stem from pbkdf2's use of default-encoding.js trying to use process.browser but erroring out.

Is there an important configuration option I've forgot to include?

I'm using NodeJS v14.4.0, and
parcel version 2.0.0-beta.1.

I've attached my current project as-is in the github link at the beginning of this discussion post, I hope I've posted this in the right place.

Thanks for developing & maintaining Parcel 2.

[KararTY]

I've gotten it to work when running npm run build.

Building the project (parcel build) seems to work, but using parcel serve does not.

[jeluard]

I was bitten by the same issue. Doesn't happen when using latest parcel v1.

[mischnic]

Does anyone have a reproduction for this? Using pbkdf2 by itself seems to work with parcel serve and parcel build

[KararTY]

I've updated my project from 2.0.0-beta.1 and it's not occurring anymore.

[jeluard]

@mischnic I couldn't reproduce it with a simple project yet, but have a project failing here. Just run yarn && yarn dev then browse http://localhost.

That's the second project that triggers the issue, nothing specific in common between both.

[mischnic]

@jeluard So as previously mentioned it's working when upgrading to the latest nightly. Changes I needed to do for that:

diff --git frontend/.parcelrc frontend/.parcelrc
deleted file mode 100644
index 588a32a..0000000
--- frontend/.parcelrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "extends": ["@parcel/config-default"],
-    "transformers": {
-        "*.md": ["@substrate/parcel-transformer-markdown"]
-    }
-}
\ No newline at end of file
diff --git frontend/package.json frontend/package.json
index e6e8574..44f4585 100644
--- frontend/package.json
+++ frontend/package.json
@@ -44,7 +44,7 @@
     "ava": "3.13.0",
     "eslint": "6.8.0",
     "eslint-plugin-react": "7.21.4",
-    "parcel": "next",
+    "parcel": "nightly",
     "ts-node": "9.0.0",
     "typescript": "4.0.3"
   }
diff --git frontend/public/index.html frontend/public/index.html
index 870d297..fdd9242 100644
--- frontend/public/index.html
+++ frontend/public/index.html
@@ -7,7 +7,7 @@
       content="minimum-scale=1, width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
-    <link rel="shortcut icon" href="/assets/favicon.png">
+    <link rel="shortcut icon" href="./assets/favicon.png">
     <title>Substrate playground</title>
     <style>
       @import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
diff --git frontend/src/components.tsx frontend/src/components.tsx
index ccb7936..9fdd10e 100644
--- frontend/src/components.tsx
+++ frontend/src/components.tsx
@@ -51,7 +51,7 @@ import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import crypto from 'crypto';
 
-import terms from './terms.md';
+import terms from 'bundle-text:./terms.md';
 
 const termsHash = crypto.createHash('md5').update(terms).digest('hex');

[jeluard]

Great, it works perfect! I didn't know about bundle-text.. game changer!

[imakeinterfaces]

This works for me, but the graphql transformer does not work for me on the nightly builds with the imports showing up empty. Any idea when a fix may be applied to the parcel@next version?

[mischnic]

Please provide a code sample

[dkadrios]

Build: 2.0.0-beta.1

I'm running into the same 'process is not defined' issue due to pbkdf2 trying to access process.browser. This only happens when using the dev server.

However, in my case, there're no markdown files being imported. I do have .md (and.mdx) files used by mkdocs and Storybook, but nothing in the project references those files. Is it possible Parcel is trying to include those anyhow? I've always assumed it only includes files that are discoverable by spidering index.html.

[jmrossy]

In case this helps anyone else: I saw this same issue but in a webpack-based app.
It was fixed by this change: browserify/pbkdf2@449e510
So try forcing your pbkdf2 dependency version to 3.1.2 or higher :)