I am getting an error when I build my project on Android
error: bundling failed: Error: Unable to resolve module buffer from E:\SUNNYCLOCK-MOBILE\node_modules\safe-buffer\index.js: Module
buffer does not exist in the Haste module map
This might be related to
https://github.com/facebook/react-native/issues/4968 To resolve try
the following:
1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache. 4. Remove haste cache: rm -rf
/tmp/haste-map-react-native-packager-*.
at ModuleResolver.resolveDependency (E:\SUNNYCLOCK-MOBILE\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:161:1460)
at ResolutionRequest.resolveDependency (E:\SUNNYCLOCK-MOBILE\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:91:16)
at DependencyGraph.resolveDependency (E:\SUNNYCLOCK-MOBILE\node_modules\metro\src\node-haste\DependencyGraph.js:272:4579)
at dependencies.map.relativePath (E:\SUNNYCLOCK-MOBILE\node_modules\metro\src\DeltaBundler\traverseDependencies.js:376:19)
at Array.map ()
at resolveDependencies (E:\SUNNYCLOCK-MOBILE\node_modules\metro\src\DeltaBundler\traverseDependencies.js:374:16)
at E:\SUNNYCLOCK-MOBILE\node_modules\metro\src\DeltaBundler\traverseDependencies.js:212:33
at Generator.next ()
at step (E:\SUNNYCLOCK-MOBILE\node_modules\metro\src\DeltaBundler\traverseDependencies.js:297:313)
at E:\SUNNYCLOCK-MOBILE\node_modules\metro\src\DeltaBundler\traverseDependencies.js:297:473
BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓▓░░░░░░░░ 51.9% (813/1143),
failed.
my React native info is
Environment:
OS: Windows 10
Node: 8.9.1
Yarn: 1.7.0
npm: 4.6.1
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4
How can I solve this issue
First Install the missing dependency buffer :
npm install buffer --save OR yarn add buffer
Second
Up in the top of your file using buffer:
import { Buffer } from 'buffer';
global.Buffer = Buffer;
If you don't need to access Buffer directly, just paste the above code in your App.js file
I've seen few posts related to this type of error. But couldn't resolve in mine.
My package.json:
"react": "~0.14.7",
"webpack": "^1.12.13",
"react-hot-loader": "^3.0.0-beta.6",
.
.
I'm getting following error on webpack:
ERROR in ./public/src/main.js
Module not found: Error: Cannot resolve module 'react-dom' in C:\Users\react-example\public\src
# ./public/src/main.js 19:16-36
But in the cmd line when I did
npm -v react-dom
I get 3.10.10. react-dom is there. But I wonder why it still gives this error.
When I installed react-dom through npm "npm install react-dom", and run webpack I get following errors:
ERROR in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
# ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 13:29-72
ERROR in ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
# ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 15:29-72
ERROR in ./~/react-dom/lib/ReactDOMInvalidARIAHook.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
# ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 14:29-72
ERROR in ./~/react-dom/lib/ReactDebugTool.js
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\react-example/node_modules/react/lib/ReactComponentTreeHook in C:\Users\react-example\node_modules\react-dom\lib
# ./~/react-dom/lib/ReactDebugTool.js 16:29-72
Please help.
Issue is react-dom is not installed, when you hit npm -v react-dom, it gives you the version of npm not react-dom version, you can check that by using npm -v or npm -v react-dom both will give you the same result.
You are checking the package version incorrectly.
How to install react and react-dom properly?
Use this to install react and react-dom:
npm install react react-dom --save
After that, you can check your package.json file, if react and react-dom has been installed correctly, you will find an entry for that.
How to check install package version?
To check all the locally installed packages version:
npm list
For globally installed packages, use -g also:
npm list -g
To check the version of any specific package, specify the package name also:
npm list PackageName
For Example =>
npm list react
npm list react-router
After installation your package.json will look like this:
{
"name": "***",
"version": "1.0.0",
"main": "***",
"scripts": {
....
},
"repository": {
....
},
"keywords": [],
"author": "",
"dependencies": {
....
"react": "^15.4.2", //react
"react-dom": "^15.4.2", //react-dom
....
},
"devDependencies": {
....
}
}
Latest version of react-dom is : 15.4.2
Reference: https://www.npmjs.com/package/react-dom
In my case I had an alias in my webpack.config.common.js:
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'react-dom': '#hot-loader/react-dom',
},
},
I just removed this line:
'react-dom': '#hot-loader/react-dom',
and it was fixed.
I used 'npm update' and that solved my problem.
In my case, it was an alias I had in my webpack.conf, which was looking for #hot-loader/react-dom.
For anybody reading this that wasn't able to figure it out. I had the same issue which I ended up resolving by installing the "react-router" package which is simply running the following command
npm i react-router-dom --save for a browser app.
npm i react-router-native for a native app.
You may need to update react and react-dom. Despite react-dom actually being installed, I was having this issue on ^15.5.4 and it went away with ^16.8.6:
$ # update the react and react-dom modules
$ yarn add react react-dom
Ensure that the two version match exactly in package.json:
"react": "^16.8.6",
"react-dom": "^16.8.6",
Delete yarn.lock, node_modules, and yarn again.
rm -Rf yarn.lock node_modules && yarn
You can also try to solve this issue by updating your react react-dom module, try
npm install react#latest react-dom#latest.
Try rm -rf node_modules && yarn or rm -rf node_modules && npm install if you use npm instead of yarn.
My particular issue for getting this error:
ERROR in ./src/index.js Module not found: Error: Can't resolve
'eact-dom' in
'C:\Users\Jose\Desktop\woz-u-React\React-Course\react-lesson-one\src'
# ./src/index.js 2:0-32 # multi
(webpack)-dev-server/client?http://localhost:8080 ./src/index.js
To fix this issue, I had to unzip the folder before installing.
The following command will resolve the problem.
npm install react react-dom --save
For those using Parcel, this can occur if you are targeting Node for a browser-based app.
There are 3 ways Parcel will infer this from your package.json:
Remove node as the target, or specify the --target as browser at the command line.
Also see:
https://v2.parceljs.org/getting-started/migration/
https://v2.parceljs.org/configuration/package-json/
Your app is pointing to the global version of react hence you need install it manually using global keyword. You can also compare your installed version of react-dom in package.json of your current project and globally installed react-dom version using command npm -v react-dom if both are different then manually install react dom using command:
sudo npm install -g react-dom#17.0.2
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
This is my first attempt at running react-native project. Followed all the instructions mentioned at react-native side. and ran 'npm start'
Getting below error in command prompt :
ERROR watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
Error: watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
at ChildProcess.<anonymous> (/Users/z013mrq/AwesomeProject/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:198:18)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:818:16)
at Socket.<anonymous> (internal/child_process.js:319:11)
at emitOne (events.js:77:13)
at Socket.emit (events.js:169:7)
at Pipe._onclose (net.js:469:12)
Try reinstalling watchman:
npm r -g watchman
brew update && brew upgrade
brew install watchman
If that doesn't fix it, try the answers posted here.
Try to re-install libtool by:
brew reinstall libtool --universal && brew unlink libtool && brew link
libtool
If won't help, try to remove it completely and re-try above
again:
brew uninstall libtool
As soon as I try to add
plugins: [
'karma-jasmine',
'karma-mocha-reporter'
],
to my karma.config.js
I get this error:
C:\git\angularjs\.bin>karma start karma.config.js
11 11 2015 15:21:10.617:WARN [plugin]: Cannot find plugin "karma-mocha-reporter".
Did you forget to install it ?
npm install karma-mocha-reporter --save-dev
11 11 2015 15:21:10.671:INFO [karma]: Karma v0.13.14 server started at http://localhost:9876/
11 11 2015 15:21:10.672:WARN [launcher]: Can not load "Chrome", it is not registered!
Perhaps you are missing some plugin?
obviously I tried running the
npm install karma-mocha-reporter --save-dev
also globally installing it
npm install karma-mocha-reporter --save-dev -g
and it installs fine. But still I keep getting the error messages when I launch karma. Is it installing in the wrong location or something?
You need to add the karma-chrome-launcher plugin in the plugins array:
plugins: [
'karma-jasmine',
'karma-mocha-reporter',
'karma-chrome-launcher'
],
How I answered here, I think that you installed the karma-mocha-reporter plugin globally.
Try to install karma-mocha-reporter using the link flag:
npm install karma-mocha-reporter --save-dev --link
I think you also want karma-chrome-launcher
Try
npm install --save-dev karma-chrome-launcher