process is not defined

[YiuMan6]

Hi, Im having an issue after installed everything where the process is not defined. Is there anything I might missed out ? Thanks for the helps

[mrsteele]

Hey @YiuMan6 , any chance you can share some code so I get context to your situation?

[shadowfoxish]

I'm seeing the same thing. Here's some additional details.

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const { DefinePlugin } = require('webpack');

module.exports = function(env) {
    console.log(env);
    return {
        entry: './src/index.js',
        mode: 'development',
        devServer: {
            port: 8001,
        },
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-react', '@babel/preset-env'],
                            plugins: ['@babel/plugin-transform-runtime'],
                        },
                    },
                },
                {
                    test: /\.s?css$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader',
                    ]
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource',
                }
            ],
        },
        plugins: [
            new Dotenv({
                path: (!!env.development ? "./.env" : (!!env.deploy ? `./.env.deploy` : "")),
                ignoreStub: true
            }),
            new HtmlWebpackPlugin({
                template: './public/index.html'
            }),

        ],
        resolve: {
            fallback: {
                os: false,
                path: false,
                crypto: false,
            }
        }
    };
}

package.json

{
  "name": "backoffice",
  "version": "1.0.0",
  "description": "My App",
  "main": "index.js",
  "scripts": {
    "test": "test",
    "start": "webpack serve --env development",
    "build": "webpack --env development --mode development",
    "build-deploy": "webpack --env deploy --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.22.10",
    "@babel/plugin-transform-runtime": "^7.22.10",
    "@babel/preset-env": "^7.22.10",
    "@babel/preset-react": "^7.22.5",
    "babel-loader": "^9.1.3",
    "css-loader": "^6.8.1",
    "dotenv": "^16.3.1",
    "dotenv-webpack": "^8.0.1",
    "html-webpack-plugin": "^5.5.3",
    "node-sass": "^9.0.0",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@mui/icons-material": "^5.14.3",
    "@mui/material": "^5.14.5",
    "@uiw/codemirror-extensions-langs": "^4.21.9",
    "@uiw/codemirror-themes-all": "^4.21.9",
    "@uiw/react-codemirror": "^4.21.9",
    "axios": "^1.4.0",
    "bootstrap": "^5.3.1",
    "date-fns": "^2.30.0",
    "immutability-helper": "^3.1.1",
    "js-beautify": "^1.14.9",
    "rc-tree": "^5.7.9",
    "react": "^18.2.0",
    "react-bootstrap": "^2.8.0",
    "react-datepicker": "^4.16.0",
    "react-debounce-input": "^3.3.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dnd-touch-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-hot-toast": "^2.4.1",
    "react-loader-spinner": "^5.3.4",
    "react-router-dom": "^6.15.0",
    "react-table": "^7.8.0",
    "react-window": "^1.8.9",
    "styled-components": "^6.0.7"
  }
}

From the debugger, in this method calling .cwd() is the culprit since process is undefined:

[mrsteele]

Process should be define if you are running node…. I’m curious how this runs without the node process

[mrsteele]

Is that error in your browser or in your terminal?

[shadowfoxish]

Node isn't hosting this. Technically, IIS is in production mode. But, in this case, it's just the webpack-cli's devserver. So, node exists to compile the site, but at run time, its gone.

I did manage to work around it, by doing some brute force experimenting. I'll post the code in a moment.

[shadowfoxish]

Here's what I did to make it work;

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const { DefinePlugin, ProvidePlugin } = require('webpack');

module.exports = function(env) {
    console.log(env);
    return {
        entry: './src/index.js',
        mode: 'development',
        devServer: {
            port: 8080,
            historyApiFallback: true
        },
       /* [ ... ] */
        plugins: [
            new CopyWebpackPlugin({
                patterns: [{
                    from: './src/web.config', to: 'web.config'
                }]
            }),
            new Dotenv({
                path: (!!env.development ? "./.env" : (!!env.deploy ? `./.env.deploy` : "")),
                ignoreStub: true
            }),
            new HtmlWebpackPlugin({
                template: './public/index.html',
                favicon: './public/favicon.ico'
            }),
            new ProvidePlugin({
                process: 'process/browser',
            }),
        ],
        resolve: {
            fallback: {
                //process: false,
                os: false,
                path: require.resolve("path-browserify"),
                crypto: false,
                'process/browser': require.resolve('process/browser')
            }
        }
    };
}

I added a few packages as well; devDependencies "path-browserify": "^1.0.1", dependencies "process": "^0.11.10",

[mrsteele]

Was it the dependencies, or “ignoreStub”? Stubbing is a concept that tries to interpret your webpack env and sometimes it’s not entirely accurate.

[shadowfoxish]

I'm pretty sure it was the dependencies. I tried ignoreStub and it didn't make any difference.

[mrsteele]

Since this sounds resolved, I’m gonna close. Feel free to reopen if needed.