#expo/vector-icon is not loading Android Device - react-router

I Have created the expo project with bare minimum for the project. I am using expo vector icons are specified in the document. So it is working well in the Browser and Android Emulator, this is fine. After that i have published the project to expo account by using command : "expo publish" and it has published successfully.So when i started scanning the resulted QR code into the mobile. it is not displaying the icons. Displaying some encoded string.
Syntax is have used :
import { Ionicons } from '#expo/vector-icons';
<Ionicons name="add" size={24} color="black" />
Package.json
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#expo/vector-icons": "^12.0.4",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/material-bottom-tabs": "^5.3.14",
"#react-navigation/native": "^5.9.3",
"#react-navigation/stack": "^5.14.3",
"expo": "~40.0.0",
"expo-font": "~8.4.0",
"expo-linear-gradient": "~8.4.0",
"expo-splash-screen": "~0.8.0",
"expo-status-bar": "~1.0.3",
"expo-updates": "~0.4.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-gesture-handler": "~1.8.0",
"react-native-paper": "^4.7.2",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.2",
"react-native-unimodules": "~0.12.0",
"react-native-web": "~0.13.12",
"react-redux": "^7.2.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"babel-jest": "~25.2.6",
"babel-plugin-module-resolver": "^4.1.0",
"jest": "~25.2.6",
"react-test-renderer": "~16.13.1"
},
"jest": {
"preset": "react-native"
},
"private": true
}
Please help me out if has any issue in the code.
Thanks in advance.

Related

Run Server in MERN application

