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.
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
Unfortunately, I am stuck at the second step
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)
What OS and command prompt app are you using?
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
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:
- npm config set prefix /usr/local
- npm install -g create-react-app
- Create your new app: create-react-app my-app
Does that fix it?
so…i just had to sudo install gulp, did the rest of the instructions, and now it works!!! THANK YOU!!!
Phew! I was out of ideas beyond that, so glad it all worked haha
Thanks again
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.
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
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
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
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.
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.