Problem starting a react-native app in simulator - reactjs

This is my package.json
{
"name": "Locals",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#babel/runtime": "^7.3.1",
"react": "16.6.3",
"react-native": "0.58.3",
"react-native-elements": "^1.0.0",
"react-native-vector-icons": "^6.2.0"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "24.0.0",
"jest": "24.0.0",
"metro-react-native-babel-preset": "0.51.1",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
And I get following logs of failure:
Loading dependency graph, done. error: bundling failed: Error: Cannot
find module 'NativeModules'
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 (internal/modules/cjs/helpers.js:20:18)
at Object.get NativeModules [as NativeModules] (/Users/vb05mj/Developer/personal/small-town/Locals/node_modules/react-native/Libraries/react-native/react-native-implementation.js:313:12)
at Object.get [as NativeModules] (/Users/vb05mj/Developer/personal/small-town/Locals/node_modules/react-native-vector-icons/dist/lib/react-native.js:1:344)
at Object. (/Users/vb05mj/Developer/personal/small-town/Locals/node_modules/react-native-vector-icons/dist/lib/ensure-native-module-available.js:1:238)
at Module._compile (internal/modules/cjs/loader.js:689:30)

Run rm -rf node_modules && npm install to reinstall the dependencies.
Make sure that react-native-vector-icons is properly linked. Usually you should have this line within android/app/build.gradle:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
More info here:
https://github.com/oblador/react-native-vector-icons#android
Kill the npm server (ctrl+c or just run kill -15 [pid]) and restart it using npm start -- --reset-cache
Finally, don't forget to rebuild your app:
./android/gradlew clean && react-native run-android

Related

Cannot find module '<path>/.next/prerender-manifes

On my local Ubuntu machine, I'm getting this error when I try to run nextjs in production mode using next start:
$ next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from /home/pc/mynextapp/.env.local
info - Loaded env from /home/pc/mynextapp/.env
Error: Cannot find module '/home/pc/mynextapp/.next/prerender-manifest.json'
Require stack:
- /usr/local/lib/node_modules/next/dist/server/next-server.js
- /usr/local/lib/node_modules/next/dist/server/next.js
- /usr/local/lib/node_modules/next/dist/server/lib/start-server.js
- /usr/local/lib/node_modules/next/dist/cli/next-start.js
- /usr/local/lib/node_modules/next/dist/lib/commands.js
- /usr/local/lib/node_modules/next/dist/bin/next
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.mod._resolveFilename (/usr/local/lib/node_modules/next/dist/build/webpack/require-hook.js:23:32)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at NextNodeServer.getPrerenderManifest (/usr/local/lib/node_modules/next/dist/server/next-server.js:1363:26)
at NextNodeServer.getPreviewProps (/usr/local/lib/node_modules/next/dist/server/base-server.js:348:21)
at new Server (/usr/local/lib/node_modules/next/dist/server/base-server.js:70:32)
at new NextNodeServer (/usr/local/lib/node_modules/next/dist/server/next-server.js:67:9)
at NextServer.createServer (/usr/local/lib/node_modules/next/dist/server/next.js:143:16) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/usr/local/lib/node_modules/next/dist/server/next-server.js',
'/usr/local/lib/node_modules/next/dist/server/next.js',
'/usr/local/lib/node_modules/next/dist/server/lib/start-server.js',
'/usr/local/lib/node_modules/next/dist/cli/next-start.js',
'/usr/local/lib/node_modules/next/dist/lib/commands.js',
'/usr/local/lib/node_modules/next/dist/bin/next'
]
}
Here is my package.json:
{
"name": "mynextapp",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#types/node": "18.11.9",
"#types/react": "18.0.24",
"#types/react-dom": "18.0.8",
"classnames": "^2.3.2",
"cookie": "^0.5.0",
"marked": "^4.2.2",
"next": "13.0.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-markdown": "^8.0.4",
"react-paginate": "^8.1.4",
"react-query": "^3.39.2",
"styled-jsx": "^5.1.0",
"typescript": "4.8.4"
}
}
How can I fix it?

React project WebsocketServer.js SyntaxError on heartbeatInterval

