Not able to run my React App, Getting a few errors

Question

Github link to code: https://github.com/bhatvikrant/IndecisionApp

I have run npm i and then done yarn run dev-server, I have used webpack. I am on a MacOs machine. I have also made the .babelrc file.

The error that I am getting after running yarn run dev-server:

VIKRANTs-MacBook-Pro:IndecisionAPP VIKRANT$ yarn run dev-server
yarn run v1.19.1
$ webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from /Users/VIKRANT/Desktop/IndecisionAPP/public
Hash: 35d055107a6a0062196d
Version: webpack 3.1.0
Time: 1305ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  867 kB       0  [emitted]  [big]  main
  [35] multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js 40 bytes {0} [built]
  [36] (webpack)-dev-server/client?http://localhost:8080 5.59 kB {0} [built]
  [37] ./node_modules/url/url.js 23.3 kB {0} [built]
  [38] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built]
  [39] ./node_modules/url/util.js 314 bytes {0} [built]
  [40] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
  [43] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [44] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [45] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
  [46] ./node_modules/sockjs-client/lib/entry.js 244 bytes {0} [built]
  [77] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
  [78] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
  [79] ./node_modules/html-entities/index.js 231 bytes {0} [built]
  [82] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [84] ./src/app.js 2.33 kB {0} [built] [failed] [1 error]
    + 70 hidden modules

ERROR in ./src/app.js
Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.25.0". If you are sure you have a
 compatible version of @babel/core, it is likely that something in your build process is loading the wrong vers
ion. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "b
abel-core" to see what is calling Babel. (While processing preset: "/Users/VIKRANT/Desktop/IndecisionAPP/node_m
odules/@babel/preset-env/lib/index.js")
    at throwVersionError (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/helper-plugin-utils/lib/inde
x.js:65:11)
    at Object.assertVersion (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/helper-plugin-utils/lib/i
ndex.js:13:11)
    at /Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/preset-env/lib/index.js:177:7
    at /Users/VIKRANT/Desktop/IndecisionAPP/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at /Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-mana
ger.js:317:46
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-loader/lib/index.js:49:20)
    at Object.module.exports (/Users/VIKRANT/Desktop/IndecisionAPP/node_modules/babel-loader/lib/index.js:174:20)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js
webpack: Failed to compile.

Please help me rectify this syntax error, I have spent almost a day trying to fix this.

Requires Babel "^7.0.0-0" change the version of babel and re-install npm using instal npm command. — Ayushi Keshri, Oct 29 '19 at 11:23
@AyushiKeshri can you please specify the commands, It would really help, thanks — Vikrant Bhat, Oct 29 '19 at 11:24
@HMR yes, I have heard webpack is better than all others, it bundles all the files into one — Vikrant Bhat, Oct 29 '19 at 11:25
First use yarn install rather then npm install if you are using yarn its better practice. Second please take a look at your package.json line 14 and 32 specify different babel core versions and they should not. — Morphasis, Oct 29 '19 at 11:26
@HMR I am following a udemy course. Doing exactly whats being told, hehe. — Vikrant Bhat, Oct 29 '19 at 11:27
@Morphasis okay I just checked my package.json. so Should I remove / unisntall@babel/core 6.25.0 from dependencies? — Vikrant Bhat, Oct 29 '19 at 11:29
@Andy its bad to use yarn and run npm install when yarn install exists its just a heads up — Morphasis, Oct 29 '19 at 11:42
https://stackoverflow.com/questions/49828493/upgrading-react-version-and-its-dependencies-by-reading-package-json @VikrantBhat it may help you — Ayushi Keshri, Oct 29 '19 at 11:44
@VikrantBhat The user Jim G. below goes over modifying the package.json below check that out. It looks like it should fix your problem. Basically your dev version and dependency version do no match hence the error. — Morphasis, Oct 29 '19 at 11:44
It's really recommended that you [read and **learn**](https://nodesource.com/blog/the-basics-of-package-json-in-node-js-and-npm/) how packages/dependencies work. — Sanguinary, Oct 29 '19 at 11:49

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

First, install and run ’rimraf’.

Then, from here:

We’ll need to add some babel packages to our project with

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node.

These respectively take care of babels general working, the usage of babel in the command line, the ability to use the newest JS features and the usage of babel with node.

Or, you could modify your ’package.json’ file in place (shown below) and re-run ’yarn’:

{
  "name": "indecision-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Andrew Mead",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },
  "dependencies": {
    "live-server": "^1.2.0",
    "node-sass": "4.5.3",
    "normalize.css": "7.0.0",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-modal": "2.2.2",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-class-properties": "7.0.0", // upgrade this to 7.0.
    "css-loader": "0.28.4"
  }
}

No need for any of the babel packages in devDependencies (at least not in the package.json of an ejected app from create-react-app). — HMR, Oct 29 '19 at 11:37
@Jim G. can i use npm install after editing the package.json — Vikrant Bhat, Oct 29 '19 at 11:42
use npm i babel-cli (v7 is in beta mode though) Go and search from npm package yourself once and try to read the official doc. https://www.npmjs.com/package/babel-cli — Ayushi Keshri, Oct 29 '19 at 11:49

score 0 · Answer 2 · answered Oct 29 '19 at 11:36

0

Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.25.0".

This error is coming because Babel 7 and above is required. You can upgrade it using babel-upgrade package: https://www.npmjs.com/package/babel-upgrade

You can find the correct way to upgrade babel here: How to upgrade to babel 7.

answered Oct 29 '19 at 11:36

Srijan

257
1
8

are you sure this is the problem? because i tried to upgrade the babel-cli to 7.0.0 and it doesnt exist i guess – Vikrant Bhat Oct 29 '19 at 11:45
It fixed babel related issue once for me. I think it's worth a try, you can clone the repo and test it. – Srijan Oct 29 '19 at 11:51

score 0 · Answer 3 · answered Oct 29 '19 at 11:44

I think you have done some steps of the course incorrectly, here is the package.json that you probably should have ended up with.

I suggest you try removing node_modules, yarn.lock and package-lock.json then put the following content in your package.json

{
  "name": "indecision-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Andrew Mead",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },
  "dependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.4",
    "live-server": "^1.2.0",
    "node-sass": "4.5.3",
    "normalize.css": "7.0.0",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-modal": "2.2.2",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "validator": "8.0.0",
    "webpack": "3.1.0",
    "webpack-dev-server": "2.5.1"
  }
}

Then run npm install or yarn install

Tried this @HMR getting error: Failed at the node-sass@4.5.3 postinstall script. — Vikrant Bhat, Oct 29 '19 at 12:01
@VikrantBhat I had the same error, just solved it by changing it to `"node-sass": "*",` in the package.json — HMR, Oct 29 '19 at 12:03

Not able to run my React App, Getting a few errors

3 Answers3