ReferenceError: process is not defined when requiring Shelljs in ReactJS

Question

I am trying to require shelljs in my core React component.

import React, { Component } from 'react';
import {render} from 'react-dom';
import Header from './components/Header';

const shell = require('shelljs');

class App extends Component {
    render() {
        console.log("First component mounting");
        console.log("First component mounting");
        return (
            <Header />
        )
    }
}

render(<App />, document.getElementById('root'));

When I run

webpack build

I get no errors, then I run my server and I get the following console error.

I'm using jekyll as my server side. Currently transitioning from the normal jekyll implementation to React only. React is well implemented cause i tested the Header component before importing the shelljs module

ReferenceError: process is not defined

I'm new to using modules in javascript, thanks in advance.

Answer 1

I'm going to guess you don't really mean to use your shell constant since you haven't referenced it anywhere within your React component. Shelljs looks like it's a tool specifically for the command line.

As for your error:

process is a global variable in the Node environment. Since React runs in the browser, and your component is going to render in the browser, process will not exist in the context of your component.

Try opening the Chrome DevTools (or the developer tools for whatever browser you use) and type in process. You'll get a TypeError because it doesn't exist. What does exist, however, is the global window variable.

Now, open the command line and type node to open the Node.js REPL. Type process here, and you'll see that it's an object holding a lot of properties and values. Next, type window and press enter. window does not exist here because it only exists in the browser.

(Type Ctrl+C twice to exit Node btw. :])