Setting Up Your React Dev Environment Easily

Is it a mistake that the package.json config references a file named index.js? { “main”: “index.js” } There is no index.js in this project. There is a index.jsx and a myCode.js.

Hi Kirupa, I have problem when trying to complete the final step of this tutorial.

C:\Users\User\Desktop\MyTotallyAwesomeApp>node_modules.bin\webpack.cmd
Hash: 80a026e524ce6f69ca31
Version: webpack 3.5.6
Time: 97ms

ERROR in Entry module not found: Error: Can’t resolve ‘babel’ in 'C:\Users\User\Desktop\MyTotallyAwesomeApp’
BREAKING CHANGE: It’s no longer allowed to omit the ‘-loader’ suffix when using loaders.
You need to specify ‘babel-loader’ instead of ‘babel’,
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

I changed “babel” to “babel-loader” but there is same ERROR again.

var webpack = require(“webpack”);
var path = require(“path”);

var DEV = path.resolve(__dirname, “dev”);
var OUTPUT = path.resolve(__dirname, “output”);

var config = {
entry: DEV + “/index.jsx”,
output: {
path: OUTPUT,
filename: “myCode.js”
},
module: {
loaders: [{
include: DEV,
loader: “babel-loader”,
}]
}
};

module.exports = config;

Hi, My problem was solved. we have to add babel-core in book’s page 195 for installing babel.

Glad you were able to figure it out! The best bet for next time is to use create-react-app: https://github.com/facebookincubator/create-react-app

I’m revising that entire chapter for the book, and will post the updated version here shortly that uses it instead of the manual approach we are talking about here.

:slight_smile:

I’ve updated this tutorial to rely heavily on Create React: https://github.com/facebookincubator/create-react-app

This makes setting up your React project really simple while still getting all the benefits of Babel, Node, and webpack under the covers :slight_smile:

Unfortunately, I am stuck at the second step :persevere:

After I run npm install -g create-react-app, then try to run create-react-app helloworld, I am receiving the below error:

-bash: create-react-app: command not found

I’ve tried uninstalling and reinstalling node, I don’t know what is going on?

After I ran npm install -g create-react-app, the below is the output:

[email protected] /Users/amandarichwalski/.node/lib/node_modules/create-react-app
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected])

What OS and command prompt app are you using? :slight_smile:

EDIT: Try the suggestion here: https://github.com/facebookincubator/create-react-app/issues/138#issuecomment-325508468 It seems like the right solution for the error you are running into.

Hi Kirupa, I’m on os x el capitan version 10.11.2, and I’m just using terminal.

I would check if this is an issue with create-react-app, or any other NPM package. Try installing gulp and calling it as suggested here: https://github.com/facebookincubator/create-react-app/issues/138#issuecomment-234998109

If calling gulp doesn’t work, then the following suggestion should work: https://github.com/facebookincubator/create-react-app/issues/138#issuecomment-325508468

:slight_smile:

Oh yeah, i seen that thread and was really confused by the export path part

That is confusing! Hopefully we can skip that. Try entering these commands one at a time:

  1. npm config set prefix /usr/local
  2. npm install -g create-react-app
  3. Create your new app: create-react-app my-app

Does that fix it?

:slight_smile:

so…i just had to sudo install gulp, did the rest of the instructions, and now it works!!! THANK YOU!!!

1 Like

Phew! I was out of ideas beyond that, so glad it all worked haha :stuck_out_tongue:

Thanks again :grinning:

hi Kirupa ,

i just created my react app by installing the create-react-app . But i have a issue where if we work on the propTypes it throws an error saying that ‘PropTypes’ is not defined. (no-undef). you can view the issue here https://stackoverflow.com/questions/45692537/proptypes-is-not-defined .

It looks like the solution for this is to use the eslint 3.* where create-react-app uses the latest eslint 4.* - Do you know how to downgrade the verison to eslint 3.* - If so can you post the steps .

Hello Kirupa, unfortunately I am going to add to the create-react-app installation questions. :grimacing:
I am using Windows 10 with npm 5.5.1 and node 8.9.1.
create-react-app installs successfully, but when I try to create a project I get one of these errors:
‘create-react-app’ is not recognized as an internal or external command,
operable program or batch file
bash: create-react-app: command not found

I’ve tried with the windows and node command prompts and gone through several suggestions from stack overflow and the github create-react-app page. I’ve made several changes to my Environment variables as suggested, but so far no luck. Just thought I’d try one more forum. Thank you.

Did you try the suggestions here? Setting Up Your React Dev Environment Easily

I am curious to know if you can use other commands like gulp or yarn :slight_smile:

Thanks for the reply, Kirupa.
I did try those articles before, and I tried those steps again today with the node and windows command prompts and even Power Shell as an admin, but I’m still not able to create a new create-react app.

Specifically, this is what I did:
Added /usr/local/bin/ to my user and system variables in the Environmental Variables dialogue.

I also tried:
$ npm config set prefix /usr/local
$ npm install -g create-react-app
$ create-react-app my-app

create-react-app, gulp, and yarn get installed to this folder: C:\usr\local

But after running the gulp, yarn, or create-react-app commands, I end up with errors like:

‘create-react-app’ is not recognized as an internal or external command,
operable program or batch file.

Any other thoughts? If not, I’ll just have to try on a different computer. Thank you.

I really don’t have too many ideas here :frowning:

My last ditch suggestion would be to try what is here (if you haven’t already) https://stackoverflow.com/questions/9587665/nodejs-cannot-find-installed-module-on-windows/9588052#9588052

Otherwise, trying on a different computer may be the reasonable answer :slight_smile:

That didn’t work for my desktop Window computer either, so I tried on a Window 10 laptop that didn’t have that much software on it yet, and the create-react-app installation worked. :sunglasses:
btw, I’ve found your book and tutorials easier to follow than some of the other React ones out there, so thanks for the help and work you do. :+1:

1 Like