I am quite new to node/webpack/babel/react - and it's quite a mountain to climb!
I am tantalizingly close to having the module react-network-diagrams example working but not quite there.
Here is my install so far and the error I am getting below that.
node --version v4.2.1
npm--version 2.14.7
made directory react-network-diagrams
in that directory...
npm init
npm i webpack -S
npm i babel-loader babel-preset-es2015 babel-preset-react -S
vi .bablerc -- { presets" : ["es2015", "react"] }
npm i react#^0.14.3 react-dom#^0.14.3 -S
npm install react-network-diagrams --save -- ok this time
npm install -- no errors
npm run start-website -- error - not found
uploaded react-network-diagrams-master to same directory
webpack.examples.config.js -> webpack.config.js
npm run start-website → error :sh: 1: react-docgen: not found
npm i react-docgen --save → ok
npm run start-website → error sh: 1: webpack-dev-server: not found
npm i webpack-dev-server --save → ok
when I run the website script provided I get npm run start-website
> react-network-diagrams#0.6.0 start-website /home/ubuntu/react-network-diagram
> npm run docs && webpack-dev-server --config webpack.examples.config.js
> react-network-diagrams#0.6.0 docs /home/ubuntu/react-network-diagram
> react-docgen src/ -x jsx -o examples/docs.json --pretty
http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /home/ubuntu/react-network-diagram
Hash: b9d3cb12fbebca77886e
Version: webpack 1.13.0
Time: 3413ms
Asset Size Chunks Chunk Names
examples-bundle.js 1.52 kB 0 [emitted] app
chunk {0} examples-bundle.js (app) 28 bytes [rendered]
[0] multi app 28 bytes {0} [built] [1 error]
ERROR in ./examples/modules/main.jsx
Module build failed: ReferenceError: [BABEL] /home/ubuntu/react-network-diagram/examples/modules/main.jsx: Using removed Babel 5 option: base.optional - Put the specific transforms you want in the `plugins` option
at Logger.error (/home/ubuntu/react-network-diagram/node_modules/babel-core/lib/transformation/file/logger.js:43:11)
at OptionManager.mergeOptions (/home/ubuntu/react-network-diagram/node_modules/babel-core/lib/transformation/file/options/option-manager.js:305:20)
at OptionManager.init (/home/ubuntu/react-network-diagram/node_modules/babel-core/lib/transformation/file/options/option-manager.js:506:10)
at File.initOptions (/home/ubuntu/react-network-diagram/node_modules/babel-core/lib/transformation/file/index.js:243:89)
at new File (/home/ubuntu/react-network-diagram/node_modules/babel-core/lib/transformation/file/index.js:159:72)
at Pipeline.transform (/home/ubuntu/react-network-diagram/node_modules/babel-core/lib/transformation/pipeline.js:49:16)
at transpile (/home/ubuntu/react-network-diagram/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (/home/ubuntu/react-network-diagram/node_modules/babel-loader/index.js:88:12)
# multi app
webpack: bundle is now VALID.
Try as I might I cannot quite see where I have gone wrong.
Thanks Ian
Related
I'm trying to create a react app with "npx create-react-app my-app" but I'm getting this error.
PS C:\Users\m.saral\Desktop\app> npx create-react-app my-app
Creating a new React app in C:\Users\m.saral\Desktop\app\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
Aborting installation.
Error: spawn UNKNOWN
at ChildProcess.spawn (node:internal/child_process:420:11)
at Object.spawn (node:child_process:733:9)
at spawn (C:\Users\m.saral\AppData\Roaming\npm\node_modules\create-react-app\node_modules\cross-spawn\index.js:12:24)
at C:\Users\m.saral\AppData\Roaming\npm\node_modules\create-react-app\createReactApp.js:383:19
at new Promise (<anonymous>)
at install (C:\Users\m.saral\AppData\Roaming\npm\node_modules\create-react-app\createReactApp.js:334:10)
at C:\Users\m.saral\AppData\Roaming\npm\node_modules\create-react-app\createReactApp.js:461:16
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
errno: -4094,
code: 'UNKNOWN',
syscall: 'spawn'
Deleting generated file... package.json
Deleting my-app/ from C:\Users\m.saral\Desktop\app
Done.
PS C:\Users\m.saral\Desktop\app> node -v
v16.18.0
I tried running command prompt as administrator
I tried:
npm uninstall -g create-react-app
npm uninstall create-react-app
I deleted and reinstalled Nodejs
npm install npm#latest -g
Node Version: v16.18.0
Npm Version: 8.19.2
Please try with the Latest nodejs Version For Window https://nodejs.org/en/
Also check npm Version as WEll
Problem solved
I could not find why the problem was solved when trying randomly
PS C:\Users\m.saral\Desktop\app\my-app> npm -v
8.19.2
PS C:\Users\m.saral\Desktop\app\my-app> npx -v
8.19.2
PS C:\Users\m.saral\Desktop\app\my-app> node -v
v16.18.0
PS C:\Users\m.saral\Desktop\app\my-app> npm -g list
C:\Users\m.saral\AppData\Roaming\npm
├── create-react-app#5.0.1
├── npm#8.19.2
└── tar#2.0.0
PS C:\Users\m.saral\Desktop\app> npx create-react-app my-app
Creating a new React app in C:\Users\m.saral\Desktop\app\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1392 packages in 1m
212 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
added 56 packages in 6s
212 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1448 packages in 2s
212 packages are looking for funding
run `npm fund` for details
9 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created my-app at C:\Users\m.saral\Desktop\app\my-app
Inside that directory, you can run several commands:
npm start
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
C:\Users\user>npx create-react-app my-app-redux-demo
Creating a new React app in C:\Users\user\my-app-redux-demo.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
core-js#2.6.12 postinstall C:\Users\user\my-app-redux-demo\node_modules\babel-runtime\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"
core-js#3.9.0 postinstall C:\Users\user\my-app-redux-demo\node_modules\core-js
node -e "try{require('./postinstall')}catch(e){}"
core-js-pure#3.9.0 postinstall C:\Users\user\my-app-redux-demo\node_modules\core-js-pure
node -e "try{require('./postinstall')}catch(e){}"
ejs#2.7.4 postinstall C:\Users\user\my-app-redux-demo\node_modules\ejs
node ./postinstall.js
cra-template#1.1.2
react-scripts#4.0.2
react-dom#17.0.1
react#17.0.1
added 1903 packages from 722 contributors and audited 1906 packages in 463.186s
127 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
Git repo not initialized Error: Command failed: git --version
at checkExecSyncError (child_process.js:611:11)
at execSync (child_process.js:647:15)
at tryGitInit (C:\Users\user\my-app-redux-demo\node_modules\react-scripts\scripts\init.js:46:5)
at module.exports (C:\Users\user\my-app-redux-demo\node_modules\react-scripts\scripts\init.js:283:7)
at [eval]:3:14
at Script.runInThisContext (vm.js:131:20)
at Object.runInThisContext (vm.js:297:38)
at Object. ([eval]-wrapper:10:26)
at Module._compile (internal/modules/cjs/loader.js:1118:30)
at evalScript (internal/process/execution.js:94:25) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 6444,
stdout: null,
stderr: null
}
Installing template dependencies using npm...
npm WARN registry Unexpected warning for http://registry.npmjs.org/: Miscellaneous Warning EINTEGRITY: sha512-zJmm08OqHoWE/tbPBA3EoM3NqC+jSXNrjmFOL793hAbIsvaQb1AGlZwyklCdorV7Smk99/CUEbGMX4WyYp9eOQ== integrity checksum failed when using sha512: wanted sha512-zJmm08OqHoWE/tbPBA3EoM3NqC+jSXNrjmFOL793hAbIsvaQb1AGlZwyklCdorV7Smk99/CUEbGMX4WyYp9eOQ== but got sha512-bT3IYAdf9Eqxmgn6hiWRbSzk6tLXQqI9oMekX8vYrhnaMN7MK7A7uYzVR2dlbf0vqr5HvYW2DOV61NEoGJXTVQ==.
(180727 bytes)
npm WARN registry Using stale data from http://registry.npmjs.org/ due to a request error during revalidation.
npm ERR! code EINTEGRITY
npm ERR! errno EINTEGRITY
npm ERR! Invalid response body while trying to fetch http://registry.npmjs.org/#testing-library%2fuser-event: Integrity verification failed for sha512-zJmm08OqHoWE/tbPBA3EoM3NqC+jSXNrjmFOL793hAbIsvaQb1AGlZwyklCdorV7Smk99/CUEbGMX4WyYp9eOQ== (C:\Users\user\AppData\Roaming\npm-cache_cacache\content-v2\sha512\cc\99\a6d3c3aa1e8584fed6cf040dc4a0cdcda82fa349736b8e614e2fbf778406c8b2f6906f5006959c3292509da2b57b4a693df7f09411b18c5f85b2629f5e39)
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache_logs\2021-02-19T14_10_23_648Z-debug.log
npm install --save #testing-library/jest-dom#^5.11.4 #testing-library/react#^11.1.0 #testing-library/user-event#^12.1.10 web-vitals#^1.0.1 failed
Looks like the directory where you ran CRA doesn't allow initializing a git repo. Could it be read-only?. Try git init in a new directory in the same path and if it fails - troubleshoot that. Once it succeeds, CRA should work too.
Check to ensure that you have correctly installed git by following the installation process outlined on https://git-scm.com/book/en/v2/Getting-Started-Installing-Git.
After installing, you can confirm that git is installed by running git --version (what React is trying to do). Currently, you will likely see an error trying to run this command as git is not installed. Post-install, you should see a version number being displayed.
After installing git, run your create-react-app again.
I am developing react app in my localhost and try to deploy the code into github page.
But while running the command npm run deploy its shows below error.
PS D:\Projects\portfolio-app> npm run deploy
> portfolio-app#0.1.0 predeploy D:\Projects\portfolio-app
> npm run build
> portfolio-app#0.1.0 build D:\Projects\portfolio-app
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
41.69 KB build\static\js\2.b0b79569.chunk.js
2.35 KB build\static\js\main.2ad86f1d.chunk.js
1.4 KB build\static\js\3.dc241c04.chunk.js
1.17 KB build\static\js\runtime-main.b7252dff.js
546 B build\static\css\main.ab7136cd.chunk.css
The project was built assuming it is hosted at /me/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
Find out more about deployment here:
https://cra.link/deployment
> portfolio-app#0.1.0 deploy D:\Projects\portfolio-app
> gh-pages -b master -d build
events.js:292
throw er; // Unhandled 'error' event
^
Error: spawn git ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn git',
path: 'git',
spawnargs: [ 'config', 'user.name' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio-app#0.1.0 deploy: `gh-pages -b master -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio-app#0.1.0 deploy 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\AppData\Roaming\npm-cache\_logs\2021-01-04T14_20_16_803Z-debug.log
PS D:\Projects\portfolio-app>
ENOENT means that a file does not exist. The path indicated is git. gh-pages is trying to use git but it seems that it can't find it. Make sure git is in your PATH or that the path is correctly specified in your code.
If that doesn't solve the problem, you might get additional debugging information by prepending NODE_DEBUG=gh-pages to your npm run command.
You need to use the command npm run deploy on the gitbash.
I am trying to install react-navigation so I can add navigation to my react app. I am following the instructions on https://facebook.github.io/react-native/docs/navigation but I can not get it to all install properly.
I am on a windows machine and have react versions
"react": "16.9.0",
"react-native": "0.61.5",
I installed react-native
npm install -g react-native
I installed the cli
npm install -g --save react-native-cli
I created my app
react-native init MyReactNativeApp
I cd'ed into that folder
cd MyReactNativeApp
I installed react-navigation
npm install -g --save react-navigation
npm install #react-navigation/native #react-navigation/stack
I am trying to run the next step which is the following, however it just hangs
If you have an bare React Native project, install the dependencies with npm:
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view
Further investigations shows i can install all the following all ok
npm install react-native-reanimated
npm install react-native-screens
npm install react-native-safe-area-context
npm install #react-native-community/masked-view
Its the install of "react-native-gesture-handler" which just hangs, i do not get any error message
npm --save install react-native-gesture-handler
[..................] - loadDep:prop-types: sill resolveWithNewModule react-native-gesture-handler#1.5.6 checking installable status
I have searched the net and tried a number of things, such as those below but nothing works
run my command window as an administrator
removed the react-native-safe-area-view folder from node-modules and tried again
put my GIT home on my PATH
I believe without this i can not use react-navigation and my app fails to run.
I do not understand why this is not working when i am following the official documentation.
UPDATE
Eventually it failed (after about 10 mins) with
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t
https://github.com/naver/hammer.js.git
npm ERR!
npm ERR! undefined
npm ERR! exited with error code: 128
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\MYUSER\AppData\Roaming\npm-cache\_logs\2020-02-
12T13_26_03_301Z-debug.log
The log file contents do not say anything more than the error
43 error Error while executing:
43 error C:\Program Files\Git\cmd\git.EXE ls-remote -h -t
https://github.com/naver/hammer.js.git
43 error
43 error undefined
43 error exited with error code: 128
GIT on my machine
>which git
C:\Program Files\Git\cmd\git.EXE
>git --version
git version 2.21.0.windows.1
Confirm you have git installer and available in command line
Since you are using rn 61, you should initialize your project with npx
npx react-native init AwesomeProject
The error implied that GIT can not access the given site. I'm behind a corporate Firewall. I set a proxy in git and I can now install "react-native-gesture-handler"
git config --global http.proxy http://host:port
I've searched far and wide for a solution to this but can't seem to find an answer. I've used Yeoman scaffolding many times before on my old Windows 8 PC but I can't get it working on my new Windows 8 PC.
I'm trying to scaffold an angular app using Yeoman. I did the following:
> npm install --global npm
> npm install --global yo bower grunt-cli
> npm install --global generator-angular
> mkdir mytodo && cd mytodo
> npm --version && yo --version && bower --version && grunt --version
2.5.1
1.4.6
1.4.1
grunt-cli v0.1.13
grunt v0.4.5
> yo angular
It runs up to the point where it runs bower install & npm install then shows a whole heap of errors. This is in the npm-debug.log file.
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'install' ]
2 info using npm#2.5.1
3 info using node#v0.12.1
4 verbose node symlink C:\Program Files\nodejs\\node.exe
5 verbose config Skipping project config: C:\Users\melon/.npmrc. (matches userconfig)
6 error install Couldn't read dependencies
7 verbose stack Error: ENOENT, open 'C:\Users\melon\package.json'
7 verbose stack at Error (native)
8 verbose cwd C:\Users\melon
9 error Windows_NT 6.2.9200
10 error argv "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
11 error node v0.12.1
12 error npm v2.5.1
13 error path C:\Users\melon\package.json
14 error code ENOPACKAGEJSON
15 error errno -4058
16 error package.json ENOENT, open 'C:\Users\melon\package.json'
16 error package.json This is most likely not a problem with npm itself.
16 error package.json npm can't find a package.json file in your current directory.
17 verbose exit [ -4058, true ]
What I find interesting in the errors is that it is referring to "C:\Users\melon\package.json". Shouldn't it be looking in the project folder for package.json (which is c:\projects\mytodo)?
Another weird thing is that it is putting a folder called node_modules inside C:\Users\melon\node_modules. This folder contains grunt, grunt-karma, jasmine-core, karma and karma-jasmine. I already have the node_modules folder in C:\Users\melon\AppData\Roaming\npm\node_modules\
If I run the following manually, it installs successfully.
> bower install
If I run the following manually, it fails.
> npm install
gifsicle#2.0.1 postinstall C:\Projects\mytodo\node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-gifsicle\node_modules\gifsicle
> node lib/install.js
module.js:338
throw err;
^
Error: Cannot find module 'C:\Users\melon\lib\install.js'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
...........
Here is some relevant PATH details:
PATH=C:\Program Files\nodejs\;C:\Program Files (x86)\Git\cmd;C:\Ruby193\bin;C:\ant\bin;C:\Users\melon\AppData\Roaming\npm
I hope this is enough information for someone to show me where I have gone wrong. Thanks in advance.
Since I can not comment yet (need 50 rep.), I'm posting this as an answer.
Run Node.js as admin. This often helps a lot with those kind of errors.
Your PATH variable is correct (Ruby is there, so is Git).
I suggest you try npm install -g bower first because there seems to be something wrong with the package.
Have you already tried another generator (e.g. webapp)?