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.

could you add the code/commands you are using to run your server too, please? — thesublimeobject, Jan 22 '17 at 00:54
yeah, everything i can see looks fine, but i'm not very familiar with jekyll so i might not be much help. sorry. — thesublimeobject, Jan 22 '17 at 01:06
I am not really experience but as reactJs is completely frontend, the backend I use shouldnt even matter. Jekyll is only used to serve the HTML where the Components will be mounted. Correct me if Im wrong — Goamaral, Jan 22 '17 at 01:33
yeah, but if you said you built it without any errors first, i guess i'm confused on where that error is coming from — thesublimeobject, Jan 22 '17 at 01:43

score 8 · Accepted Answer · edited Jan 22 '17 at 13:42

8

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. :])

edited Jan 22 '17 at 13:42

Keshan Nageswaran

8,060
3
28
45

answered Jan 22 '17 at 04:14

Jeff Cousins

3,381
1
9
6

I want to try to simulate what Jekyll does. I want to have a folder with my posts and see if it's empty, if it isnt, I want to grab all the files as strings and build my stuff from that. – Goamaral Jan 22 '17 at 04:16
I saw something about what you just said. Thanks for the explanation. Btw any ideas of how can I achieve it? – Goamaral Jan 22 '17 at 04:17
found out i can do what i wanted with jekyll static files.(https://jekyllrb.com/docs/static-files/) Will try to incorporate a ruby script to count the number of files. – Goamaral Jan 22 '17 at 17:14
how to fix it ? – user269867 Dec 31 '18 at 03:49

ReferenceError: process is not defined when requiring Shelljs in ReactJS

1 Answers1