Setting Up Your React Dev Environment Easily


#22

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.


#23

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;


#24

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


#25

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:


#26

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:


#27

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:

create-react-app@1.4.3 /Users/amandarichwalski/.node/lib/node_modules/create-react-app
├── commander@2.11.0
├── semver@5.4.1
├── tmp@0.0.31 (os-tmpdir@1.0.2)
├── validate-npm-package-name@3.0.0 (builtins@1.0.3)
├── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, strip-ansi@3.0.1, has-ansi@2.0.0)
├── cross-spawn@4.0.2 (lru-cache@4.1.1, which@1.3.0)
├── fs-extra@1.0.0 (jsonfile@2.4.0, klaw@1.3.1, graceful-fs@4.1.11)
├── tar-pack@3.4.1 (uid-number@0.0.6, once@1.4.0, debug@2.6.9, readable-stream@2.3.3, tar@2.2.1, fstream-ignore@1.0.5, rimraf@2.6.2, fstream@1.0.11)
└── hyperquest@2.1.2 (duplexer2@0.0.2, through2@0.6.5, buffer-from@0.1.1)


#28

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.


#29

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


#30

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:


#31

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


#32

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:


#33

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


#34

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


#35

Thanks again :grinning:


#36

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 .


#37

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.


#38

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:


#39

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.


#40

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:


#42

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: