ESLint configuration with react-scripts not working - reactjs

I want to configure eslint as a precommit hook and my project is made using create-react-app. I have the following configuration with me currently. But with the following Lint staged is not running before commits. Also, I cannot install any other version of ESLint as react-scripts requires eslint with version 5.6.0 and it throws an error if I try to manually install some other version of it. What could be the issue here?
{
"name": "poc",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"babel": "^6.23.0",
"babel-core": "^6.9.1",
"babel-env": "^2.4.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.9.0",
"file-saver": "^2.0.2",
"identity-obj-proxy": "^3.0.0",
"jest-css-modules": "^2.0.0",
"joi": "^14.3.1",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"material-ui": "0.20.1",
"node-sass": "^4.14.1",
"randomstring": "^1.1.5",
"react": "^16.5.2",
"react-appinsights": "^2.0.2",
"react-dom": "^16.5.2",
"react-drag-listview": "^0.1.4",
"react-loader-spinner": "^2.3.0",
"react-minimal-pie-chart": "^8.0.1",
"react-picky": "^4.4.5",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"react-select": "^3.0.4",
"xlsx": "^0.15.1"
},
"scripts": {
"start": "./node_modules/react-app-rewired/bin/index.js start",
"dev": "./node_modules/react-app-rewired/bin/index.js start",
"sbx": "./node_modules/react-app-rewired/bin/index.js start",
"stage": "./node_modules/react-app-rewired/bin/index.js start",
"prod": "./node_modules/react-app-rewired/bin/index.js start",
"build": "./node_modules/react-app-rewired/bin/index.js build",
"test": "jest",
"eject": "react-scripts eject",
"lint-staged": "lint-staged",
"lint": "react-scripts run lint"
},
"eslintConfig": {
"extends": [
"react-app",
"airbnb",
"prettier"
],
"rules": {
"semi": [
"error",
"always"
],
"indent": 2,
"no-console": "error",
"no-var": "error",
"import/prefer-default-export": "off"
},
"overrides": [
{
"files": [
"**/*.test.js",
"**/*.test.jsx"
],
"env": {
"jest": true
}
}
]
},
"husky": {
"hooks": {
"pre-commit": "echo aayushi && lint-staged"
}
},
"lint-staged": {
"*.{js,ts,tsx}": [
"prettier --write",
"lint"
],
"*.{json,md,html}": [
"prettier --write"
]
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.4",
"#babel/plugin-transform-block-scoped-functions": "^7.2.0",
"#babel/plugin-transform-block-scoping": "^7.4.4",
"#babel/plugin-transform-classes": "^7.4.4",
"#babel/plugin-transform-computed-properties": "^7.2.0",
"#babel/plugin-transform-destructuring": "^7.4.4",
"#babel/plugin-transform-duplicate-keys": "^7.2.0",
"#babel/plugin-transform-for-of": "^7.4.4",
"#babel/plugin-transform-function-name": "^7.4.4",
"#babel/plugin-transform-instanceof": "^7.2.0",
"#babel/plugin-transform-literals": "^7.2.0",
"#babel/plugin-transform-new-target": "^7.4.4",
"#babel/plugin-transform-object-super": "^7.2.0",
"#babel/plugin-transform-parameters": "^7.4.4",
"#babel/plugin-transform-react-jsx-self": "^7.10.1",
"#babel/plugin-transform-react-jsx-source": "^7.10.1",
"#babel/plugin-transform-shorthand-properties": "^7.2.0",
"#babel/plugin-transform-spread": "^7.2.2",
"#babel/plugin-transform-sticky-regex": "^7.2.0",
"#babel/plugin-transform-template-literals": "^7.4.4",
"#babel/plugin-transform-typeof-symbol": "^7.2.0",
"#babel/plugin-transform-unicode-regex": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"applicationinsights": "^1.0.8",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"cookie-parser": "^1.4.3",
"ejs": "^2.6.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.13.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"express-session": "^1.15.6",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"husky": "^4.3.0",
"jest": "^23.6.0",
"jest-transform-css": "^2.0.0",
"lint-staged": "^10.5.1",
"passport": "^0.4.0",
"passport-saml": "^1.0.0",
"powerbi-report-component": "^1.1.3",
"prettier": "^2.2.0",
"react-app-rewired": "^2.1.3",
"workerize-loader": "^1.1.0"
},
"jest": {
"verbose": true,
"setupTestFrameworkScriptFile": "./src/test-setup.js",
"transform": {
"^.+\\.(js|jsx)?$": "babel-jest",
".+\\.(css|styl|less|sass|scss|svg)$": "jest-transform-css"
},
"transformIgnorePatterns": [
"node_modules/(?!(react-native|my-project|react-native-button)/)"
],
"moduleNameMapper": {
"my-module.js": "<rootDir>/path/to/my-module.js",
"\\.(css|less|sass|scss|svg)$": "identity-obj-proxy"
},
"collectCoverage": true,
"coverageReporters": [
"html",
"lcov",
"text"
]
}
}

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": "__"
}
}

