Versioning Issues
- Selvyn Wright
I decided to do a manual configuration of a project rather than using the steps outlined here https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
After running the following steps
- npm init -y
- npm install –-save react react-dom babel-polyfill
- npm install –-save-dev babel-core babel-loader babel-preset-react babel-preset-env
- npm install –-save-dev webpack webpack-dev-server webpack-cli
Then developing index.html and main.js, and finally running
- npm run build
You get a crazy error that is all over the web.
ReactJS npm build error
PS C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter> npm run build
> starter@1.0.0 build C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter
> webpack -p
Hash: 885a28d468e0bc26496e
Version: webpack 4.29.0
Time: 677ms
Built at: 02/01/2019 3:54:15 PM
1 asset
Entrypoint main = index.js
[93] (webpack)/buildin/global.js 472 bytes {0} [built]
[130] multi babel-polyfill ./main.js 40 bytes {0} [built]
[332] ./main.js 3.58 KiB {0} [not cacheable] [built] [failed] [1 error]
+ 330 hidden modules
ERROR in ./main.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 (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\babel-loader\lib\index.js:10:11)
at Module._compile (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at loadLoader (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\loader-runner\lib\loadLoader.js:18:17)
at iteratePitchingLoaders (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
at NormalModule.doBuild (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\webpack\lib\NormalModule.js:280:3)
at NormalModule.build (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\webpack\lib\NormalModule.js:427:15)
at Compilation.buildModule (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\webpack\lib\Compilation.js:635:10)
at factory.create (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\webpack\lib\Compilation.js:884:14)
at factory (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\webpack\lib\NormalModuleFactory.js:405:6)
at hooks.afterResolve.callAsync (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\webpack\lib\NormalModuleFactory.js:155:13)
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
at resolver (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\webpack\lib\NormalModuleFactory.js:138:29)
at process.nextTick (C:\Users\selvy\Dropbox\work\javascript\QA ReactJS\EG02_SettingUpReactJS\starter\node_modules\webpack\lib\NormalModuleFactory.js:342:9)
at process._tickCallback (internal/process/next_tick.js:61:11)
@ multi babel-polyfill ./main.js main[1]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! starter@1.0.0 build: `webpack -p`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the starter@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\selvy\AppData\Roaming\npm-cache\_logs\2019-02-01T15_54_15_229Z-debug.log
I found what seems to be a workaround
- npx babel-upgrade --write
- this command scans through your configs and realigns the versions
- npm install babel-loader@7.1.4
- change the installed version to 7.1.4
- npm install babel-core
- installs the latest version of babel-core 6.26.3
- npm install babel-preset-env
After the following above, we still had problems with version 7. We went back to using create-react-app <app name>. Before running this app run the command
npm install -g create-react-app
This works fine and then you can modify the app.js accordingly.