I have an ionic vue project that shows a blank screen when I open it on an emulator. Thinking I missed something on my end I then created a new project using the Photo Gallery starter. It too is showing a blank page on the emulator. Any suggestions?
My project’s Ionic Info
Ionic:
Ionic CLI : 6.13.1 (/usr/local/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/vue 5.8.4
Utility:
cordova-res (update available: 0.15.3) : 0.15.1
native-run : 1.5.0
System:
NodeJS : v12.18.0 (/usr/local/bin/node)
npm : 7.23.0
OS : macOS Big Sur
Package list
"dependencies": {
"#capacitor/camera": "^1.1.0",
"#capacitor/core": "3.2.3",
"#capacitor/filesystem": "^1.0.3",
"#capacitor/ios": "^3.2.3",
"#capacitor/network": "^1.0.3",
"#ionic/pwa-elements": "^3.0.2",
"#ionic/vue": "^5.4.0",
"#ionic/vue-router": "^5.4.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"autoprefixer": "^9",
"axios": "^0.23.0",
"core-js": "^3.6.5",
"moment": "^2.29.1",
"postcss": "^7",
"swiper": "^6.8.4",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"vue": "^3.2.1",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-rc.1"
},
"devDependencies": {
"#capacitor/cli": "3.2.3",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0",
"#vue/test-utils": "^2.0.0-0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"vue-cli-plugin-tailwind": "~2.0.6",
"vue-jest": "^5.0.0-0"
}
Related
I am using an NX mono repository for my project. It contains the following three applications:
a web app (NextJS),
an API service (NestJS)
a mobile app (React Native)
I was trying to deploy the backend code to Heroku and I am facing the issue of it not finding the packages when I set the NODE_ENV variable to production. All of the NX packages are stored as the dev dependencies as default. It works fine if I set the NODE_ENV to development.
Question: What is the ideal way of solving the issue? I do not want to set NODE_ENV to development because otherwise, it will slow the deployments by installing useless packages from the devDependencies.
Any help will be appreciated.
This is what my package.json looks like.
"scripts": {
"api": "nx serve api",
"build:api": "nx build api",
"api:prod": "node dist/apps/api/main.js",
},
"dependencies": {
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#hookform/resolvers": "^2.9.7",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.4",
"#nestjs/common": "^9.0.0",
"#nestjs/config": "^2.2.0",
"#nestjs/core": "^9.0.0",
"#nestjs/jwt": "^9.0.0",
"#nestjs/mongoose": "^9.2.0",
"#nestjs/passport": "^9.0.0",
"#nestjs/platform-express": "^9.0.0",
"#react-native-community/clipboard": "^1.5.1",
"#react-navigation/bottom-tabs": "^6.3.3",
"#react-navigation/material-top-tabs": "^6.2.4",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#react-three/drei": "^9.34.3",
"#react-three/fiber": "^8.8.9",
"#tanstack/react-query": "^4.2.3",
"#trycourier/courier": "^3.15.0",
"#twotalltotems/react-native-otp-input": "^1.3.11",
"axios": "^0.27.2",
"bcryptjs": "^2.4.3",
"class-transformer": "^0.5.1",
"class-validator": "^0.13.2",
"cookies": "^0.8.0",
"core-js": "^3.6.5",
"http-proxy": "^1.18.1",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"material-ui-phone-number": "^3.0.0",
"mongoose": "^6.5.2",
"mui-tel-input": "^2.0.1",
"native-base": "^3.4.13",
"next": "12.2.3",
"npm": "^8.19.2",
"passport": "^0.6.0",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"patch-package": "^6.4.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.34.2",
"react-is": "18.2.0",
"react-native": "0.69.3",
"react-native-gesture-handler": "^2.6.0",
"react-native-pager-view": "^6.0.1",
"react-native-phone-number-input": "^2.1.0",
"react-native-reanimated": "^2.10.0",
"react-native-safe-area-context": "^4.3.1",
"react-native-screens": "^3.15.0",
"react-native-snackbar": "^2.4.0",
"react-native-tab-view": "^3.2.1",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.23.1",
"react-otp-input": "^2.4.0",
"reflect-metadata": "^0.1.13",
"regenerator-runtime": "0.13.7",
"rxjs": "^7.0.0",
"styled-components": "5.3.5",
"three": "^0.145.0",
"tslib": "^2.3.0",
"twilio": "^3.81.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#commitlint/cli": "^17.0.3",
"#commitlint/config-conventional": "^17.0.3",
"#nestjs/schematics": "^9.0.0",
"#nestjs/testing": "^9.0.0",
"#nrwl/cli": "14.5.4",
"#nrwl/cypress": "14.5.4",
"#nrwl/detox": "14.5.6",
"#nrwl/eslint-plugin-nx": "14.5.4",
"#nrwl/jest": "14.5.4",
"#nrwl/linter": "14.5.4",
"#nrwl/nest": "14.5.4",
"#nrwl/next": "^14.5.4",
"#nrwl/node": "14.5.4",
"#nrwl/react": "14.5.4",
"#nrwl/react-native": "^14.5.6",
"#nrwl/web": "14.5.4",
"#nrwl/workspace": "14.5.4",
"#react-native-async-storage/async-storage": "1.17.7",
"#react-native-community/cli": "8.0.4",
"#react-native-community/cli-platform-android": "8.0.4",
"#react-native-community/cli-platform-ios": "8.0.4",
"#testing-library/dom": "^8.18.1",
"#testing-library/jest-dom": "5.16.4",
"#testing-library/jest-native": "4.0.5",
"#testing-library/react": "13.3.0",
"#testing-library/react-native": "11.0.0",
"#testing-library/user-event": "^14.4.3",
"#types/bcryptjs": "^2.4.2",
"#types/cookies": "^0.7.7",
"#types/jest": "27.4.1",
"#types/lodash": "^4.14.182",
"#types/node": "16.11.7",
"#types/passport-jwt": "^3.0.6",
"#types/passport-local": "^1.0.34",
"#types/react": "18.0.15",
"#types/react-dom": "18.0.6",
"#types/react-is": "17.0.3",
"#types/react-native": "0.69.3",
"#types/react-native-vector-icons": "^6.4.12",
"#types/styled-components": "5.1.25",
"#types/three": "^0.144.0",
"#typescript-eslint/eslint-plugin": "^5.29.0",
"#typescript-eslint/parser": "^5.29.0",
"babel-jest": "27.5.1",
"babel-plugin-styled-components": "1.10.7",
"cypress": "^10.2.0",
"detox": "19.7.1",
"eslint": "~8.15.0",
"eslint-config-next": "12.2.3",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.30.1",
"eslint-plugin-react-hooks": "4.6.0",
"husky": "^8.0.0",
"jest": "27.5.1",
"jest-circus": "27.5.1",
"jest-react-native": "18.0.0",
"lint-staged": "^13.0.3",
"metro": "0.71.3",
"metro-babel-register": "0.71.3",
"metro-react-native-babel-preset": "0.71.3",
"metro-resolver": "0.71.3",
"msw": "^0.47.2",
"nx": "14.5.4",
"prettier": "^2.6.2",
"prettier-plugin-organize-imports": "^3.1.0",
"react-devtools": "^4.26.0",
"react-native-config": "1.4.6",
"react-native-svg": "12.4.3",
"react-native-svg-transformer": "1.0.0",
"react-test-renderer": "18.2.0",
"ts-jest": "27.1.4",
"ts-node": "~10.8.0",
"typescript": "~4.7.2"
},
And this is my Procfile:
web: yarn build:api && yarn api:prod
Nx is installed as a devDependency. Heroku scrubs devDependencies after thebuild step so that you don't have extra dependencies for your final environment. What you should do is have a build script in your package.json that builds everything your server will need to start, and then have a start script that starts the application, or set the web property in the Procfile as you currently have done for the build:api && api:prod. However, this start script should not rely on any devDependencies. It should be able to run with just the production dependencies.
My Source code is:
import Vue from "vue";
console.log('Vue', Vue)
With this packages versions:
"#vue/cli": "4.5.15",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "4.5.15",
"#vue/compiler-sfc": "^3.2.31",
"#vue/component-compiler-utils": "^3.1.2",
But it shows me an error when i mount app.js file to html.
Uncaught TypeError: Cannot convert undefined or null to object
at hasOwn (<anonymous>)
at t.exports (well-known-symbol.js:16:26)
at Object.c04e (to-primitive.js:10:20)
at a (bootstrap:79:22)
at Object.a04b (to-property-key.js:1:19)
at a (bootstrap:79:22)
at Object.06cf (object-get-own-property-descriptor.js:6:21)
at a (bootstrap:79:22)
at Object.23e7 (export.js:2:32)
at a (bootstrap:79:22)
May be it problem with ES versions or something else, idk how to google it, help pls with any proposals
I've changed my package.json from
"vuex": "^4.0.2",
"vue-cli": "^2.9.6",
"#vue/cli": "4.5.15",
"vue-loader": "^16.0.0-beta.8",
"vue-router": "^4.0.13",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "4.5.15",
"#vue/compiler-sfc": "^3.2.31",
to
"vue": "2.6.*",
"vue-template-compiler": "^2.0.0",
"webpack-cli": "^4.9.2",
"webpack-dev-middleware": "^5.3.1",
"#vue/cli": "^5.0.1",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "^5.0.1",
"babel-loader": "^8.2.3",
And app complied without this error.
I'm building this Vue app with Visual Studio and regardless of the build mode (debug/release) I still get this message below in the console.
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
Is there a way to know if I'm really in release mode or if Vue is just throwing me that message?
I know that usually it means the JS files have been minified, is that the case with a Vue app?
I'm not sure if this helps but here is my packages.json file
{
"name": "aspnetcore-vuejs",
"description": "ASP.NET Core & VueJS Starter project",
"author": "Mark Pieszak",
"scripts": {
"dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"install": "webpack --config webpack.config.vendor.js"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/vue-fontawesome": "^0.1.1",
"axios": "^0.15.3",
"bootstrap-vue": "^2.0.0-rc.11",
"core-js": "^2.4.1",
"dayjs": "^1.7.5",
"font-awesome": "^4.6.3",
"material-design-icons-iconfont": "^3.0.3",
"vue": "^2.1.8",
"vue-infinite-loading": "^2.3.3",
"vue-masked-input": "^0.5.2",
"vue-router": "^2.1.1",
"vue-select": "^2.5.0",
"vue-server-renderer": "^2.1.8",
"vue-template-compiler": "^2.1.8",
"vuetify": "^1.2.3",
"vuex": "^2.1.1",
"vuex-router-sync": "^4.0.1"
},
"devDependencies": {
"aspnet-webpack": "^2.0.1",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.18.0",
"babel-register": "^6.18.0",
"bootstrap": "^4.1.3",
"cross-env": "^3.1.3",
"css-loader": "^0.26.1",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.0.0-rc",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"node-sass": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^1.3.1",
"regenerator-runtime": "^0.12.1",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.2",
"webpack": "^2.2.0",
"webpack-hot-middleware": "^2.12.2"
}
}
As the Vue.js deployment guide you posted suggests, please check your webpack.config.js and be sure to use the right mode targetting production environment when you deploy the app.
In Webpack 4+, you can do:
module.exports = {
mode: 'production'
}
But in Webpack 3 and earlier, you'll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
When you are ready, you should simply need to run npm run build to start bundling your modules.
Related and useful readings:
Writing separate Webpack configurations for each environment.
Managing development and production builds with Webpack.
Introduction to NPM Scripts.
I need to update Laravel mix to use Babel 7.
I update my dependencies to use Laravel Mix 4.0.7 that should support Babel 7.
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.2.1",
"#babel/preset-env": "^7.2.0",
"#babel/preset-react": "^7.0.0",
"axios": "^0.15.3",
"babel-loader": "^7.1.5",
"bootstrap": "4.1.3",
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^4.0.7",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lodash": "^4.17.10",
"react-color": "^2.14.1",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"styled-components": "^4.0.3",
"vue": "^2.5.13"
}
And in my .babelrc file i have:
{
"loader": "babel-loader",
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-react-jsx"
]
}
And in my webpack.mix.js i have:
mix.react("resources/assets/app.js", "public/js");
The problem is when i run npm run watch i get the following error:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-core'
Apparently, Laravel Mix is trying to use babel-core instead of #babel/core.
Any ideas on how to solve this?
I believe you need to upgrade babel-loader to 8.x.
If you read the docs at https://www.npmjs.com/package/babel-loader
This README is for babel-loader v8 + Babel v7
Check the 7.x branch for docs with Babel v6
So, babel-loader 8.x work with #babel-core 7. babel-loader 7.x works with babel-core 6.x
When I try to run my React Native app on the iOS simulator, I'm presented with a red screen with the following error:
Ambiguous resolution: module
'/Users/my-user/Documents/my-RN-app/app/index.js' tries to require
'react-native-vector-icons', but there are several files providing
this module. You can delete or fix them:
/Users/my-user/Documents/my-RN-app/ios/build/Build/Products/Debug-iphonesimulator/MyApp.app/my-RN-app/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
/Users/my-user/Documents/my-RN-app/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
However, both of those above files (the package.json files) are missing. I had actually gotten this error before, so I decided to delete the package.json file in the first directory location mentioned above (under ios/build/.. etc.) and refreshed the app and it loaded just fine. Now, after trying to start up my app again in the iOS simulator, I am back to the same error, but I cannot delete the package.json file because it doesn't even exist now in either location.
I've tried to just comment out the import of the react-native-vector-icons lib in my app/index.js file and restarting the sim, but the error still appears.
So finally, I've tried this:
sudo rm -rf node_modules (I get "permission denied" if I don't use sudo although it appears I have full read/write permission on all the files/folders in this project)
sudo rm -rf ios/build
npm install
cd ios && pod install
react-native link
And then back into Xcdoe: Product > Clean, after which I ran the simulator again. Still the same error.
As requested, here is my package.json file:
{
"name": "myApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"run-ios": "node_modules/.bin/react-native run-ios",
},
"dependencies": {
"art": "^0.10.1",
"auto-bind": "^1.1.0",
"axios": "^0.16.1",
"eslint-plugin-react-native": "^2.3.1",
"jwt-decode": "^2.2.0",
"moment": "^2.19.1",
"native-base": "^2.3.1",
"prop-types": "^15.5.8",
"pubnub": "^4.18.0",
"react": "^16.0.0",
"react-native": "^0.49.3",
"react-native-actionsheet": "^2.3.0",
"react-native-device-info": "^0.11.0",
"react-native-fabric": "^0.5.1",
"react-native-fingerprint-scanner": "^2.2.1",
"react-native-flip-card": "^3.5.2",
"react-native-google-analytics-bridge": "^5.3.3",
"react-native-haptic": "^1.0.5",
"react-native-image-base64": "^0.1.3",
"react-native-image-picker": "^0.26.7",
"react-native-image-resizer": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "^0.4.3",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-keychain": "^1.2.1",
"react-native-maps": "^0.17.1",
"react-native-modal-dropdown": "^0.5.0",
"react-native-mplayer": "^1.0.1",
"react-native-notifications-badge-extensions": "^1.0.5",
"react-native-permissions": "^0.2.7",
"react-native-pie": "^0.4.0",
"react-native-router-flux": "^4.0.0-beta.26",
"react-native-snap-carousel": "^3.2.3",
"react-native-tag-input": "0.0.18",
"react-native-tooltip": "^5.2.0",
"react-native-uuid-generator": "^3.0.2",
"react-native-vector-icons": "^4.3.0",
"react-native-version-number": "^0.1.3",
"react-native-voice": "^0.2.5",
"react-navigation": "^1.2.0",
"sprintf-js": "^1.0.3",
"validator": "^9.2.0"
},
"devDependencies": {
"babel-jest": "18.0.0",
"babel-preset-react-native": "^4.0.0",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^3.14.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^7.5.1",
"jest": "18.1.0",
"jest-serializer-enzyme": "^1.0.0",
"jsdom": "11.6.2",
"jsdom-global": "3.0.2",
"metro-bundler": "^0.20.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.2.0",
"react-native-mock": "^0.3.1",
"react-test-renderer": "16.0.0-alpha.12",
"sinon": "^4.1.2"
},
"resolutions": {
"moment": "2.19.1"
}
}
I had to manually link the React pod to node_modules:
pod 'React', :path => '../node_modules/react-native'
Then clean and build again