Vercel deployment throws "Error: Cannot find module '#next/env'" - next.js

I've been trying to debug this error for so long now... Screenshot from Vercel I have a .env file in my root directory. I'm completely new to web deployment so I wasn't quite sure about what to put in the .env file either. The directory which Vercel's error message points to /vercel/path0/node_modules/next-sitemap/bin/next-sitemap isn't even a directory in my root folder for this project.
EDIT: This is the project's file structure. File Structure
EDIT2: The package.json file
"name": "landing-page",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"postbuild": "next-sitemap"
},
"dependencies": {
"#next/bundle-analyzer": "^12.0.7",
"dotenv": "^8.6.0",
"file-loader": "^6.2.0",
"framer-motion": "^2.7.5",
"globby": "^11.0.0",
"isomorphic-unfetch": "^3.0.0",
"next": "9.5.3",
"next-compose-plugins": "^2.2.0",
"next-optimized-images": "^2.5.4",
"npm": "^8.2.0",
"prettier": "^2.1.2",
"rc-drawer": "^4.1.0",
"react": "16.13.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "16.13.0",
"react-ga": "^3.1.2",
"react-icons": "^3.10.0",
"react-modal-video": "^1.2.6",
"react-multi-carousel": "^2.5.5",
"react-scroll": "^1.8.0",
"react-stickynode": "^3.0.3",
"theme-ui": "^0.3.1",
"typeface-dm-sans": "^1.1.3",
"webpack": "^4.46.0"
},
"devDependencies": {
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"next-sitemap": "^1.6.203",
"webpack-cli": "^4.9.1"
}
}

Your project does not have package-lock.json file. This most likely causes the error.
Remove node_modules directory from your root project directory.
Below is an example of how the project should look like.
Run npm install again.
Now you should have the package-lock.json file in your root project directory.
Try to deploy your app without any issue.

Related

.less files are not appear in Nuxt 3 build

I have a nuxt 3 app, where i want to set global styles via .less files.
nuxt.config.ts
css: [
"#/assets/less/main.less"
],
If i run yarn run dev everything works fine, but when i run
yarn run build (nuxt build) and yarn run preview(nuxt preview) the .less files are just not there. For some reason the build doesnt contain any of the styles from the .less files.
I tried to add the less-loader package (although as i know its not needed in nuxt3).
I guess the problem is around the difference of NODE_ENV production / develop,but im not sure how or what should i config to get the build involve the .less files.
here is my package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"analyze": "nuxt analyze",
"cleanup": "nuxt cleanup"
},
"devDependencies": {
"#nuxtjs/eslint-config": "^11.0.0",
"#nuxtjs/eslint-config-typescript": "^11.0.0",
"#popperjs/core": "^2.11.6",
"bootstrap": "^5.2.2",
"dayjs": "^1.11.5",
"eslint": "^8.24.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"line-clamp": "^1.0.0",
"nuxt": "3.0.0-rc.10",
"vue": "^3.2.40"
},
"dependencies": {
"#microsoft/signalr": "^7.0.0",
"bootstrap-vue-3": "0.4.13",
"mitt": "^3.0.0",
"vue-disqus": "^5.1.0",
"vue-gtag": "^2.0.1",
"vue-next-masonry": "1.1.3",
"vue-tweet": "^2.0.2"
}
}

Why Ant Design CSS looks different on deployment than in development

I am currently working on a project where we agreed to use Ant Design library with NextJS and TypeScript
When I test locally using npm run dev everything looks alright, but on npm run build and npm run start the css looks a complete mess.
I tried overriding Ant Design default css using the !important property on various of different classes but I don't think that's a very good approach. Has anyone ever encountered such a problem before?
Here is the package.json file if that's relevant
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint src --ext js,ts,tsx",
"test": "jest --config ./configs/jest.config.js",
"prepare": "husky install"
},
"dependencies": {
"#ant-design/icons": "^4.7.0",
"antd": "^4.18.6",
"axios": "^0.25.0",
"next": "^12.1.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#types/node": "17.0.12",
"#types/react": "17.0.38",
"babel-jest": "^27.4.6",
"concurrently": "^7.0.0",
"eslint": "8.7.0",
"eslint-config-next": "12.0.8",
"eslint-config-prettier": "^8.3.0",
"eslint-config-ts-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.4",
"jest": "^27.4.7",
"jest-css-modules": "^2.1.0",
"pretty-quick": "^3.1.3",
"typescript": "^4.5.5"
}
}