Noob question: How can I turn my create-react-app into a standalone offline video game .exe program that does not require anything else to run?

I'm making a video game with create-react-app and typescript. I've tried distributing with electron but it is such a mess and I'm totally lost. I've put so much effort on this game that I really need to make a proper .exe build for, and now that I want to make a build I'm totally lost and helpless.
Also, there are some stuff I need to be able to do:
I need to be able to change resolution from the .tsx files
I need to be able to toggle fullscreen from the .tsx files
I need to be able to load assets located in /src
Everything needs to run locally and even offline
I need my public folder to be trully accessible and moddable for the end user
I can't find anything that I can properly understand and execute after several weeks of trying.
Please help.
nb: I did this eject thing once to fix electron which can't be undone.
directories and how things are structured
My package.json file:
{
"name": "<the name>",
"author": "<my name>",
"version": "0.1.0",
"description": "<the description>",
"private": true,
"dependencies": {
"#babel/core": "7.9.0",
"#electron/typescript-definitions": "^8.7.4",
"#kennethormandy/react-fittext": "^0.6.0",
"#material-ui/icons": "^4.9.1",
"#react-native-community/async-storage": "^1.10.0",
"#svgr/webpack": "4.3.3",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#typegoose/typegoose": "^7.0.0",
"#types/jest": "^24.9.1",
"#types/mongoose": "^5.7.14",
"#types/node": "^12.12.37",
"#types/react": "^16.9.34",
"#types/react-beautiful-dnd": "^12.1.2",
"#types/react-dom": "^16.9.7",
"#types/socket.io-client": "^1.4.32",
"#types/tweenjs": "^1.0.0",
"#typescript-eslint/eslint-plugin": "^2.10.0",
"#typescript-eslint/parser": "^2.10.0",
"alm": "^2.39.1",
"babel-eslint": "10.1.0",
"babel-jest": "^24.9.0",
"babel-loader": "8.1.0",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.2",
"camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"css-loader": "3.4.2",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"electron-browser-storage": "^1.0.6",
"electron-simple-window-manager": "^1.1.1",
"electron-store": "^5.1.1",
"eslint": "^6.6.0",
"eslint-config-react-app": "^5.2.1",
"eslint-loader": "3.0.3",
"eslint-plugin-flowtype": "4.6.0",
"eslint-plugin-import": "2.20.1",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "4.3.0",
"fs-extra": "^8.1.0",
"howler": "^2.2.0",
"html-webpack-plugin": "4.0.0-beta.11",
"identity-obj-proxy": "3.0.0",
"jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"mini-css-extract-plugin": "0.9.0",
"mongoose": "^5.9.11",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.4",
"popmotion": "^8.7.3",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "8.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-aspect-ratio": "^1.0.42",
"react-beautiful-dnd": "^13.0.0",
"react-dev-utils": "^10.2.1",
"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"react-dom": "^16.13.1",
"react-draggable": "^4.3.1",
"react-fittext": "^1.0.0",
"react-icons": "^3.10.0",
"react-image-tint": "^1.0.2",
"react-native-easy-dnd": "^1.0.2",
"react-responsive-spritesheet": "^2.3.9",
"react-textfit": "^1.1.0",
"react-z-index": "^3.0.0",
"resolve": "1.15.0",
"resolve-url-loader": "3.1.1",
"sass-loader": "8.0.2",
"semver": "6.3.0",
"socket.io-client": "^2.3.0",
"style-loader": "0.23.1",
"terser-webpack-plugin": "2.3.5",
"ts-pnp": "1.1.6",
"tweenjs": "^1.0.2",
"typescript-react-draggable": "^1.0.0",
"url-loader": "2.3.0",
"webpack": "4.42.0",
"webpack-dev-server": "3.10.3",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1",
"xml-js": "^1.6.11"
},
"scripts": {
"pack": "electron-builder build --dir",
"dist": "npm run build && electron-builder build",
"postinstall": "install-app-deps",
"start": "nf start -p 3000",
"build": "node scripts/build.js",
"test": "node scripts/test.js",
"eject": "node scripts/eject.js",
"electron": "electron .",
"electron-start": "node src/electron-wait-react.js",
"react-start": "set BROWSER=nul && node scripts/start.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/express": "^4.17.6",
"#types/howler": "^2.1.2",
"#types/socket.io": "^2.1.4",
"electron-builder": "^22.6.0",
"express": "^4.17.1",
"foreman": "^3.0.1",
"node-sass": "^4.14.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-native-web": "0.11.2",
"socketio": "^1.0.0",
"typescript": "^3.8.3"
},
"homepage": "./",
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [
"C:\\Users\\mr003\\Documents\\programmation\\ZwangReact\\zwang\\src"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
}
}

