Uncaught ReferenceError: process is not defined in path-parse module

[deepumandal]

Hello everyone,

I'm encountering an issue in my frontend project where I'm getting the following error:

index_74f5.js:14311 Uncaught ReferenceError: process is not defined
    at node_modules/.pnpm/[email protected]/node_modules/path-parse/index.js (index_74f5.js:14311:21)
    at ModuleSystem.require ((index):1009:26)
    at node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/lib/node-modules-paths.js (index_a5b0.js:13405:31)
    at ModuleSystem.require ((index):1009:26)
    at node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/lib/async.js (index_a5b0.js:12697:28)
    at ModuleSystem.require ((index):1009:26)
    at node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/index.js (index_a5b0.js:12685:17)
    at ModuleSystem.require ((index):1009:26)
    at node_modules/.pnpm/babel-plugin-macros@3.1.0/node_modules/babel-plugin-macros/dist/index.js (index_74f5.js:6979:21)
    at ModuleSystem.require ((index):1009:26)
node_modules/.pnpm/path-parse@1.0.7/node_modules/path-parse/index.js @ index_74f5.js:14311
require @ (index):1009
node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/lib/node-modules-paths.js @ index_a5b0.js:13405
require @ (index):1009
node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/lib/async.js @ index_a5b0.js:12697
require @ (index):1009
node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/index.js @ index_a5b0.js:12685
require @ (index):1009
node_modules/.pnpm/babel-plugin-macros@3.1.0/node_modules/babel-plugin-macros/dist/index.js @ index_74f5.js:6979
require @ (index):1009
node_modules/.pnpm/twin.macro@3.4.1_tailwindcss@3.4.10/node_modules/twin.macro/macro.js @ index_e3c9.js:12857
require @ (index):1009
src/components/ui/Select/Select.tsx @ Radio.tsx:13
require @ (index):1009
src/components/ui/Select/index.tsx @ index.tsx:9
require @ (index):1009
src/components/template/ThemeConfigurator/ThemeSwitcher.tsx @ ThemeConfigurator.tsx:9
require @ (index):1009
src/components/template/ThemeConfigurator/ThemeConfigurator.tsx @ NavModeSwitcher.tsx:9
require @ (index):1009
src/components/template/ThemeConfigurator/index.ts @ index.ts:3
require @ (index):1009
src/components/template/SidePanel/SidePanelContent.tsx @ SidePanel.tsx:6
require @ (index):1009
src/components/template/SidePanel/SidePanel.tsx @ SideNavToggle.tsx:8
require @ (index):1009
src/components/template/SidePanel/index.ts @ index.ts:3
require @ (index):1009
src/components/layouts/ModernLayout.tsx @ Layouts.tsx:11
require @ (index):1009
src/components/layouts/Layouts.tsx @ index.css:21
require @ (index):1009
src/components/layouts/index.ts @ index.ts:3
require @ (index):1009
src/App.tsx @ farmfe_plugin_react_is_react_refresh_boundary:26
require @ (index):1009
src/index.tsx @ index.css:21
require @ (index):1009
(anonymous) @ (index):1151

Context:

• Bundler: Farm
• Dependencies:

"dependencies": {
    "@emotion/is-prop-valid": "^1.3.0",
    "@floating-ui/react": "^0.26.23",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/react": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "@reduxjs/toolkit": "^2.2.7",
    "@tanstack/match-sorter-utils": "^8.19.4",
    "@tanstack/react-query": "^5.52.2",
    "@tanstack/react-table": "^8.20.5",
    "@visx/pattern": "^3.3.0",
    "apexcharts": "^3.52.0",
    "axios": "^1.7.5",
    "classnames": "^2.5.1",
    "dayjs": "^1.11.13",
    "formik": "^2.4.6",
    "framer-motion": "^11.3.30",
    "html-react-parser": "^5.1.14",
    "i18next": "^23.14.0",
    "lodash": "^4.17.21",
    "orval": "^7.0.1",
    "postcss-pxtorem": "^6.1.0",
    "process": "^0.11.10",
    "react": "^18.3.1",
    "react-apexcharts": "^1.4.1",
    "react-beautiful-dnd": "^13.1.1",
    "react-custom-scrollbars-2": "^4.5.0",
}

Configuration:
Here is my [farm.config.ts] file:

import { join, resolve } from "path";
import { defineConfig } from "@farmfe/core";
import postcss from "@farmfe/js-plugin-postcss";
import { config } from "dotenv";
import { cwd } from "process";
config();

const envDir = resolve(cwd(), ".env");
console.log(envDir);

export default defineConfig({
  plugins: ["@farmfe/plugin-react", postcss()],
  clearScreen: true,
  compilation: {
    resolve: {
      extensions: [".js", ".jsx", ".ts", ".tsx"],
      alias: {
        process: "process/browser", // Added alias for process
        "configs/": join(__dirname, "src/configs/"),
        "services/": join(__dirname, "src/services/"),
        "constants/": join(__dirname, "src/constants/"),
        "utils/": join(__dirname, "src/utils/"),
        "components/": join(__dirname, "src/components/"),
        "api/": join(__dirname, "src/api/"),
        store: join(__dirname, "src/store"),
        "types/": join(__dirname, "src/types/"),
        "views/": join(__dirname, "src/views/"),
        locales: join(__dirname, "src/locales/index.ts"),
        "mock/": join(__dirname, "src/mock"),
      },
    },
    lazyCompilation: true,
    input: {
      index: "./index.html",
    },
  },
  envDir,
});

Steps Taken:
Installed the process package using pnpm install process --save
Added an alias for process in the farm.config.ts file.

Issue:
Despite these steps, I am still encountering the ReferenceError: process is not defined error.

Request:
Has anyone faced a similar issue or can provide guidance on how to resolve this error? Any help would be greatly appreciated!

Thank you!

[wre232114]

package path-parse use process.platform, there are 2 methods to resolve this issue:

1. add define: { process.platform: process.platform } in farm.config.ts`
2. add polyfill for process. for example, add import process from 'process';window.process = process to the top of your entry script file

[deepumandal]

@wre232114 Hey first Thankyou for your guidence, here's i have some inputs after applying suggestion,

1. when used the first way It works with another error at same place on path-parse :

index_8271.js:14227 Uncaught 
ReferenceError: linux is not defined
    at node_modules/.pnpm/[email protected]/node_modules/path-parse/index.js (index_8271.js:14227:21)
    at ModuleSystem.require ((index):1008:26)
    at node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/lib/node-modules-paths.js (index_4371.js:13729:31)
    at ModuleSystem.require ((index):1008:26)
    at node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/lib/async.js (index_4371.js:13021:28)
    at ModuleSystem.require ((index):1008:26)
    at node_modules/.pnpm/resolve@1.22.8/node_modules/resolve/index.js (index_4371.js:13009:17)
    at ModuleSystem.require ((index):1008:26)
    at node_modules/.pnpm/babel-plugin-macros@3.1.0/node_modules/babel-plugin-macros/dist/index.js (index_8271.js:6895:21)
    at ModuleSystem.require ((index):1008:26)

2. when i used the second way it is still same 🙂

can i get some resources inputs where i can learn more about it.

[wre232114]

I think path-parse is a library for Node.js instead of browser, I think you should use alternative browser oriented path parse library