Getting Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" is not handled by plugins (Unhandled scheme). in building React app with Langchain JS

[eRuaro]

I'm following through the guide here to have a React app use Langchain JS: https://js.langchain.com/docs/getting-started/install#browser

I've also gone through https://github.com/dqbd/tiktoken/tree/main/js#create-react-app for installing tiktoken, and setting up my crago.config.js file. I'm getting this error below:

ERROR in node:fs/promises
Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

Here's what my crago.config.js file looks like:

module.exports = {
	webpack: {
		configure: (config) => {
			config.experiments = {
				asyncWebAssembly: true,
				layers: true,
			};

			// turn off static file serving of WASM files
			// we need to let Webpack handle WASM import
			config.module.rules
				.find((i) => "oneOf" in i)
				.oneOf.find((i) => i.type === "asset/resource")
				.exclude.push(/\.wasm$/);

			return config;
		},
	},
};

Here's my package.json file:

{
  "name": "intellecs.ai",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@dqbd/tiktoken": "^1.0.6",
    "@fontsource/inter": "^4.5.15",
    "@headlessui/react": "^1.7.12",
    "@heroicons/react": "^2.0.16",
    "@react-pdf-viewer/core": "^3.12.0",
    "@react-pdf-viewer/default-layout": "^3.12.0",
    "@supabase/supabase-js": "^2.8.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.14.1",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "langchain": "^0.0.53",
    "pdfjs-dist": "^2.16.105",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-pdf": "^6.2.2",
    "react-router-dom": "^6.8.2",
    "react-scripts": "5.0.1",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4",
    "zustand": "^4.3.6"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@craco/craco": "^7.1.0",
    "@tailwindcss/forms": "^0.5.3",
    "eslint": "^8.36.0",
    "eslint-plugin-react": "^7.32.2"
  },
  "cracoConfig": "craco.config.js"
}

NPM version: 9.4.0
Node version: 19.6.0
React version: 18.2.0

The particular file that's causing the error has this import import { PDFLoader } from "langchain/document_loaders/fs/pdf"; and nothing else from the Langchain package. How can I fix this?

[eRuaro]

Oof looks like what I'm using is only available on node js and not the browser