Unable to use Jest: SyntaxError: Unexpected identifier at Runtime.createScriptFromCode

I just installed Jest with npm and now I'm trying to run some tests. Turns out I'm not able to do so since I get the following error:
● Test suite failed to run
C:\Users\aleja\Documents\FINAL PAW POSTA\paw-2018b-10\frontend\src\tests\PublicationService.test.js:3
import PublicationService from '../services/PublicationService'; // import * as StatusCode from '../util/StatusCode'
^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1059:14)
And here's my package.json. I've read on other questions about babel.rc files and stuff but I don't even have those files.
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.7.4",
"#material-ui/core": "^4.8.2",
"#material-ui/icons": "^4.5.0",
"#material/react-linear-progress": "^0.15.0",
"axios": "^0.19.0",
"axios-mock-adapter": "^1.17.0",
"babel-jest": "^25.1.0",
"bootstrap": "^4.4.1",
"crypto-js": "^3.1.9-1",
"enzyme": "^3.11.0",
"formik": "^1.5.8",
"i18next": "^17.3.1",
"i18next-browser-languagedetector": "^3.1.1",
"i18next-xhr-backend": "^3.2.2",
"jest": "^25.1.0",
"mutex-promise": "^0.1.0",
"query-string": "^6.9.0",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-bootstrap-switch": "^15.5.3",
"react-content-loader": "^4.3.4",
"react-dom": "^16.12.0",
"react-form-validator-core": "^0.6.4",
"react-geocode": "^0.2.1",
"react-google-maps": "^9.4.5",
"react-i18next": "^10.13.2",
"react-images-upload": "^1.2.7",
"react-images-viewer": "^1.6.2",
"react-material-ui-form-validator": "^2.0.9",
"react-notifications-component": "^2.2.4",
"react-paginate": "^6.3.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"react-spring": "^8.0.27",
"react-toast-notifications": "^2.4.0",
"redux": "^4.0.5",
"toasted-notes": "^3.2.0",
"webfontloader": "^1.6.28",
"yup": "^0.27.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#testing-library/jest-dom": "^5.0.2",
"#testing-library/react": "^9.4.0",
"babel-plugin-transform-es2015-modules-amd": "^6.24.1",
"grunt": "^1.0.4",
"grunt-babel": "^8.0.0",
"grunt-sass": "^3.1.0",
"grunt-war": "^0.5.1",
"node-sass": "^4.13.1",
"react-test-renderer": "^16.12.0",
"reactotron-react-js": "^3.3.7",
"sass": "^1.24.0"
},
"jest": {
"modulePaths": [
"node_modules"
],
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"homepage": "http://mypage.com/",
"proxy": "http://localhost:8080"
}
I've added some babel dependencies but the issue still doesn't get fixed.
I also added the "Jest" part in my package.json I read on another question. Still no luck.
Ok seems like I had to create a babel.config.js file in the root directory as it says here
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};