I am learning MERN application development. I got a incomplete MERN application and trying to run the application. My package.json file is like below.
package.json
{
"name": "machine-shop",
"version": "1.0.0",
"private": true,
"type": "module",
"scripts": {
"build": "node ace build --production",
"start": "node server.js",
"dev": "node ace serve --watch",
"lint": "eslint . --ext=.ts",
"format": "prettier --write ."
},
"devDependencies": {
"#adonisjs/assembler": "^5.0.0",
"#babel/core": "^7.14.3",
"#babel/preset-react": "^7.13.13",
"#symfony/webpack-encore": "^1.4.0",
"#types/node": "^16.3.3",
"adonis-preset-ts": "^2.1.0",
"autoprefixer": "^10.2.6",
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-adonis": "^1.3.1",
"eslint-plugin-prettier": "^3.4.0",
"node-pre-gyp": "^0.17.0",
"pino-pretty": "^5.0.1",
"postcss": "^8.3.0",
"postcss-loader": "^5.3.0",
"prettier": "^2.3.0",
"sass": "^1.34.0",
"sass-loader": "^11.1.1",
"tailwindcss": "^2.1.2",
"typescript": "~4.2",
"youch": "^2.2.2",
"youch-terminal": "^1.1.1"
},
"dependencies": {
"-": "^0.0.1",
"#adonisjs/auth": "^8.0.4",
"#adonisjs/core": "^5.1.0",
"#adonisjs/lucid": "^14.1.0",
"#adonisjs/repl": "^3.0.0",
"#adonisjs/session": "^6.0.0",
"#adonisjs/shield": "^7.0.0",
"#adonisjs/view": "^6.0.0",
"#ckeditor/ckeditor5-build-decoupled-document": "^28.0.0",
"#ckeditor/ckeditor5-react": "^3.0.2",
"#date-io/date-fns": "2.6.1",
"#formatjs/intl-pluralrules": "1.3.5",
"#fortawesome/fontawesome-free": "5.13.0",
"#manaflair/redux-batch": "1.0.0",
"#material-ui/core": "4.9.14",
"#material-ui/icons": "4.9.1",
"#material-ui/lab": "4.0.0-alpha.53",
"#material-ui/pickers": "3.2.10",
"#material-ui/styles": "4.9.14",
"#reduxjs/toolkit": "^1.6.1",
"#tanem/svg-injector": "8.0.50",
"apexcharts": "^3.27.2",
"axios": "^0.21.1",
"axios-mock-adapter": "1.18.1",
"bootstrap": "4.6.0",
"camelcase": "^5.2.0",
"clipboard-copy": "3.1.0",
"clsx": "1.1.0",
"cp-cli": "2.0.0",
"css-mediaquery": "^0.1.2",
"date-fns": "2.8.1",
"dotenv": "^10.0.0",
"dotenv-expand": "5.1.0",
"downshift": "3.4.2",
"fg-loadcss": "^3.1.0",
"force": "^0.0.3",
"formik": "2.1.4",
"holderjs": "^2.9.9",
"json2mq": "^0.2.0",
"luxon": "^1.27.0",
"material-ui-popup-state": "^1.8.3",
"mysql": "^2.18.1",
"object-path": "^0.11.5",
"phc-argon2": "^1.1.1",
"phc-bcrypt": "^1.0.7",
"prop-types": "^15.7.2",
"proxy-addr": "^2.0.7",
"react": "^17.0.2",
"react-app-polyfill": "^1.0.4",
"react-bootstrap": "1.0.1",
"react-bootstrap-table-next": "4.0.2",
"react-bootstrap-table2-paginator": "2.1.2",
"react-datepicker": "2.16.0",
"react-dev-utils": "^9.1.0",
"react-dom": "^17.0.2",
"react-draggable": "4.4.2",
"react-dropzone": "^11.3.4",
"react-inlinesvg": "1.2.0",
"react-intl": "3.6.2",
"react-is": "16.13.1",
"react-perfect-scrollbar": "1.5.8",
"react-portal": "4.2.0",
"react-redux": "7.1.3",
"react-router-dom": "^5.2.0",
"react-select": "3.1.0",
"react-slick": "^0.28.1",
"react-swipeable-views": "0.13.9",
"react-syntax-highlighter": "12.2.1",
"react-tinder-card": "^1.4.0",
"react-window": "1.8.5",
"redux": "4.0.5",
"redux-persist": "6.0.0",
"redux-saga": "1.1.3",
"reflect-metadata": "^0.1.13",
"socicon": "3.0.5",
"source-map-support": "^0.5.19",
"sweetalert2": "^11.0.11",
"yup": "^0.32.9"
}
}
My server.js file is like below
server.js
import 'reflect-metadata';
import sourceMapSupport from 'source-map-support';
import { Ignitor } from '#adonisjs/core/build/standalone';
sourceMapSupport.install({ handleUncaughtExceptions: false })
new Ignitor(__dirname).httpServer().start()
I am trying to run the application using npm start command. But I am getting below error.
file:///home/foysal/Music/machineshop/server.js:20
new Ignitor(__dirname).httpServer().start()
^
ReferenceError: __dirname is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/foysal/Music/machineshop/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///home/foysal/Music/machineshop/server.js:20:13
What is the meaning of this code new Ignitor(__dirname).httpServer().start() ? Is it correct code ?
Previously I worked in another MERN application. server.js file of that project is not similar like server.js file of this project.
Am I doing anything wrong ?
Could any one help me to run the application ?
You have mixed up client and server. Usually you keep them separated when you work on stacks like that - in separate repositories or at least in separate directories. You have 2 ways as I see:
Separate client and server dependencies
Use Adonis to serve the React app
I would take the first path for better maintainability. If that seems too complicated, you can take the later one for now and keep working on separation down the road. For that you may wanna look into this document.

How to add custom Css in nextjs

