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
– thesublimeobject, Commented Jan 22, 2017 at 0: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
– thesublimeobject, Commented Jan 22, 2017 at 1: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
– Goamaral, Commented Jan 22, 2017 at 1: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
– thesublimeobject, Commented Jan 22, 2017 at 1:43

Keshan Nageswaran · Accepted Answer · 2017-01-22 13:42:57Z

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, 2017 at 13:42

Keshan Nageswaran

8,2064 gold badges30 silver badges45 bronze badges

answered Jan 22, 2017 at 4:14

Jeff Cousins

3,5011 gold badge11 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Goamaral Over a year ago

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 Over a year ago

I saw something about what you just said. Thanks for the explanation. Btw any ideas of how can I achieve it?

Goamaral Over a year ago

found out i can do what i wanted with jekyll static files.(jekyllrb.com/docs/static-files) Will try to incorporate a ruby script to count the number of files.

user269867 Over a year ago

how to fix it ?

Collectives™ on Stack Overflow

ReferenceError: process is not defined when requiring Shelljs in ReactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related