Reference error: WebpackJsonp not defined - angularjs

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.

Related

How to separate renderer and main process dependency while using React with electron?

I have React web app which I am trying to interoperate as desktop application. All my React dependencies are bundled by webpack on production so I don't need those node modules to be included in app.asar which unnecessarily increases size of my production build.
Now my problem is that it is blocking me to include main process dependency as I have rule to exclude the node_modules in package.json How can I separate the main process dependency to be included by electron-builder but ignore the render-process dependency. I am new to electron, so any help will be valuable for me.
My package.json looks like this:
"name": "app-name",
"version": "0.16.2",
"private": true,
"main": "public/electron.js",
"repository": "github repo",
"homepage": "./",
"build": {
"appId": "com.appname",
"productName": "productName",
"copyright": "copyright",
"dmg": {
"background": null,
"backgroundColor": "#ffffff",
"window": {
"width": "400",
"height": "300"
},
"contents": [{
"x": 100,
"y": 100
},
{
"x": 300,
"y": 100,
"type": "link",
"path": "/Applications"
}
]
},
"nsis": {
"createDesktopShortcut": "always",
"installerIcon": "./resources/icon.ico"
},
"mac": {
"target": "dmg",
"category": "public.app-category.business",
"icon": "./resources/icon.icns"
},
"win": {
"target": "nsis",
"extraResources": [
"./*.dll",
"!./exclude-me.dll"
]
},
"linux": {
"maintainer": "maintainer",
"target": "deb",
"category": "Utility"
},
"files": [
"./build/**/*",
"!node_modules"
],
"directories": {
"buildResources": "resources"
},
"publish": {
"provider": "github"
}
},
"scripts": {
"generate:meta": "node ./internals/scripts/generate-meta.js",
"start": "REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` craco start",
"electron:dev": "concurrently \"env-cmd -f .env.electron yarn start\" \"wait-on http://localhost:3002 && electron .\"",
"electron:prod": "yarn build:staging && electron-builder",
"electron:release": "electron-builder -p 'onTagOrDraft'",
"postinstall": "electron-builder install-app-deps",
"start:windows": "git rev-parse --short HEAD >sha.txt && set /p REACT_APP_CURRENT_GIT_SHA= < sha.txt && del sha.txt && craco start",
"start:prod": "env-cmd -f .env.production yarn start",
"start:dev": "env-cmd -f .env.staging yarn start",
"build": "yarn generate:meta && REACT_APP_CURRENT_GIT_SHA=`git rev-parse --short HEAD` craco build",
"build:staging": "env-cmd -f .env.staging yarn build",
"build:prod": "env-cmd -f .env.production yarn build",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx --quiet",
"lint-fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
"test": "craco test",
"eject": "craco eject",
"generate": "graphql-codegen --config codegen.yml",
"extract-translations": "i18next",
"analyze": "cross-env REACT_APP_INTERACTIVE_ANALYZE=1 yarn build"
},
"husky": {
"hooks": {
"pre-push": "yarn lint",
"pre-commit": "pretty-quick --staged"
}
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"#ant-design/icons": "^4.6.2",
"#apollo/client": "^3.3.16",
"#hookform/resolvers": "^2.4.0",
"#sentry/browser": "^6.13.3",
"#sentry/tracing": "^6.13.3",
"#stripe/react-stripe-js": "^1.4.1",
"#stripe/stripe-js": "^1.15.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#twilio/voice-sdk": "^2.0.1",
"#types/react-beautiful-dnd": "^13.1.1",
"#types/react-color": "^3.0.5",
"#types/react-highlight-words": "^0.16.3",
"#types/react-responsive": "^8.0.2",
"#welldone-software/why-did-you-render": "^6.1.1",
"antd": "^4.15.4",
"apollo-link-token-refresh": "^0.3.2",
"apollo-upload-client": "^15.0.0",
"apollo3-cache-persist": "^0.9.1",
"craco-less": "^1.18.0",
"date-fns": "^2.16.1",
"dompurify": "^2.2.6",
"electron-is-dev": "^2.0.0",
"electron-updater": "^4.3.9",
"env-cmd": "^10.1.0",
"fernet": "^0.4.0",
"firebase": "^9.1.1",
"graphql": "^15.5.0",
"history": "^5.0.0",
"husky": "^4.3.0",
"i18next": "^19.8.7",
"i18next-browser-languagedetector": "^6.0.1",
"i18next-http-backend": "^1.1.0",
"immer": "^8.0.1",
"jspdf": "^2.3.1",
"jwt-decode": "^3.1.2",
"libphonenumber-js": "^1.9.6",
"linkify-html": "^3.0.2",
"linkifyjs": "^3.0.1",
"lint-staged": "^10.5.3",
"lodash.debounce": "^4.0.8",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
"lodash.omit": "^4.5.0",
"lodash.startswith": "^4.2.1",
"npm-watch": "^0.11.0",
"papaparse": "^5.3.0",
"prettier": "^2.2.1",
"rc-picker": "^2.5.15",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-color": "^2.19.3",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.1",
"react-draggable": "^4.4.3",
"react-flag-kit": "^0.3.1",
"react-h5-audio-player": "^3.6.1",
"react-highlight-words": "^0.17.0",
"react-hook-form": "^7.4.0",
"react-i18next": "^11.8.6",
"react-icons": "^4.1.0",
"react-mic": "^12.4.6",
"react-perfect-scrollbar": "^1.5.8",
"react-phone-input-2": "^2.13.9",
"react-responsive": "^8.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"react-scroll": "^1.8.2",
"react-select": "^4.3.0",
"react-use-intercom": "^1.3.0",
"react-window": "^1.8.6",
"secure-ls": "^1.2.6",
"socket.io-client": "^3.0.4",
"styled-components": "^5.2.3",
"subscriptions-transport-ws": "^0.9.18",
"typescript": "^4.1.2",
"web-vitals": "^0.2.4",
"workbox-background-sync": "^6.3.0",
"workbox-broadcast-update": "^6.3.0",
"workbox-cacheable-response": "^6.3.0",
"workbox-core": "^6.3.0",
"workbox-expiration": "^6.3.0",
"workbox-precaching": "^6.3.0",
"workbox-routing": "^6.3.0",
"workbox-strategies": "^6.3.0",
"xlsx": "^0.17.0",
"yup": "^0.32.5"
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.12.1",
"#craco/craco": "^6.2.0",
"#graphql-codegen/cli": "1.20.1",
"#graphql-codegen/fragment-matcher": "2.0.1",
"#graphql-codegen/introspection": "1.18.1",
"#graphql-codegen/typescript": "^1.20.2",
"#graphql-codegen/typescript-document-nodes": "1.17.9",
"#graphql-codegen/typescript-graphql-files-modules": "^1.18.1",
"#graphql-codegen/typescript-operations": "1.17.14",
"#graphql-codegen/typescript-react-apollo": "2.2.1",
"#types/apollo-upload-client": "^14.1.0",
"#types/dompurify": "^2.2.1",
"#types/emoji-mart": "^3.0.4",
"#types/jest": "^26.0.15",
"#types/lodash.debounce": "^4.0.6",
"#types/lodash.get": "^4.4.6",
"#types/lodash.isempty": "^4.4.6",
"#types/lodash.omit": "^4.5.6",
"#types/lodash.startswith": "^4.2.6",
"#types/node": "^12.0.0",
"#types/papaparse": "^5.2.4",
"#types/react": "^16.9.53",
"#types/react-copy-to-clipboard": "^5.0.0",
"#types/react-dom": "^16.9.8",
"#types/react-mic": "^12.4.2",
"#types/react-router-dom": "^5.1.6",
"#types/react-scroll": "^1.8.2",
"#types/react-select": "^4.0.13",
"#types/react-window": "^1.8.2",
"#types/requestidlecallback": "^0.3.1",
"#types/socket.io-client": "^1.4.34",
"#types/styled-components": "^5.1.4",
"#typescript-eslint/eslint-plugin": "^4.14.1",
"#typescript-eslint/parser": "^4.14.1",
"babel-plugin-import": "^1.13.3",
"compression-webpack-plugin": "6.1.1",
"concurrently": "^6.3.0",
"craco-swc": "^0.1.0",
"cross-env": "^7.0.3",
"electron": "^15.2.0",
"electron-builder": "^22.13.1",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"i18next-parser": "^3.6.0",
"less": "^3.12.2",
"prettier-eslint": "^12.0.0",
"pretty-quick": "^3.1.0",
"simple-progress-webpack-plugin": "^2.0.0",
"wait-on": "^6.0.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpackbar": "^5.0.0-3"
},
"description": "description",
"author": "author"
} ```
If those dependencies are packed with webpack you can safely move them to devDependencies, which aren't included in the node_modules of the final application

React Next js Fails At popperjs module

I have a next js project for a while. For sometime the build is ok, until I clean install the node module from scratch.
Now I got an error when ever try to build.
ModuleNotFoundError: Module not found: Error: Package path ./lib/enums is not exported from package {PROEJCT_PATH}\node_modules#popperjs\core (see exports field in {PROEJCT_PATH}\node_modules#popperjs\core\package.json)
Does anyone know what could be the issue here?
here are my package json
package json main project
{
"name": "my-project",
"version": "0.0.1",
"description": "TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project.",
"main": "server.js",
"scripts": {
"test": "jest",
"test:ci": "jest --ci",
"local": "next dev -p 2001",
"dev": "node server.js",
"build": "npx next telemetry disable && next build",
"start": "NODE_ENV=production node server.js",
"start_local": "node server.js",
"ri": "npm install && npm run dev",
"u-lib": "npm remove vesta-vnext-react-library"
},
"keywords": [],
"author": "Shopify",
"license": "MIT",
"bugs": {
"url": "https://github.com/Shopify/shopify-demo-app-node-react/issues"
},
"homepage": "https://github.com/Shopify/shopify-demo-app-node-react#readme",
"dependencies": {
"-": "0.0.1",
"#azure/identity": "1.3.0",
"#azure/msal-browser": "2.15.0",
"#azure/msal-react": "1.0.0",
"#azure/storage-blob": "^12.5.0",
"#fortawesome/fontawesome-free": "5.15.1",
"#koa/cors": "3.1.0",
"#material-ui/core": "4.11.2",
"#material-ui/data-grid": "4.0.0-alpha.23",
"#material-ui/icons": "4.11.2",
"#material-ui/lab": "4.0.0-alpha.57",
"#react-google-maps/api": "1.13.0",
"D": "1.0.0",
"async-retry": "1.3.1",
"axios": "^0.21.1",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^5.0.1",
"clsx": "1.1.1",
"dotenv": "8.2.0",
"enzyme": "3.11.0",
"filter-objects": "2.1.1",
"form-data": "^4.0.0",
"formidable": "^1.2.2",
"g": "2.0.1",
"hamburger-react": "2.4.0",
"isomorphic-fetch": "3.0.0",
"joi": "17.4.0",
"joi-password-complexity": "5.1.0",
"jquery": "3.6.0",
"js-cookie": "2.2.1",
"koa": "2.13.0",
"koa-router": "10.0.0",
"koa-session": "6.1.0",
"lodash": "4.17.21",
"lodash-es": "4.17.21",
"map": "1.0.1",
"material-table": "1.57.2",
"moment": "2.29.1",
"msal": "1.4.4",
"next": "^11.1.2",
"next-compose-plugins": "^2.2.1",
"next-transpile-modules": "^8.0.0",
"nextjs-cors": "^1.0.5",
"papaparse": "^5.3.1",
"powerbi-client-react": "1.3.0",
"progressbar.js": "1.1.0",
"react": "^17.0.2",
"react-bootstrap": "1.4.0",
"react-circular-progressbar": "2.0.4",
"react-cookie": "4.0.3",
"react-csv": "^2.0.3",
"react-d3-speedometer": "1.0.1",
"react-dom": "^17.0.2",
"react-draggable": "4.4.3",
"react-dropzone": "11.3.2",
"react-helmet": "6.1.0",
"react-hook-form": "6.14.1",
"react-icons": "4.1.0",
"react-idle-timer": "4.5.4",
"react-pro-sidebar": "0.4.4",
"react-select": "4.3.0",
"sass": "1.29.0",
"store-js": "2.0.4",
"tmp": "^0.2.1",
"my-library": "file:my-library-0.5.0.tgz"
},
"devDependencies": {
"#babel/preset-env": "^7.14.2",
"#babel/preset-react": "^7.13.13",
"#testing-library/jest-dom": "5.11.10",
"#testing-library/react": "11.2.6",
"#testing-library/user-event": "13.1.3",
"#types/jquery": "3.5.5",
"#types/lodash": "4.14.168",
"#types/node": "14.14.10",
"#types/react-csv": "^1.1.2",
"#types/react-test-renderer": "17.0.1",
"#typescript-eslint/eslint-plugin": "4.14.0",
"#typescript-eslint/parser": "4.14.0",
"babel-jest": "26.6.3",
"eslint": "5.16.0",
"eslint-plugin-react": "7.21.5",
"identity-obj-proxy": "3.0.0",
"jest": "26.6.3",
"jest-ts-auto-mock": "2.0.0",
"next-page-tester": "0.24.1",
"react-date-range": "^1.1.3",
"react-test-renderer": "17.0.2",
"ts-auto-mock": "3.1.2",
"ts-jest": "26.5.5",
"ttypescript": "1.5.12",
"typescript": "^4.4.2"
},
"directories": {
"test": "test"
}
}
package json my-library
{
"name": "my-library",
"version": "0.5.0",
"description": "A library that has usable components for vNext project",
"main": "dist/index.js",
"module": "dist/index.js",
"private": true,
"dependencies": {
"#azure/storage-blob": "12.5.0",
"#date-io/moment": "1.3.13",
"#fortawesome/fontawesome-svg-core": "1.2.35",
"#fortawesome/free-solid-svg-icons": "5.15.3",
"#fortawesome/react-fontawesome": "0.1.14",
"#material-ui/core": "4.11.2",
"#material-ui/icons": "4.11.2",
"#material-ui/pickers": "3.3.10",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "13.0.0",
"#types/react-phone-number-input": "3.0.7",
"bootstrap": "5.0.1",
"jquery": "3.6.0",
"lodash": "4.17.21",
"moment": "2.29.1",
"papaparse": "5.3.1",
"precss": "4.0.0",
"react-circular-progressbar": "2.0.4",
"react-data-table-component": "6.11.5",
"react-date-range": "1.1.3",
"react-dropzone": "11.3.2",
"react-helmet": "6.1.0",
"react-phone-input": "^1.2.1",
"react-phone-input-2": "^2.14.0",
"react-phone-number-input": "^3.1.25",
"styled-components": "5.0.1"
},
"peerDependencies": {
"#azure/storage-blob": "12.5.0",
"#material-ui/core": "4.11.2",
"#date-io/moment": "1.3.13",
"#material-ui/icons": "4.11.2",
"#rollup/plugin-node-resolve": "13.0.0",
"precss": "4.0.0",
"react-dropzone": "11.3.2",
"moment": "2.29.1",
"react-bootstrap": "1.6.0",
"react-helmet": "6.1.0",
"react-date-range": "1.1.3",
"react-data-table-component": "6.11.5",
"styled-components": "5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"ts-build": "tsc --project ./ --module commonjs",
"b-lib": "rollup -c && npm pack",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/preset-env": "7.14.2",
"#babel/preset-react": "7.13.13",
"#material-ui/lab": "4.0.0-alpha.57",
"#rollup/plugin-commonjs": "19.0.0",
"#rollup/plugin-image": "2.0.6",
"#rollup/plugin-typescript": "8.2.1",
"#storybook/addon-actions": "6.2.9",
"#storybook/addon-essentials": "6.2.9",
"#storybook/addon-links": "6.2.9",
"#storybook/node-logger": "6.2.9",
"#storybook/preset-create-react-app": "3.1.7",
"#storybook/react": "6.2.9",
"#testing-library/jest-dom": "5.11.4",
"#testing-library/react": "11.1.0",
"#testing-library/user-event": "12.1.10",
"#types/jest": "26.0.15",
"#types/jquery": "^3.5.6",
"#types/lodash": "4.14.170",
"#types/node": "12.0.0",
"#types/react": "17.0.0",
"#types/react-dom": "17.0.0",
"autoprefixer": "10.2.6",
"axios": "0.21.1",
"date-fns": "2.0.0-beta.5",
"moment": "2.29.1",
"postcss": "8.3.0",
"postcss-import": "14.0.2",
"react": "17.0.2",
"react-advanced-form": "1.7.2",
"react-advanced-form-addons": "1.3.3",
"react-bootstrap": "1.6.0",
"react-checkbox-tree": "1.6.0",
"react-data-table-component": "6.11.5",
"react-date-range": "1.1.3",
"react-dom": "17.0.2",
"react-helmet": "6.1.0",
"react-scripts": "4.0.3",
"rollup": "2.50.0",
"rollup-plugin-babel": "4.4.0",
"rollup-plugin-import-css": "2.0.1",
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.0",
"rollup-plugin-scss": "2.6.1",
"rollup-plugin-terser": "7.0.2",
"rollup-plugin-typescript2": "0.30.0",
"tsc": "2.0.3",
"tslib": "2.2.0",
"typescript": "4.2.4",
"web-vitals": "1.0.1"
},
"typings": "dist/index.d.ts",
"typescript": {
"definition": "dist/index.d.ts",
"reactDocgen": "none"
},
"repository": {
"type": "git",
"url": "__"
}
}

Setup Jest Debug with a monorepo Create-React-App with TypeScript and VSCode

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
}
]
}

Expo ErrorRecovery unable to resolve

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

React can't be applied by global CSS

I am modifying a forum software at here
After installing "npm install -S react-draft-wysiwyg" on that forum project, I tried to apply global css by putting "import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';" at the top of some React component js file in that forum software.
But it looks like something is blocking global CSS. CSS in that import didn't affect React js file. But I do not know what is blocking global css. My only guess is could be somewhat related to webpack but not sure.
I tried making a new react project by "npx create-react-app" and applied that global css, and it worked there. So I concluded that something is blocking global css in that forum project so that global CSS implementation doesn't work in that forum software only.
Here is package.json that forum software uses:
{
"name": "reforum",
"version": "1.0.0",
"description": "A forum application built with ReactJS, Redux, Express and MongoDB",
"license": "MIT",
"keywords": [
"forum",
"react",
"redux",
"express",
"mongodb"
],
"main": "server.js",
"engines": {
"node": "7.1.0"
},
"scripts": {
"test": "jest",
"start": "better-npm-run start",
"start:dev": "better-npm-run start:dev",
"build": "webpack --config config/webpack.prod.config.js"
},
"betterScripts": {
"start": {
"command": "node server.js",
"env": {
"NODE_ENV": "production",
"PORT": 3030
}
},
"start:dev": {
"command": "node server.js",
"env": {
"NODE_ENV": "development",
"PORT": 8080
}
}
},
"dependencies": {
"better-npm-run": "^0.0.13",
"body-parser": "^1.15.2",
"compression": "^1.6.2",
"connect-flash": "^0.1.1",
"connect-mongo": "^1.3.2",
"cookie-parser": "^1.4.3",
"express": "^4.14.0",
"express-session": "^1.14.2",
"help": "^3.0.2",
"lodash": "^4.17.4",
"mongoose": "^4.7.4",
"morgan": "^1.7.0",
"passport": "^0.3.2",
"passport-github": "^1.1.0",
"passport-local": "^1.0.0"
},
"devDependencies": {
"async": "^2.1.5",
"autoprefixer": "^6.6.1",
"axios": "^0.15.3",
"babel": "^6.5.2",
"babel-core": "^6.20.0",
"babel-eslint": "^7.1.1",
"babel-jest": "^20.0.3",
"babel-loader": "^6.2.9",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"classnames": "^2.2.5",
"css-loader": "^0.26.1",
"draft-js": "^0.10.0",
"eslint": "^3.12.1",
"eslint-plugin-react": "^6.8.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"jest": "^20.0.4",
"moment": "^2.17.1",
"nock": "^9.0.13",
"postcss-loader": "^1.2.2",
"postcss-nesting": "^2.3.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-helmet": "^5.0.3",
"react-hot-loader": "^1.3.1",
"react-onclickoutside": "^5.10.0",
"react-redux": "^5.0.2",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-mock-store": "^1.2.3",
"redux-thunk": "^2.2.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"webpack-dev-middleware": "^1.8.4",
"webpack-hot-middleware": "^2.13.2"
}
}
Can you please tell me what is blocking global CSS implementation?
Thank you very much.
You are using css-loader in webpack. So normal css will be compiled to another name such as
localIdentName: "[local]___[hash:base64:5]"
You can write your css with global such as
:global(.myclass) {
background-color: red;
}
or you can disable module in your webpack config
{
loader: "css-loader",
options: {
modules: false,
}
},

Resources