Hello I'm Arravind.
I am just getting started in MERN stack so i really need some help, I got started into NodeJS from learning reactJS. I always used "create-react-app" and worked from there but I didn't know how things behind that worked.
But now I need to get to the backend part (Express and MongoDB). For this also I used 'mern.io'
starter kit and just got to know few things but I didn't really know what was going on since there were too much-advanced things and I don't really know why some things are there and confused whether I really needed those things.
Finally I deceided to know what exactly my code means otherwise I really don't get comfortable. So I decided to learn to build my own config for MERN stack project.
I found many tuts and videos but yours on medium was truly great.
I was following your tutorial (1st part) exactly as you did but when getting to that "npx webpack" part I get this error in my terminal
ERROR in ./src/client/app.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'. at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25) at Module.require (module.js:596:17) at require (D:\Code\Boilerplates\Source\myMern\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object.<anonymous> (D:\Code\Boilerplates\Source\myMern\node_modules\babel-loader\lib\index.js:8:11) at Module._compile (D:\Code\Boilerplates\Source\myMern\node_modules\v8-compile-cache\v8-compile-cache.js:178:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (D:\Code\Boilerplates\Source\myMern\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at loadLoader (D:\Code\Boilerplates\Source\myMern\node_modules\loader-runner\lib\loadLoader.js:13:17) at iteratePitchingLoaders (D:\Code\Boilerplates\Source\myMern\node_modules\loader-runner\lib\LoaderRunner.js:169:2) at runLoaders (D:\Code\Boilerplates\Source\myMern\node_modules\loader-runner\lib\LoaderRunner.js:362:2) at NormalModule.doBuild (D:\Code\Boilerplates\Source\myMern\node_modules\webpack\lib\NormalModule.js:265:3) at NormalModule.build (D:\Code\Boilerplates\Source\myMern\node_modules\webpack\lib\NormalModule.js:412:15) at Compilation.buildModule (D:\Code\Boilerplates\Source\myMern\node_modules\webpack\lib\Compilation.js:616:10) at factory.create (D:\Code\Boilerplates\Source\myMern\node_modules\webpack\lib\Compilation.js:857:14) at factory (D:\Code\Boilerplates\Source\myMern\node_modules\webpack\lib\NormalModuleFactory.js:405:6) at hooks.afterResolve.callAsync (D:\Code\Boilerplates\Source\myMern\node_modules\webpack\lib\NormalModuleFactory.js:155:13) at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (D:\Code\Boilerplates\Source\myMern\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:6:1) at AsyncSeriesWaterfallHook.lazyCompileHook [as _callAsync] (D:\Code\Boilerplates\Source\myMern\node_modules\tapable\lib\Hook.js:35:21) at resolver (D:\Code\Boilerplates\Source\myMern\node_modules\webpack\lib\NormalModuleFactory.js:138:29) at process.nextTick (D:\Code\Boilerplates\Source\myMern\node_modules\webpack\lib\NormalModuleFactory.js:342:9) at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9) @ multi babel-polyfill ./src/client/app.js main[1]
I didn't understand it, so i cloned your repo and tried out, it was working. I was confused so I looked at issue and found that both are using different versions of babel-loader.
My Dependencies
"dependencies": { "express": "^4.16.3", "webpack": "^4.17.2", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.7" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-loader": "^8.0.2", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^1.0.0", "node-sass": "^4.9.3", "react": "^16.4.2", "react-dom": "^16.4.2", "sass-loader": "^7.1.0", "style-loader": "^0.23.0" }
The Dependencies in the repo
"dependencies": { "express": "^4.16.3", "webpack": "^4.5.0", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.1" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^1.0.0", "node-sass": "^4.8.3", "react": "^16.3.1", "react-dom": "^16.3.1", "sass-loader": "^7.1.0", "style-loader": "^0.21.0" }
I googled the issue and tried many suggestions like giving the "absolute path" instead of "relative path" and/ or installing "babel-register" etc etc. but none of them worked.
So i wanted to ask your help. Is it because of different versions or something else? And if it is because of change in version, what can i do to make it fix it other than downgrading the version.
Please help and thanks in advance