I was trying to add these Template into one of my Components, this component also gets other values dynamically.
But I'm getting this error instead
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I also tried next-images in next.config.js but still gives me the same error.
This is my package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#zeit/next-css": "^1.0.1",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"moment": "^2.25.3",
"next": "^9.3.6",
"nprogress": "^0.2.0",
"prop-types": "^15.7.2",
"query-string": "^6.12.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-modal": "^3.11.2",
"react-quill": "^1.3.5",
"react-render-html": "^0.6.0",
"reactstrap": "^8.4.1"
}
}
Update:
My next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
publicRuntimeConfig : {
APP_NAME : ' ',
API_DEVELOPMENT : '',
API_PRODUCTION : '',
PRODUCTION:false
}
})
Try this in your next.config.js:
// next.config.js
const withCSS = require('#zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})

The react-scripts package provided by Create React App requires a dependency : Babel-Jest

I found this error message when running react-script test
The react-scripts package provided by Create React App requires a dependency "babel-jest": "^24.9.0"`
So the error message also recommend us to remove package-lock.json and also node_modules I tried but I have the same error message.
And I inspect the package-lock.json and for example jest-config (is a sub dependancies) use higher version than react-script accept.
Please if you have some advices
packages.json
{
"name": "creator-web-app",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
"homepage": "./",
"dependencies": {
"#craco/craco": "^5.6.4",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/react": "^16.9.34",
"await-to-js": "^2.1.1",
"axios": "^0.19.2",
"classnames": "^2.2.6",
"electron-is-dev": "^1.2.0",
"env-cmd": "^10.1.0",
"enzyme": "^3.11.0",
"history": "^4.10.1",
"i18next": "^19.4.2",
"i18next-browser-languagedetector": "^4.0.2",
"jest": "^25.3.0",
"jwt-decode": "^2.2.0",
"moment": "^2.24.0",
"nano-id": "^1.1.0",
"npm-watch": "^0.6.0",
"react": "^16.13.1",
"react-cookies": "^0.1.1",
"react-dom": "^16.13.1",
"react-i18next": "^11.3.4",
"react-inlinesvg": "^1.2.0",
"react-redux": "^7.2.0",
"react-router-dom": "5.1.2",
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-form": "^8.3.3",
"redux-thunk": "^2.3.0",
"typescript": "^3.7.0"
},
"scripts": {
"electron": "NODE_ENV=production npm run build && NODE_ENV=production electron .",
"start": "NODE_ENV=development react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"pack": "NODE_ENV=production && npm run build && electron-builder --dir",
"dist": "NODE_ENV=production && npm run build electron-builder"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/classnames": "^2.2.10",
"#types/enzyme": "^3.10.5",
"#types/jest": "^25.2.1",
"#types/react-redux": "^7.1.7",
"#types/react-router-dom": "^5.1.4",
"#types/redux-form": "^8.2.3",
"craco-alias": "^2.1.1",
"electron": "^8.2.1",
"electron-builder": "^22.4.1",
"enzyme-adapter-react-16": "^1.15.2",
"node-sass": "^4.13.1",
"react-test-renderer": "^15.6.2",
"ts-jest": "^25.4.0",
"whatwg-fetch": "^3.0.0"
},
"build": {
"appId": "studioapp.id",
"mac": {
"category": "your.app.category.type"
},
"files": [
"**/*"
],
"directories": {
"buildResources": "."
},
"protocols": {
"name": "studioapp-protocol",
"schemes": [
"studioapp"
]
}
},
"jest": {
"collectCoverageFrom": [
"<rootDir>/src/**/*.{ts,tsx}"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|yml)$": "<rootDir>/tests/test-file-mock.js",
"\\.(css|less|scss|sss|styl)$": "<rootDir>/tests/test-mock.js",
"#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.(tsx|ts)?$": "ts-jest"
}
}
}
Thanks
I faced the same problem with create-react-app. Here is what I did
Go to the path
C:\Users\YOURNAME\node_modules
and then remove those packages which show an error.
More information here: https://github.com/creativetimofficial/argon-dashboard-react/issues/28
Ironically I was working on a similarish problem this morning. Could you provide a screenshot of your package.json and the error message?
Babel-Jest is used to compile javascript code into a format that jest can consume. I suspect that your problem is that you have a dependency that the lock file has subsequently locked in the incorrect version of babel-jest.
I can add some more details from the above response for solve this issue I found the problem.
When we use react-scripts we can't have jest packages or something is already manage by create-react-app
The problem when I have is package.json contain jest at superior version than react-script can accept
When I deleted this line in my package.json already seems to work
One of your dependencies is using a newer version of babel-jest. You can find which ones they are by running npm ls babel-jest in your project root directory.
A simple way to fix the problem then, is to try and link to an older version of those packages, e.g. "#types/jest": "^24.0.0" so that they don't use the newer version of babel-jest.
for mac user remove
/Users/{UserName}/node_modules

Getting undefined is not an object

I am looking for sample project of React-Native. First of all i got erro which is unable to resolve router flux. Then i added flux dependency and i run npm start. After that i got "Undefined is not an object" in package.json. How can i solve it. Can you please help me?
{
"name": "FirsTrial",
"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.55.3",
"react-native-router-flux": "3.38.0"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-preset-react-native": "^2.1.0",
"jest": "22.4.3",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
"FirsTrial" is underlined !!!

BabelJs over Heroku: Couldn't find preset "env" relative to directory "/app"

I have an application with SailsJs over NodeJs on Heroku and I can't run babeljs on. It runs ok on my localhost, but I always get the error:
Error: Couldn't find preset "env" relative to directory "/app"
The Heroku persists in look for itens at /app folder. This project does not have one /app folder
My app folders structure is:
app_name
- api
- assets
- config
- tasks
- views
I follow the documentation of http://babeljs.io to my .babelrc
.babelrc
now:
{
"presets": ["react", "env", "stage-1"],
"plugins": ["transform-class-properties"]
}
Already tried:
{
"presets": ["react", "es2015", "stage-1"],
"plugins": ["transform-class-properties"]
}
When I set the .babelrc to use es2015 I get the error:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
I already installed the dependencies
npm install babel-preset-es2015
npm install babel-preset-react
npm install babel --save-dev
My package.json
{
"name": "redux-cardeck",
"private": true,
"version": "0.0.1",
"engines": {
"node": "6.11.4"
},
"description": "a Sails-Redux application for multi-player online card game",
"keywords": [
"sailsjs",
"redux",
"es2015",
"webpack"
],
"dependencies": {
"axios": "^0.13.1",
"babel-cli": "^6.26.0",
"babel-plugin-transform-class-properties": "^6.11.5",
"babel-plugin-transform-object-rest-spread": "^6.6.5",
"babel-polyfill": "^6.7.2",
"babel-preset-stage-1": "^6.13.0",
"connect-mongo": "0.8.2",
"css-loader": "^0.23.1",
"ejs": "2.3.4",
"file-loader": "^0.8.5",
"grunt": "0.4.5",
"grunt-babel": "^6.0.0",
"grunt-contrib-clean": "0.6.0",
"grunt-contrib-coffee": "0.13.0",
"grunt-contrib-concat": "0.5.1",
"grunt-contrib-copy": "0.5.0",
"grunt-contrib-cssmin": "0.9.0",
"grunt-contrib-jst": "0.6.0",
"grunt-contrib-less": "1.1.0",
"grunt-contrib-uglify": "0.7.0",
"grunt-contrib-watch": "0.5.3",
"grunt-sails-linker": "~0.10.1",
"grunt-sync": "0.2.4",
"include-all": "~0.1.6",
"node-sass": "^3.8.0",
"postcss-modules-extract-imports": "^1.0.0",
"postcss-modules-scope": "^1.0.0",
"rc": "1.0.1",
"react": "^0.14.9",
"react-dom": "^0.14.9",
"react-redux": "^4.4.8",
"react-router": "^2.6.1",
"react-tap-event-plugin": "^0.2.2",
"redux": "^3.7.2",
"redux-form": "^5.3.2",
"redux-optimist": "0.0.2",
"redux-optimistic-ui": "^0.3.2",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"redux-undo": "^0.6.1",
"sails": "~0.12.1",
"sails-disk": "~0.10.9",
"sails-hook-babel": "^6.0.1",
"sails-mongo": "^0.12.2",
"sails-postgresql": "^0.11.4",
"sails-service-mailer": "^3.2.1",
"sails-webpack": "^1.0.13",
"sass": "^0.5.0",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1",
"unexpected-react": "^1.0.0",
"updeep": "^0.16.1",
"url-loader": "^0.5.7"
},
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
"main": "app.js",
"repository": {
"type": "git",
"url": "git://github.com/vanphuong12a2/redux-cardeck.git"
},
"author": "phuong",
"license": "",
"devDependencies": {
"axios-mock-adapter": "^1.6.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.7.2",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-modules-require-hook": "^4.0.0",
"jsdom": "^8.1.0",
"react-tools": "^0.13.3",
"redux-devtools": "^3.4.0",
"redux-logger": "^2.6.1",
"source-map": "^0.5.3",
"unexpected": "^10.10.8",
"webpack-dev-server": "^1.14.1"
}
}
Someone already used BabelJs on Heroku before? I can't understand why it cant find babeljs at the package.json. I set the local of babel on heroku as
"scripts": {
"debug": "node debug app.js",
"start": "./node_modules/.bin/babel-node app.js"
},
I think it could be a problem with the relative structure of heroku or the fact I do not have a folder with name app
Thanks if someone can help me with this.
By default Heroku doesn't install the dependencies listed on "devDependencies" in your package.json.
You can either move your presets to "dependencies" or follow the steps here to alter this behavior.