React native iOS app getting stuck at launch screen after importing firebase crashlytics?

I have implemented crashlytics in react native app which is working fine if i import just android or iOS folder separately but when i import crashlytics library in .js file iOS app is getting stuck at launch screen.
Please suggest the way or root cause fir this issue.
App is getting stuck after importing below library in js file else App is working fine
import crashlytics from '#react-native-firebase/crashlytics';
Error log
package.json as below
{
"name": "abc",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"bundle-android": "react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/",
"bundle-ios": "react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false",
"test": "jest",
"ios": "react-native run-ios --simulator 'iPhone X'",
"android": "react-native run-android --variant=ProdDebug",
"android-ete": "ENVFILE=.env.ete react-native run-android --variant=EteDebug",
"ios-ete": "ENVFILE=.env.ete react-native run-ios",
"ios-prod": "ENVFILE=.env.prod react-native run-ios",
"exportcert-ete": "java -jar BKSPubKeyTool.jar --importkeystore keystore_ete.bks --alias oauth.testing --password keystorepwd --exportcert src/keystore/id_rsa_ete.pem --exportjs src/keystore/pubKey_ete.js",
"exportcert-prod": "java -jar BKSPubKeyTool.jar --importkeystore keystore.bks --alias oauth --password keystorepwd --exportcert src/keystore/id_rsa_prod.pem --exportjs src/keystore/pubKey_prod.js",
"lint": "eslint .",
"clean": "react-native-clean-project"
},
"dependencies": {
"#react-native-firebase/analytics": "^7.4.2",
"#react-native-firebase/app": "^6.0.0-alpha.25",
"#react-native-firebase/crashlytics": "^6.0.0-alpha.25",
"axios": "^0.19.0",
"buffer": "^5.2.1",
"crypto-js": "^3.1.9-1",
"jetifier": "^1.6.3",
"jsencrypt": "^3.0.0-rc.1",
"mobx": "^5.11.0",
"mobx-react": "^5.4.4",
"moment": "^2.24.0",
"native-base": "^2.12.1",
"prop-types": "^15.7.2",
"querystring": "^0.2.0",
"react": "16.8.6",
"react-native": "0.60.3",
"react-native-config": "^1.3.3",
"react-native-date-picker": "^2.7.3",
"react-native-device-info": "^2.2.2",
"react-native-exception-handler": "^2.10.8",
"react-native-gesture-handler": "^1.4.0",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-linear-gradient": "^2.5.4",
"react-native-modal": "^11.1.0",
"react-native-modal-dropdown": "^0.6.2",
"react-native-picker-select": "^6.3.0",
"react-native-popup-dialog": "^0.18.2",
"react-native-reanimated": "^1.4.0",
"react-native-root-toast": "^3.1.2",
"react-native-screens": "^2.0.0-beta.10",
"react-native-scrollable-tab-view": "^0.10.0",
"react-native-splash-screen": "^3.2.0",
"react-native-sqlite-storage": "^3.3.11",
"react-native-tab-view": "^2.8.0",
"react-native-user-agent": "^1.0.4",
"react-native-user-inactivity": "^1.0.1",
"react-native-uuid": "^1.4.9",
"react-native-wheel-picker-android": "^2.0.5",
"react-navigation": "^3.11.1"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/runtime": "^7.5.5",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.8.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-react-native": "^4.0.1",
"eslint": "^6.1.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"react-native-clean-project": "^3.4.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
As I can see in error log, it's having error related to Native modules.
So I hope your crashlytics module is not properly connected with your
iOS Native Module, that's why it's stucked on splash screen as per
your explanation.
Please cross-check below added URL code with your Podfile code, whether your crashlytic and dependant plugin pods are their or not.
https://rnfirebase.io/crashlytics/usage/installation/ios
And crashlytics plugin depending on the core firebase app as per stated in crashlytics plugin installation guide, so confirm using below URL as well,
https://rnfirebase.io/install-ios
I hope this will resolve your issues.

React Native build failed - "Error: While trying to resolve module `react-native-firebase`"

I am upgrading from RN 0.55.3 to 0.57.0 (manually).
After running react-native run-ios or react-native run-android I'm now getting the error:
error: bundling failed: Error: While trying to resolve module `react-native-firebase`
I already tried re-running react-native link react-native-firebase (per this post) as well as deleting node_modules and re-running yarn and neither worked.
Full error report:
error: bundling failed: Error: While trying to resolve module `react-native-firebase` from file `MyApp/src/screens/StarterPage.js`, the package `MyApp/node_modules/react-native-firebase/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`MyApp/node_modules/react-native-firebase/dist/index.js`. Indeed, none of these files exist:
* `MyApp/node_modules/react-native-firebase/dist/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`
* `MyApp/node_modules/react-native-firebase/dist/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)`
at ResolutionRequest.resolveDependency (MyApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:95:15)
at DependencyGraph.resolveDependency (MyApp/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
at Object.resolve (MyApp/node_modules/metro/src/lib/transformHelpers.js:180:25)
at dependencies.map.result (MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
at Array.map (<anonymous>)
at resolveDependencies (MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
at MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
at Generator.next (<anonymous>)
at step (MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)
at MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:467
BUNDLE [ios, dev] ../../index.js ▓▓▓▓▓▓▓▓▓▓▓░░░░░ 73.4% (796/929)::1 - - [04/Jun/2019:00:27:03 +0000] "GET /index.bundle?platform=ios&dev=true&minify=false HTTP/1.1" 200 - "-" "MyApp/79 CFNetwork/978.0.7 Darwin/18.6.0"
BUNDLE [ios, dev] ../../index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░ 92.7% (904/939)
I checked and all these files are in node_modules/react-native-firebase. For instance, /dist/index.js is:
import firebase from './modules/core/firebase';
export default firebase;
export * from './modules/core/firebase';
/*
* Export App types
*/
My package.json
{
"name": "MyApp",
"version": "2.1.27",
"private": true,
"scripts": {
"clean:android": "./android/gradlew -p android/ clean && git clean -dfX -e *.iml android/build android/app/src",
"bundle:android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
"build:android:release": "yarn clean:android && yarn bundle:android && ./android/gradlew -p android/ assembleRelease",
"run:android:release": "react-native run-android --variant=release",
"run:android:debug": "react-native run-android",
"test": "jest",
"android-linux": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android",
"eslint": "eslint —-ext .js ./src/",
"eslint:fix": "eslint --fix ./src/",
"flow": "flow",
"flow-stop": "flow stop",
"postinstall": "sed -i '' \"s/version.startsWith('iOS')/version.startsWith('com.apple.CoreSimulator.SimRuntime.iOS')/g\" ./node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js"
},
"dependencies": {
"#babel/runtime": "^7.4.5",
"#react-native-community/async-storage": "^1.3.3",
"adm-zip": "^0.4.11",
"axios": "^0.18.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"base-64": "^0.1.0",
"d3-format": "^1.3.0",
"hoist-non-react-statics": "^3.0.1",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"moment-timezone": "^0.5.17",
"piexifjs": "^2.0.0-beta.7",
"plist": "^3.0.1",
"prop-types": "^15.6.2",
"react": "16.5.0",
"react-native": "0.57.0",
"react-native-animatable": "^1.3.0",
"react-native-camera": "^1.6.3",
"react-native-carrier-info": "^1.0.1",
"react-native-circular-progress": "git+https://git#github.com/bartgryszko/react-native-circular-progress.git",
"react-native-confetti": "^0.1.0",
"react-native-contacts": "^2.2.3",
"react-native-country-picker-modal": "^0.5.1",
"react-native-datepicker": "^1.7.2",
"react-native-default-preference": "^1.3.1",
"react-native-device-info": "^0.21.5",
"react-native-dotenv": "^0.2.0",
"react-native-extended-stylesheet": "^0.8.1",
"react-native-fbsdk": "^0.8.0",
"react-native-firebase": "5.2.0",
"react-native-fs": "^2.13.3",
"react-native-image-crop-picker": "^0.24.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-localization": "1.0.9",
"react-native-maps": "^0.22.1",
"react-native-mixpanel": "^1.1.1",
"react-native-modalbox": "^1.4.2",
"react-native-permissions": "^1.1.1",
"react-native-popover-tooltip": "^1.1.4",
"react-native-popup-menu": "^0.14.0",
"react-native-share": "^1.1.3",
"react-native-snap-carousel": "^3.7.5",
"react-native-sound": "^0.10.9",
"react-native-svg": "^9.2.4",
"react-native-svg-charts": "^5.2.0",
"react-native-swiper": "^1.5.13",
"react-native-version-number": "^0.3.4",
"react-native-webview-android-file-upload": "git+https://git#github.com/andreipfeiffer/react-native-webview-android-file-upload.git",
"react-navigation": "^1.5.11",
"xcode": "^1.0.0"
},
"devDependencies": {
"babel-jest": "24.7.1",
"babel-preset-react-native": "5.0.2",
"eslint-config-rallycoding": "^3.2.0",
"flow-bin": "^0.67.1",
"jest": "24.7.1",
"metro-react-native-babel-preset": "0.53.1",
"react-test-renderer": "16.5.0"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
I expect my app to run in the emulator (iOS) or on my phone (Android).
Have you tried resetting the watchman and Metro Bundler caches?
watchman watch-del-all
react-native start --reset-cache

Issue using firebase-admin - dependencies were not found

I am developing an application by nuxtjs. I have installed the Admin SDK for Node.js to validate the user's token in the server side but when I import firebase-admin in the project I have the next issue. I have installed the modules child_process fs net tls but it didn' work.
WARNING Compiled with 4 warnings
20:30:20 warning in ./node_modules/grpc/src/grpc_extension.js
Critical dependency: the request of a dependency is an expression
warning in
./node_modules/grpc/node_modules/node-pre-gyp/lib/pre-binding.js
Critical dependency: the request of a dependency is an expression
warning in
./node_modules/grpc/node_modules/node-pre-gyp/lib/util/versioning.js
Critical dependency: the request of a dependency is an expression
warning in ./node_modules/hash-stream-validation/index.js
Module not found: Error: Can't resolve 'fast-crc32c' in
'C:\Users\ARSENIO\Desktop\Development\nuxt\project4\node_modules\hash-stream-
validation'
ERROR Failed to compile with 38 errors
20:30:20 These dependencies were not found:
child_process in ./node_modules/google-auth-library/build/src/auth/googleauth.js,
./node_modules/grpc/node_modules/detect-libc/lib/detect-libc.js
fs in ./node_modules/#google-cloud/storage/src/file.js, ./node_modules/#google-cloud/storage/src/bucket.js and 34 others
To install them, you can run: npm install --save child_process fs
The package.json file is:
{
"name": "project4",
"version": "1.0.0",
"description": "My gnarly Nuxt.js project",
"author": "Arsenio Aguirre",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-beta",
"chart.js": "^2.7.2",
"child_process": "^1.0.2",
"cross-env": "^5.2.0",
"firebase": "^5.5.3",
"firebase-admin": "^6.0.0",
"flag-icon-css": "^2.9.0",
"font-awesome": "^4.7.0",
"fs": "0.0.1-security",
"js-cookie": "^2.2.0",
"net": "^1.0.2",
"node-sass": "^4.9.3",
"nuxt": "^2.0.0",
"sass-loader": "^6.0.7",
"simple-line-icons": "^2.4.1",
"tls": "0.0.1",
"vue-chartjs": "^3.4.0"
},
"devDependencies": {
"nodemon": "^1.11.0",
"babel-eslint": "^8.2.1",
"eslint": "^5.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-vue": "^4.0.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-prettier": "2.6.2",
"prettier": "1.14.3"
}
}

Resources