This error happens when trying to view the app in expo.
Unable to resolve "./ErrorRecovery/ErrorRecovery" from "node_modules/expo/build/ExpoLazy.js"
Failed building JavaScript bundle.
I have expo sdk 36.0.0
expo-cli 3.13.8
Running on macOS 10.15.5
I have already deleted node_modules package-lock.json yarn.lock .expo. Then npm install.
I also cleared cache npm cache clear -f and running with expo start -c
Unable to resolve "./ErrorRecovery/ErrorRecovery" from "node_modules/expo/build/ExpoLazy.js"
Failed building JavaScript bundle.
package.json
{
"scripts": {
"postinstall": "jetify && jetify",
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "sudo react-native start --reset-cache",
"test": "jest"
},
"dependencies": {
"#react-native-community/async-storage": "^1.8.1",
"#react-native-community/blur": "^3.6.0",
"events": "^3.1.0",
"expo": "^36.0.0",
"expo-barcode-scanner": "~8.0.0",
"expo-blur": "~8.0.0",
"expo-font": "~8.0.0",
"expo-camera": "~8.0.0",
"expo-linear-gradient": "~8.0.0",
"expo-location": "~8.0.0",
"expo-permissions": "~8.0.0",
"expo-secure-store": "~8.0.0",
"hermesvm": "^0.1.1",
"http": "0.0.0",
"jwt-decode": "^2.2.0",
"native-base": "^2.13.8",
"node-libs-browser": "^2.2.1",
"node-libs-react-native": "~1.2.0",
"react": "16.9.0",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-camera": "^3.19.0",
"react-native-collapsible": "^1.5.1",
"react-native-credit-card-input": "^0.4.1",
"react-native-crypto-js": "^1.0.0",
"react-native-elements": "^1.2.7",
"react-native-extra-dimensions-android": "^1.2.5",
"react-native-gesture-handler": "^1.3.0",
"react-native-global-props": "^1.1.5",
"react-native-keyboard-aware-scroll-view": "^0.9.1",
"react-native-keyboard-spacer": "^0.4.1",
"react-native-linear-gradient": "^2.5.6",
"react-native-maps": "~0.26.1",
"react-native-masked-text": "^1.13.0",
"react-native-modal": "^11.5.4",
"react-native-reanimated": "~1.4.0",
"react-native-router-flux": "^4.2.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-scroll-bottom-sheet": "^0.6.1",
"react-native-simple-radio-button": "^2.7.4",
"react-native-swipe-gestures": "^1.0.5",
"react-native-swipe-list-view": "^2.3.0",
"react-native-swiper": "^1.6.0-rc.3",
"react-native-unimodules": "~0.6.0",
"react-native-vector-icons": "^6.6.0",
"stripe-client": "^1.1.5"
},
"devDependencies": {
"#babel/core": "^7.8.7",
"#types/react": "^16.9.23",
"#types/react-native": "^0.57.65",
"babel-jest": "24.9.0",
"babel-preset-expo": "^7.1.0",
"jest": "24.9.0",
"jest-expo": "^36.0.0",
"jetifier": "^1.6.5",
"metro-react-native-babel-preset": "0.56.0",
"react-test-renderer": "16.9.0",
"reactotron-react-native": "^4.0.3",
"typescript": "^3.8.3"
},
"jest": {
"preset": "react-native"
},
"private": true
}
app.json
{
"name": "MyAmazingApp",
"displayName": "MyAmazingApp",
"expo": {
"scheme": "MyAmazingApp-app",
"name": "MyAmazingApp",
"icon": "Design/MyAmazingApp_app_icon.png",
"version": "1.0.0",
"slug": "MyAmazingApp",
"sdkVersion":"36.0.0",
"orientation": "portrait",
"androidStatusBar": {
"backgroundColor": "#FFFFFF",
"translucent": false
},
"ios": {
"bundleIdentifier": "com.me.MyAmazingApp",
"buildNumber": "0.0.4",
"icon": "Design/MyAmazingApp_app_icon.png"
},
"android": {
"package": "com. MyAmazingApp",
"versionCode": 1,
"config": {
"googleSignIn": {
"apiKey": "”
},
"googleMaps": {
"apiKey": ""
}
},
"googleServicesFile": "./google-services.json",
"intentFilters": [
{
"action": "VIEW",
"data": [
{
"scheme": "https",
"host": "*.MyAmazingApp.com",
"pathPrefix": "/restaurant/handleBarcode"
}
],
"category": [
"BROWSABLE",
"DEFAULT"
]
}
]
},
"splash": {
"image": "Design/MyAmazingApp_app_splash.png",
"backgroundColor": "#FFFFFF",
"resizeMode": "cover"
},
"privacy": "unlisted",
"entryPoint": "node_modules/expo/AppEntry.js",
"platforms": [
"ios",
"android",
],
"notification": {
"icon": "./Design/notification_logo.png",
"color": "#0CD2C5",
"androidMode": "default",
"iosDisplayInForeground": true
}
}
}
i’m fairly confused about what i am looking at here - this does not appear an expo managed project or an expokit project, but you are running expo start still.. it may be worth reverting to your last known working commit and going from there
Related
I would like to use react native google ad mob but I have this error that bothers me a lot:
Error: Requiring module "node_modules\react-native-google-mobile-ads\index.ts", which threw an exception: Invariant violation: Your JavaScript code tried to access a native module that does not exist.
I tried to change the versions of react native and react that was installed, it did not work.
here is my package.json :
{
"name": "front",
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"#expo/vector-icons": "^13.0.0",
"#react-navigation/drawer": "^6.5.7",
"#react-navigation/native": "^6.1.2",
"#react-navigation/native-stack": "^6.9.8",
"#types/react-native": "^0.71.1",
"axios": "^1.2.2",
"expo": "~47.0.12",
"expo-build-properties": "~0.4.1",
"expo-dev-client": "~2.0.1",
"expo-secure-store": "~12.0.0",
"expo-splash-screen": "~0.17.5",
"expo-status-bar": "^1.4.2",
"react": "^17.0.2",
"react-native": "^0.68.2",
"react-native-animated-loader": "^1.0.0",
"react-native-gesture-handler": "~2.8.0",
"react-native-google-mobile-ads": "7.0.1",
"react-native-infinite-scroll-view": "^0.4.5",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-reanimated": "~2.12.0",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"react-native-toast-message": "^2.1.5",
"react-navigation": "^4.4.4",
"react-router": "^6.6.2"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"react-native-secure-store": "^1.0.3"
},
"private": true
}
and here is my app.json :
{
"expo": {
"name": "Front",
"slug": "Front",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "y"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"package": "com.knowz.front"
},
"web": {
"favicon": "./assets/favicon.png"
},
"extra": {
"eas": {
"projectId": "046da7b1-068c-4845-a69c-fe0a92be1b15"
}
},
"owner": "knowz"
},
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-2973173763441523~2444055698",
"ios_app_id": "ca-app-pub-2973173763441523~5693853805"
}
}
When I use metro bundle to run and test the app it works fine. but when I build android apk it not working it restarting again & again
code
app.json
{
"expo": {
"name": "hawala",
"description": "hawal App",
"slug": "rikshawala",
"privacy": "public",
"platforms": [
"ios",
"android"
],
"android": {
"package": "com.rafi.bbb",
"versionCode": 1
}
},
"notification": {
"icon": "./assets/images/logo96x96.png"
},
"version": "1.0",
"orientation": "portrait",
"icon": "./assets/images/logo1024x1024.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "cover",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"packagerOpts": {
"config": "metro.config.js"
},
"ios": {
"supportsTablet": true,
"usesAppleSignIn": true,
"bundleIdentifier": "com.rafi.bbb",
"infoPlist": {
"NSLocationAlwaysUsageDescription": "This app uses the always location access in the background for improved pickups and dropoffs, customer support and safety purpose.",
"NSLocationAlwaysAndWhenInUseUsageDescription": "This app uses the always location access in the background for improved pickups and dropoffs, customer support and safety purpose.",
"NSLocationWhenInUseUsageDescription": "This app uses the location to find the Cabs near you.",
"NSCameraUsageDescription": "This app uses the camera to take your profile picture.",
"NSPhotoLibraryUsageDescription": "This app uses Photo Library for uploading your profile picture.",
"ITSAppUsesNonExemptEncryption":false,
"UIBackgroundModes": [
"audio",
"location",
"fetch"
]
},
"config": {
"googleMapsApiKey": "aSyA_u1jnW9UF_76hxCrNFut0"
},
"googleServicesFile": "./GoogleService-Info.plist",
"buildNumber": "1.0"
},
"android": {
"package": "com.rafi.bbb",
"versionCode": 1,
"permissions": [
"CAMERA",
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE",
"ACCESS_FINE_LOCATION",
"ACCESS_COARSE_LOCATION",
"CAMERA_ROLL",
"FOREGROUND_SERVICE",
"ACCESS_BACKGROUND_LOCATION"
],
"googleServicesFile": "./google-services.json",
"config": {
"googleMaps": {
"apiKey": "IzaSyA_u1jnWUFxjyYG_76hxuC6jFut0"
}
},
"useNextNotificationsApi": true
},
"facebookScheme": "fb3937477975",
"facebookAppId": "4337477975",
"facebookDisplayName": "Rawala"
}
package.json
{
"name": "mobile-app",
"version": "2.5.0",
"main": "__generated__/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"clear": "expo r -c",
"eject": "expo eject",
"update": "expo update"
},
"dependencies": {
"#firebase/app-types": "^0.6.1",
"#mapbox/polyline": "^1.1.1",
"#react-native-async-storage/async-storage": "^1.13.2",
"#react-native-community/datetimepicker": "3.0.4",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/native": "^5.7.5",
"assets": "1.0.0",
"common": "1.0.0",
"config": "1.0.0",
"expo": "^40.0.0",
"expo-apple-authentication": "~2.2.2",
"expo-asset": "~8.2.1",
"expo-av": "~8.7.0",
"expo-constants": "~9.3.3",
"expo-crypto": "~8.4.0",
"expo-facebook": "~9.1.0",
"expo-firebase-recaptcha": "^1.1.0",
"expo-font": "~8.4.0",
"expo-image-picker": "~9.2.0",
"expo-location": "~10.0.0",
"expo-notifications": "~0.8.2",
"expo-permissions": "~10.0.0",
"expo-task-manager": "~8.6.0",
"expo-updates": "~0.4.1",
"firebase": "7.9.0",
"haversine": "1.1.1",
"react": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-actions-sheet": "^0.3.5",
"react-native-dash": "0.0.11",
"react-native-elements": "^2.3.2",
"react-native-gesture-handler": "~1.8.0",
"react-native-google-maps-directions": "^2.1.1",
"react-native-google-places-autocomplete": "^1.8.0",
"react-native-maps": "^0.27.1",
"react-native-modal-datetime-picker": "^8.7.1",
"react-native-picker-select": "^7.0.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.0",
"react-native-segmented-control-tab": "^3.4.1",
"react-native-simple-radio-button": "^2.7.4",
"react-native-star-rating": "^1.1.0",
"react-native-vector-icons": "^7.0.0",
"react-native-webview": "11.0.0",
"react-navigation": "^4.3.7",
"react-navigation-drawer": "^2.4.11",
"react-navigation-stack": "^2.3.11",
"react-redux": "^7.2.0"
},
"devDependencies": {
"#babel/core": "~7.9.0",
"babel-preset-expo": "8.3.0",
"expo-yarn-workspaces": "^1.2.1"
}
}
I used this command to run expo app in production mode.
expo start --no-dev --minify.
you will got exact error
and I get this error
uncaught Error :java.lang.Exception:Faild to load all assetsenter image description here
I've been hitting my head for about 7 hours now. But this is paramount as I can't afford not to develop tests within the app any further (Currently stuck debugging an Apollo React test)
I'm currently under a monorepo with a shared repository and 2 create-react app. I'm using CRACO (Create-React-App Configure Override), and I can't seem to execute a debugging statement using VScode. I've faced numerous issues: malformed jest commands, transformation problems (css modules not being parsed correctly), hung-up vscode, not found scripts, and many more. I'm stuck and I don't know what else to do.
The monorepo is setup using plain yarn workspaces (no Lerna nor bolt or pmp). It has a shared component (with storybook) and 2 create-react apps (app and home respectively). CRACO is used to apply the babel-loader to the shared component repo.
I'm able to run the tests with yarn: cross-env SKIP_PREFLIGHT_CHECK=true CI=true craco test --env=jest-environment-jsdom-sixteen --maxWorkers=4 --transformIgnorePatterns \"node_modules/(?!date-fns)/\", but I haven't been able to either use the traditional debugging or using The Jest Runner vscode extension which is what I want to run specific tests (currently only in the app folder).
Here's my monorepo structure
These are some of the methods that I've tried:
Here are some of the links that I've visited and tried.
https://www.basefactor.com/using-visual-studio-code-to-debug-jest-based-unit-tests
https://github.com/firsttris/vscode-jest-runner
https://github.com/jest-community/vscode-jest/issues/129
https://github.com/jest-community/vscode-jest/issues/244
https://dev.to/shnydercom/monorepos-lerna-typescript-cra-and-storybook-combined-4hli
And many, many more.
I've also tried exporting the jest config using craco and pointing it to the path... nada.
Main (root) package.json
{
"name": "schon",
"version": "0.1.0",
"private": true,
"reactSnap": {
"inlineCss": true
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"dependencies": {
"#apollo/client": "^3.3.4",
"#auth0/auth0-react": "^1.2.0",
"#date-io/date-fns": "1.3.13",
"#material-ui/core": "4.11.1",
"#material-ui/icons": "4.9.1",
"#material-ui/lab": "^4.0.0-alpha.55",
"#material-ui/pickers": "^3.2.10",
"#material-ui/system": "4.9.14",
"#nivo/calendar": "0.67.0",
"#nivo/core": "0.67.0",
"#nivo/line": "0.67.0",
"#nivo/tooltip": "^0.67.0",
"#reach/router": "^1.3.3",
"#snowpack/app-scripts-react": "^2.0.0",
"auth0-js": "^9.13.2",
"aws-appsync-auth-link": "^2.0.3",
"aws-sdk": "^2.714.0",
"clsx": "^1.1.1",
"date-fns": "^2.14.0",
"dotenv": "^8.2.0",
"exceljs": "^4.2.0",
"file-saver": "^2.0.2",
"formik": "^2.1.4",
"formik-persist": "^1.1.0",
"graphql": "^15.0.0",
"immer": "^6.0.9",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.15",
"logrocket": "^1.0.7",
"material-table": "^1.59.0",
"msw": "^0.24.2",
"randomcolor": "^0.6.2",
"react": "17.0.1",
"react-apollo": "^3.1.5",
"react-dom": "17.0.1",
"react-elastic-carousel": "^0.6.4",
"react-error-boundary": "^2.2.1",
"react-hook-form": "^6.3.0",
"react-loading-skeleton": "^2.1.1",
"react-prerendered-component": "^1.2.4",
"react-scripts": "4.0.1",
"snowpack": "^3.0.11",
"styled-components": "^5.2.1",
"suneditor": "^2.35.0",
"suneditor-react": "^2.13.1",
"sw-precache": "^5.2.1",
"tiny-slider-react": "^0.4.0",
"uglifyjs": "^2.4.11",
"uuid": "^8.2.0",
"validate-password": "^1.0.4",
"xlsx": "^0.16.1",
"yup": "^0.29.1"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/helper-create-regexp-features-plugin": "^7.10.4",
"#craco/craco": "6.1.1",
"#react-theming/storybook-addon": "^1.0.3",
"#storybook/addon-actions": "^6.1.19",
"#storybook/addon-docs": "^6.1.19",
"#storybook/addon-essentials": "^6.1.19",
"#storybook/addon-knobs": "^6.1.19",
"#storybook/addon-links": "^6.1.19",
"#storybook/addon-storysource": "^6.1.19",
"#storybook/node-logger": "^6.1.19",
"#storybook/preset-create-react-app": "^3.1.6",
"#storybook/react": "^6.1.19",
"#testing-library/dom": "^7.29.0",
"#testing-library/jest-dom": "^5.11.1",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"#types/auth0-js": "^9.13.1",
"#types/file-saver": "^2.0.1",
"#types/jest": "^26.0.16",
"#types/linkifyjs": "^2.1.3",
"#types/lodash": "^4.14.154",
"#types/memoize-one": "^5.1.2",
"#types/node": "^14.0.6",
"#types/randomcolor": "^0.5.5",
"#types/reach__router": "^1.3.5",
"#types/react": "17.0.0",
"#types/react-dom": "17.0.0",
"#types/tiny-slider-react": "^0.3.2",
"#types/uuid": "^8.0.0",
"#types/yup": "^0.29.1",
"#typescript-eslint/eslint-plugin": "^4.9.0",
"#typescript-eslint/parser": "^4.9.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"bolt": "^0.24.5",
"cross-env": "^7.0.2",
"dynamic-cdn-webpack-plugin": "^5.0.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^6.15.0",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-plugin-prettier": "^3.2.0",
"eslint-plugin-react": "^7.21.5",
"gulp": "^4.0.2",
"gulp-json-editor": "^2.5.4",
"gulp-replace": "^1.0.0",
"html-webpack-plugin": "^4.5.0",
"husky": "^4.3.0",
"jest-axe": "^3.4.0",
"jest-canvas-mock": "^2.3.0",
"jest-dom": "^4.0.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"lint-staged": "^10.5.2",
"microbundle": "^0.12.3",
"prettier": "2.0.5",
"react-is": "^16.13.1",
"react-snap": "^1.23.0",
"source-map-explorer": "^2.4.2",
"storybook-addon-material-ui": "^0.9.0-alpha.24",
"ts-jest": "^26.5.2",
"typescript": "4.1.2",
"uglify": "^0.1.5",
"webpack-cdn-plugin": "^3.3.1"
},
"bolt": {
"workspaces": [
"./app",
"./home",
"./components"
]
},
"workspaces": [
"./app",
"./home",
"./components"
]
}
app package.json:
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"circular-deps": "ts-node ccd.ts",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start-snowpack-not-working": "snowpack dev --config snowpack.config.js",
"start": "craco start --host 0.0.0.0",
"build": "cross-env SKIP_PREFLIGHT_CHECK=true NODE_OPTIONS=--max_old_space_size=4096 craco build && yarn run build-snap && yarn run enable-sw",
"build-snap": "react-snap && npm run generate-sw",
"enable-sw": "gulp snap-off",
"format": "prettier --write src/**/*.ts{,x}",
"lint": "eslint --ext .ts --ext .tsx src ",
"test:vscode": "cross-env SKIP_PREFLIGHT_CHECK=true craco --inspect-brk test",
"test": "cross-env SKIP_PREFLIGHT_CHECK=true CI=true craco test --env=jest-environment-jsdom-sixteen --maxWorkers=4 --transformIgnorePatterns \"node_modules/(?!date-fns)/\"",
"test:watch": "cross-env SKIP_PREFLIGHT_CHECK=true CI=true craco test --env=jest-environment-jsdom-sixteen --maxWorkers=4 --transformIgnorePatterns \"node_modules/(?!date-fns)/\" --watch",
"test:debug": "cross-env SKIP_PREFLIGHT_CHECK=true CI=true craco test --inspect-brk test --runInBand --no-cache --env=jest-environment-jsdom-sixteen --maxWorkers=4 --transformIgnorePatterns \"node_modules/(?!date-fns)/\"",
"eject": "react-scripts eject",
"generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js"
},
"reactSnap": {
"inlineCss": true,
"puppeteerArgs": [
"--no-sandbox",
"--disable-setuid-sandbox"
]
},
"cracoConfig": "./craco.config.js",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"dependencies": {
"#apollo/client": "^3.3.4",
"#auth0/auth0-react": "^1.2.0",
"#date-io/date-fns": "1.3.13",
"#material-ui/core": "4.11.1",
"#material-ui/icons": "4.9.1",
"#material-ui/lab": "^4.0.0-alpha.55",
"#material-ui/pickers": "^3.2.10",
"#material-ui/system": "4.9.14",
"#nivo/calendar": "0.67.0",
"#nivo/core": "0.67.0",
"#nivo/line": "0.67.0",
"#reach/router": "^1.3.3",
"#testing-library/jest-dom": "^5.11.1",
"aws-appsync-auth-link": "^2.0.3",
"aws-sdk": "^2.714.0",
"clsx": "^1.1.1",
"components": "*",
"date-fns": "^2.14.0",
"exceljs": "^3.9.0",
"file-saver": "^2.0.2",
"formik": "^2.1.4",
"formik-persist": "^1.1.0",
"graphql": "^15.0.0",
"immer": "^6.0.9",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.15",
"logrocket": "^1.0.7",
"material-table": "^1.59.0",
"msw": "^0.24.2",
"randomcolor": "^0.6.2",
"react": "17.0.1",
"react-apollo": "^3.1.5",
"react-dom": "17.0.1",
"react-elastic-carousel": "^0.6.4",
"react-error-boundary": "^2.2.1",
"react-loading-skeleton": "^2.1.1",
"react-prerendered-component": "^1.2.4",
"react-scripts": "4.0.1",
"source-map-explorer": "^2.4.2",
"styled-components": "^5.2.1",
"suneditor-react": "^2.13.1",
"tiny-slider-react": "^0.4.0",
"uuid": "^8.2.0",
"validate-password": "^1.0.4",
"xlsx": "^0.16.1",
"yup": "^0.29.1"
},
"devDependencies": {
"uglify-js": "3.12.8",
"#craco/craco": "6.1.1",
"#testing-library/dom": "^7.29.0",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"#types/auth0-js": "^9.13.1",
"#types/file-saver": "^2.0.1",
"#types/jest": "^26.0.16",
"#types/linkifyjs": "^2.1.3",
"#types/lodash": "^4.14.154",
"#types/node": "^14.0.6",
"#types/randomcolor": "^0.5.5",
"#types/reach__router": "^1.3.5",
"#types/react": "17.0.0",
"#types/react-dom": "17.0.0",
"#types/tiny-slider-react": "^0.3.2",
"#types/uuid": "^8.0.0",
"#types/yup": "^0.29.1",
"#typescript-eslint/eslint-plugin": "^4.9.0",
"#typescript-eslint/parser": "^4.9.0",
"cross-env": "^7.0.2",
"dynamic-cdn-webpack-plugin": "^5.0.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^6.15.0",
"eslint-import-resolver-typescript": "^2.3.0",
"eslint-plugin-prettier": "^3.2.0",
"eslint-plugin-react": "^7.21.5",
"gulp": "^4.0.2",
"gulp-json-editor": "^2.5.4",
"gulp-replace": "^1.0.0",
"html-webpack-plugin": "^4.5.0",
"husky": "^4.3.0",
"jest-axe": "^3.4.0",
"jest-canvas-mock": "^2.3.0",
"jest-dom": "^4.0.0",
"jest-environment-jsdom-sixteen": "^1.0.3",
"lint-staged": "^10.5.2",
"prettier": "2.0.5",
"react-snap": "^1.23.0",
"sw-precache": "^5.2.1",
"typescript": "4.1.2",
"webpack-cdn-plugin": "^3.3.1"
},
"resolutions": {
"apollo-client": "2.6.4"
}
}
The /app/craco.config.js file:
const path = require('path');
/**
* Allows us to edit create-react-app configuration
* without ejecting.
*
*
*/
const { getLoader, loaderByName } = require('#craco/craco');
const absolutePath = path.join(__dirname, '../components');
const schonComponents = path.join(
__dirname,
'./node_modules/#schon/components',
);
module.exports = {
webpack: {
configure: (webpackConfig, { env, paths }) => {
// https://medium.com/frontend-digest/using-create-react-app-in-a-monorepo-a4e6f25be7aa
const { isFound, match } = getLoader(
webpackConfig,
loaderByName('babel-loader'),
);
if (isFound) {
const include = Array.isArray(match.loader.include)
? match.loader.include
: [match.loader.include];
match.loader.include = include.concat(absolutePath, schonComponents);
}
return {
...webpackConfig,
optimization: {
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/,
)[1];
// npm package names are URL-safe, but some servers don't like # symbols
return `npm.${packageName.replace('#', '')}`;
},
},
},
},
},
};
},
},
};
And some of the vscode test debugging configs:
{
"version": "0.2.0",
"configurations": [
// {
// "name": "Debug CRA Tests App",
// "type": "node",
// "request": "launch",
// "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/yarn",
// "args": ["workspace app test:debug"],
// "env": {
// "SKIP_PREFLIGHT_CHECK": "true"
// },
// "cwd": "${workspaceRoot}",
// "protocol": "inspector",
// "console": "integratedTerminal",
// "internalConsoleOptions": "neverOpen"
// },
{
"type": "node",
"name": "vscode-jest-tests",
"request": "launch",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"workspace",
"app",
"test:vscode",
"--runInBand",
"--env=jest-environment-jsdom-sixteen",
"--transformIgnorePatterns \"node_modules/(?!date-fns)/\""
],
"args": [
// "--runInBand",
// "--fileDirname", // ADDING THE CURRENT FILENAME DIR FOR THE SCRIPT
// "${fileDirname}"
],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true
// "program": "${workspaceFolder}/tools/vscode-jest-tests/index.js" // THE SCRIPT
},
// {
// "name": "Debug CRA Tests",
// "type": "node",
// "request": "launch",
// "runtimeExecutable": "${workspaceRoot}/app/node_modules/.bin/craco",
// "runtimeArgs": [
// "test",
// "--config ${workspaceRoot}\\app\\craco.config.js",
// // "--runInBand",
// // "--no-cache",
// // "--env=jsdom",
// "--transformIgnorePatterns \"node_modules/(?!date-fns)/\"",
// "-t"
// ],
// "env": {
// "SKIP_PREFLIGHT_CHECK": "true"
// },
// "cwd": "${workspaceRoot}/app",
// "protocol": "inspector",
// "console": "integratedTerminal",
// "internalConsoleOptions": "neverOpen"
// }
{
"name": "Debug CRA Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/app/node_modules/.bin/react-scripts",
"args": [
"test",
"--runInBand",
"--no-cache",
"--watchAll=false",
"--config=jest.config.js"
],
"env": {
"CI": "true",
"SKIP_PREFLIGHT_CHECK": "true"
},
"cwd": "${workspaceRoot}/app",
"protocol": "inspector",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true
}
]
}
{
"name": "ClientApp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~7.1.0",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/http": "~7.1.0",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"#ng-bootstrap/ng-bootstrap": "^4.0.0",
"angular-font-awesome": "^3.1.2",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "2.2.3",
"popper.js": "^1.14.5",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26",
"angular": "1.5.5",
"angular-animate": "1.5.5",
"angular-aria": "1.5.7",
"angular-cookies": "1.5.5",
"angular-mocks": "1.5.5",
"angular-sanitize": "1.5.5",
"angular-scroll": "1.0.2",
"angular-ui-bootstrap": "1.3.3",
"angular-ui-grid": "4.0.4",
"angular-ui-router": "1.0.3",
"animate": "1.0.0",
"animate.css": "3.5.2",
"jquery-ui": "1.12.1",
"jquery.inputmask": "3.3.4",
"lodash": "4.17.11",
"ionicons": "2.0.1",
"moment": "2.13.0",
"ng-mask": "3.1.1",
"spin.js": "2.3.2",
"stacktrace-js": "2.0.0",
"toastr": "2.1.2",
"waypoints": "4.0.1",
"#angular/upgrade": "7.1.1",
"angular2-template-loader": "0.6.2",
"#ngrx/effects": "^6.0.1",
"#ngrx/store": "^6.0.1",
"#ngrx/store-devtools": "^6.0.1",
"ngx-page-scroll": "5.0.1",
"ngx-toastr": "9.1.1",
"#aspnet/signalr": "1.1.0"
},
"devDependencies": {
"#angular-devkit/build-angular": "0.11.0",
"#angular/cli": "~7.1.0",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/angular": "1.6.51",
"#types/core-js": "2.5.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "10.12.11",
"codelyzer": "~4.5.0",
"css-loader": "0.8.0",
"file-loader": "2.0.0",
"imports-loader": "0.8.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"style-loader": "0.8.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6",
"url-loader": "1.1.2",
"webpack-cli": "^3.1.2"
}
}
I had an app which was in Angular JS 1.5, Now we decided to migrate it. As part of the initial analysis, I was doing a simple POC with just 10-15 components which don't have any complex business logic. I did copy a couple of styles from the previous app and that's about it. With just these 15 components when I build the new app with
ng build --prod --vendor-chunk --sourceMap=false --
I realized Angular 7 app has a very high heap size in comparison to our existing Angular JS based application. The major difference comes out from string objects which is very large in Angular 7, I just want to understand is this normal for Angular 7 or am I missing here anything.
Also with --aot option, the heap size is even more. We do have a couple of requirements like open in a new window (which again loads all app in new chrome tab with a different route). I am afraid if the user will open 3 or more tabs memory will reach around a Gb.
Is there any way we can minimize the run time heap memory especially these strings? I am attaching images from Chrome Dev Tools and my angular.json file here.
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ClientApp": {
"root": "ClientApp",
"sourceRoot": "ClientApp",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot/clientapp/dist",
"index": "ClientApp/index.html",
"main": "ClientApp/main.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.app.json",
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets",
{
"glob": "**/*",
"input": "Content",
"ignore": [ "*.js", "*.css" ],
"output": "Content/"
},
],
"styles": [
"ClientApp/styles.css",
"Content/themes/base/jquery-ui.min.css",
"Content/dmsglobalstyles.css",
"Content/styles-extension.css",
"Content/responsive-styles.css"
],
"scripts": [
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "ClientApp/environments/environment.ts",
"with": "ClientApp/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": false,
"namedChunks": true,
"aot": false,
"extractLicenses": true,
"vendorChunk": true,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ClientApp:build"
},
"configurations": {
"production": {
"browserTarget": "ClientApp:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ClientApp:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "ClientApp/test.ts",
"polyfills": "ClientApp/polyfills.ts",
"tsConfig": "ClientApp/tsconfig.spec.json",
"karmaConfig": "ClientApp/karma.conf.js",
"styles": [
"ClientApp/styles.css"
],
"scripts": [],
"assets": [
"ClientApp/favicon.ico",
"ClientApp/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"ClientApp/tsconfig.app.json",
"ClientApp/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ClientApp-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ClientApp:serve"
},
"configurations": {
"production": {
"devServerTarget": "ClientApp:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ClientApp"
}
Dev Build Bundle
Converted my existing Angular 2 project into electron base cross platform than I installed electron-forge start development tools for development to simple easy way to package.
A command to launch app : electron-forge start
Unlikely returned an reference error "WebpackJsonp not defined" in error popup.
I found one of Stackoverflow answered to put your vendor.js before main.js but unfortunately it's not work in my case.
Package.json
{
"name": "myApp",
"version": "0.0.0",
"license": "MIT",
"main": "dist/main.bundle.js",
"scripts": {
"ng": "ng",
"start": "electron-forge start",
"build": "ng build --base-href $npm_package_config_baseurl",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"package": "electron-forge package",
"make": "electron-forge make"
},
"private": true,
"dependencies": {
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"#types/lodash": "^4.14.62",
"angular2-uuid": "^1.1.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"dotenv": "^4.0.0",
"electron-compile": "^6.4.0",
"lodash": "^4.17.4",
"rxjs": "^5.1.0",
"socket.io": "^1.7.3",
"socket.io-client": "^1.7.3",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "1.0.0",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"codelyzer": "~2.0.0",
"electron-prebuilt-compile": "1.6.5",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
},
"config": {
"forge": {
"make_targets": {
"win32": [
"squirrel"
],
"darwin": [
"zip"
],
"linux": [
"deb",
"rpm"
]
},
"electronPackagerConfig": {},
"electronWinstallerConfig": {
"name": ""
},
"electronInstallerDebian": {},
"electronInstallerRedhat": {},
"github_repository": {
"owner": "",
"name": ""
},
"windowsStoreConfig": {
"packageName": ""
}
}
}
}
Anyone face this issue before ? What would be a possible case of this error ?
Your help would highly appreciate . Thanks in advance.