I created a React project that uses webpack-dev-server and my package.json is:
{
"name": "testproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack --mode development",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint **/*.{js,jsx} --quiet",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.4.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.4.0",
"mini-css-extract-plugin": "^2.4.2",
"prettier": "^2.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}
When I run npm run start, I'm getting this error:
[webpack-cli] C:\dev\testproject\node_modules\webpack-dev-server\lib\servers\WebsocketServer.js:10
static heartbeatInterval = 1000;
SyntaxError: Unexpected token =
at new Script (vm.js:79:7)
at NativeCompileCache._moduleCompile (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)
at Module._compile (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:184:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Server.getServerTransport (C:\dev\testproject\node_modules\webpack-dev-server\lib\Server.js:1009:28)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! testproject#1.0.0 start: `webpack-dev-server --mode development --open`
What could be the cause of this?
It turns out upgrading my node version (in my case, from 10.13.0 to 16.11.1) resolved this.
I tried this based on advice found here and it worked.
Your babel transpiling is not set up properly you need to add appropriates plugins in your babel config.
Basically this error means that below statement is not supported, and thats because babel is not transpiling your code to a supported ES version.
static heartbeatInterval = 1000;
you may have to use this plugin: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

How to fix : Cannot find module 'webpack/bin/config-yargs'

I've running npm run dev command to run my react app. BUT then it pops up this Error: Cannot find module 'webpack/bin/config-yargs'. I've googled this error. Many people who solve this error tell me to install webpack and webpack-cli. Therefore, I went to install webpack and webpack-cli. However, the error still pops up. PLEASE HELP!
I've tried several solution, such as this
Cannot find module 'webpack/bin/config-yargs'
and this
How to solve 'Cannot find module 'webpack-cli/bin/config-yargs' error in reactjs?
NOW I've installed webpack and webpack-cli.
My cmd
C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master>npm run dev
> truffle-init-webpack#0.0.2 dev C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master
> webpack-dev-server
internal/modules/cjs/loader.js:613
throw err;
^
Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:610:15)
at Function.Module._load (internal/modules/cjs/loader.js:526:27)
at Module.require (internal/modules/cjs/loader.js:666:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object.<anonymous> (C:\Users\ASUS\Desktop\truffle-webpack-ipfs-bootstrap-master\truffle-webpack-ipfs-bootstrap-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js:54:1)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Function.Module.runMain (internal/modules/cjs/loader.js:824:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! truffle-init-webpack#0.0.2 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the truffle-init-webpack#0.0.2 dev 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\ASUS\AppData\Roaming\npm-cache\_logs\2019-08-30T09_10_59_739Z-debug.log
My package.json
{
"name": "truffle-init-webpack",
"version": "0.0.2",
"description": "Frontend example using truffle v3",
"scripts": {
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "Douglas von Kohorn",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-core": "^6.26.3",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.22.0",
"babel-register": "^6.22.0",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^3.2.0",
"eslint": "^3.14.0",
"eslint-config-standard": "^6.0.0",
"eslint-plugin-babel": "^4.0.0",
"eslint-plugin-mocha": "^4.8.0",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^2.0.0",
"html-webpack-plugin": "^2.28.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"truffle-contract": "^1.1.11",
"web3": "^0.20.7",
"webpack": "^4.0.0",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^2.11.5"
},
"dependencies": {
"ajv": "^5.5.2",
"boostrap": "^2.0.0",
"bootstrap": "^4.3.1",
"ipfs-api": "^19.0.0",
"jquery": "^3.4.1",
"node-sass": "^4.8.3",
"popper.js": "^1.15.0",
"postcss-loader": "^2.1.6",
"precss": "^3.1.2",
"sass-loader": "^6.0.7"
}
}
I had the same problem and it was because the webpack version was not stable
I used the lower version and the problem was solved
npm install webpack#4.32.2 --save-dev
npm install webpack-cli#3.3.2 --save-dev
npm install webpack-dev-server#3.5.1 --save-dev
In your package.json file just change "dev": "webpack-dev-server" to "dev": "webpack serve"
If you have the error for the issues described here: https://github.com/webpack/webpack-dev-server/issues/2029
I wrote a python script to fix the problem until it's patched.
You can just add the command to your package.json script after adding the file to your project (assuming you have python installed).
https://github.com/bigbizze/FixWebPackError-Cannot-find-module-webpack-cli-bin-config-yargs
Try the following. Its worked for me
"scripts": {
"lint": "eslint ./",
"build": "webpack",
"dev": "webpack serve"
},
I had the same problem, try npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge
I think it's related to webpack version only. Can you please update the webpack, webpack-cli and webpack-dev-server with latest version and check it.
Hope this will work for you!
in package.json
use "dev":"webpack serve" instead of "webpack-dev-server"
Don't play with the webpack module for a while you are learning because it is tricky to do this stuff.
I have the same problem that you listed before
// change your mode to development in package.json
// make everything in devDependencies
{
"name": "timer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
...
}
}
In your webpack.config
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
}
This may work for you.

React-Native error: cannot find module 'metro-react-native-babel-preset'

I upgraded my react version to 56, I have done clean set up. Now I'm facing with this issue and I have no idea how to solve that.
I even Installed this https://www.npmjs.com/package/babel-preset-react-native.
error: bundling failed: Error: Cannot find module 'metro-react-native-babel-preset' from 'D:\React\Snap'
at Function.module.exports [as sync] (D:\React\Snap\node_modules\resolve\lib\sync.js:43:15)
at resolveStandardizedName (D:\React\Snap\node_modules\#babel\core\lib\config\files\plugins.js:100:31)
at resolvePreset (D:\React\Snap\node_modules\#babel\core\lib\config\files\plugins.js:57:10)
at loadPreset (D:\React\Snap\node_modules\#babel\core\lib\config\files\plugins.js:76:20)
at createDescriptor (D:\React\Snap\node_modules\#babel\core\lib\config\config-descriptors.js:135:21)
at items.map (D:\React\Snap\node_modules\#babel\core\lib\config\config-descriptors.js:87:50)
at Array.map (<anonymous>)
at createDescriptors (D:\React\Snap\node_modules\#babel\core\lib\config\config-descriptors.js:87:29)
at createPresetDescriptors (D:\React\Snap\node_modules\#babel\core\lib\config\config-descriptors.js:79:10)
BUNDLE [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
package.json
{
"name": "SnapHaber",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "^0.56.0",
"react-native-firebase": "^4.3.0"
},
"devDependencies": {
"babel-jest": "23.2.0",
"babel-preset-react-native": "^5.0.2",
"jest": "23.2.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": ["module:metro-react-native-babel-preset"]
}
after npm i metro-react-native-babel-preset --save-dev :
Loading dependency graph, done.
error: bundling failed: Error: [BABEL] D:\React\Snap\index.js: .overrides is not allowed in preset options
at Object.keys.forEach.key (D:\React\Snap\node_modules\#babel\core\lib\config\validation\options.js:71:13)
at Array.forEach (<anonymous>)
at validate (D:\React\Snap\node_modules\#babel\core\lib\config\validation\options.js:69:21)
at instantiatePreset (D:\React\Snap\node_modules\#babel\core\lib\config\full.js:242:36)
at cachedFunction (D:\React\Snap\node_modules\#babel\core\lib\config\caching.js:42:19)
at loadPresetDescriptor (D:\React\Snap\node_modules\#babel\core\lib\config\full.js:233:45)
at config.presets.map.descriptor (D:\React\Snap\node_modules\#babel\core\lib\config\full.js:68:19)
at Array.map (<anonymous>)
at recurseDescriptors (D:\React\Snap\node_modules\#babel\core\lib\config\full.js:66:38)
BUNDLE [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
You have installed the wrong dependendcies, you have install react-native babel preset, try by installing correct dependencies i.e metro-react-native-babel-preset.
You can install that by
npm i metro-react-native-babel-preset --save-dev
For more details refer this link - https://www.npmjs.com/package/metro-react-native-babel-preset

Webpack unknown error : Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

I tried to learn simple project with MERN stack by doing example.
But i don't know why webpack didn't work and throw an error like this in terminal.
I'm using Ubuntu v16.04.
npm run dev
mern-stack#1.0.0 dev /home/trungh13/Dev/mern-stack
webpack -wd
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (NormalModuleFactory).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mern-stack#1.0.0 dev: webpack -wd
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mern-stack#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Here is my package.json file:
{
"name": "mern-stack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon --exec babel-node ./server/server.js --ignore public/",
"dev": "webpack -wd"
},
"author": "trungh13",
"license": "ISC",
"dependencies": {
"ejs": "^2.5.7",
"express": "^4.16.3",
"mongodb": "^3.0.5",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.7.0",
"nodemon": "^1.17.2",
"webpack": "^4.2.0"
}
}
Here is my webpack.config.js:
module.exports={
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader'
}
]
}
};
Thanks a lot.
The problem is inside the module object. The loaders property is invalid and you should use the rules property instead. Also, in webpack-4 you need to provide the mode property (possible values are development, production and none).
Another thing to mention is that you need to include the webpack-cli package in your devDependencies because in the latest version of webpack, the CLI tool was moved to this package: webpack-cli
Check this webpack-demo project using Webpack 4 configuration objects (for development and production environments).
I think the previous tutorial project could be helpful.

Resources