conneraiken/mern-boilerplate

React + Express + Webpack + Mongo = MERN Stack Boilerplate

mern-boilerplate's Issues

Error: Cannot find module '@babel/core'

ERROR in ./src/client/index.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:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/media/dev/mern-boilerplate/node_modules/babel-loader/lib/index.js:10:11)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js babel-polyfill react-hot-loader/patch ./src/client/index.js main[4]

Module build failed and Babel loader not found error in terminal

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

No MongoDB yet right?

Because, I didn't see no code for that anywhere... Should be nice if I can PR it, but I am kinda busy :|

Not really an issue

That's awesome! I come from mern.io because their language switching didn't work and their dependencies are not up to date.

I'm sure it would be hard to but I'd love if you could add reactIntl for multiple languages and redux server side rendering