How can I divide prod and dev version in create-react-app

I have an application on the react, when the build I want insert another path, how can this be done?
I have two files with paths that need to be changed
........................................................................................................................................
config.js
const config = {
url: 'http://45.86.181.235' // here
};
export default config;
package.json
{
"name": "celbine",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "7.5.5",
"#svgr/webpack": "4.3.2",
"#typescript-eslint/eslint-plugin": "1.13.0",
"#typescript-eslint/parser": "1.13.0",
"axios": "^0.19.0",
"babel-eslint": "10.0.2",
"babel-jest": "^24.8.0",
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.3",
"babel-preset-react-app": "^9.0.1",
"camelcase": "^5.2.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"chart.js": "^2.8.0",
"classnames": "^2.2.6",
"css-loader": "2.1.1",
"dotenv-expand": "4.2.0",
"eslint": "^6.1.0",
"eslint-config-react-app": "^5.0.1",
"eslint-loader": "2.2.1",
"eslint-plugin-flowtype": "3.13.0",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "3.0.1",
"font-awesome": "^4.7.0",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.8.0",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.8.0",
"jest-watch-typeahead": "0.3.1",
"jwt-decode": "^2.2.0",
"mini-css-extract-plugin": "0.5.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"parallax-js": "^3.1.0",
"pnp-webpack-plugin": "1.5.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.7.0",
"postcss-safe-parser": "4.0.1",
"raphael": "^2.3.0",
"react": "^16.9.0",
"react-addons-css-transition-group": "^15.6.2",
"react-addons-transition-group": "^15.6.2",
"react-app-polyfill": "^1.0.2",
"react-chartjs-2": "^2.7.6",
"react-dev-utils": "^9.0.3",
"react-dom": "^16.9.0",
"react-moment": "^0.9.6",
"react-notifications-component": "^2.1.0",
"react-raphael": "^0.9.0",
"react-redux": "^7.1.1",
"react-router-dom": "^5.0.1",
"react-transition-group": "^4.3.0",
"redis-commander": "^0.6.6",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"resolve": "1.12.0",
"resolve-url-loader": "3.1.0",
"sass-loader": "7.2.0",
"semver": "6.3.0",
"socket.io-client": "^2.2.0",
"style-loader": "1.0.0",
"styled-components": "^4.4.0",
"terser-webpack-plugin": "1.4.1",
"ts-pnp": "1.1.2",
"url-loader": "2.1.0",
"webpack": "4.39.1",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.3.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js",
"build-prod": "set PUBLIC_URL=production11 && node scripts/start.js",
"build1": "set APP_ENV=development webpack"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"dotenv": "^6.2.0",
"react-app-env": "^1.2.3"
},
"proxy": "http://45.86.181.235" // here
}
You can keep environment variables in .env file for different environments
.env file
REACT_APP_CONFIG_URL=http://45.86.181.235
And you can access the value in react like this:
const configUrl = process.env.REACT_APP_CONFIG_URL
And if you want to change by script,
In windows:
"REACT_APP_CONFIG_URL=45.86.181.235" && npm start
In linux or macOs:
REACT_APP_CONFIG_URL=45.86.181.235 npm start
More info:
https://create-react-app.dev/docs/adding-custom-environment-variables/
Try this npm install dotenv --save
Details here: dotenv-how to ues it
In .env file, you can add this:
REACT_APP_API=http://xxxx.xxxx.xxxx.xxxx:8080/api
And in your http service for api you can use it as following
const baseURL = process.env.REACT_APP_API;
Enjoy.

Resources