React app rewired , Installing module federation with webpack - reactjs

I am using below code to install module federation plugin on top of react app rewired :
const ModuleFederationPlugin =
require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
webpack: function(config, env) {
config.externals = function(context, request, callback) {
if (/canvg|pdfmake/.test(request)) {
return callback(null, "commonjs " + request);
}
callback();
};
config.plugins.push(new ModuleFederationPlugin({
name: "app_1",
filename: "remoteEntry.js",
remotes: {
app_2: "app_2#http://localhost:8081/remoteEntry.js",
},
}));
return config;
},
};
Here is my package.json:
{
"name": "Sample_app",
"version": "0.1.358",
"dependencies": {
"#amcharts/amcharts4": "^4.10.20",
"#deck.gl/mesh-layers": "^8.6.8",
"#emotion/react": "^11.7.1",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#mui/icons-material": "^5.1.1",
"#mui/material": "^5.1.1",
"#mui/styled-engine-sc": "^5.1.0",
"#mui/styles": "^5.1.1",
"#reactour/tour": "^2.9.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.1.10",
"#wsp/map-gl": "^2.1.11",
"#wsp/map-react": "^1.1.2",
"axios": "^0.24.0",
"classnames": "^2.3.1",
"dayjs": "^1.10.7",
"express": "^4.17.1",
"ignore-styles": "^5.0.1",
"jest-fetch-mock": "^3.0.3",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"lodash.debounce": "^4.0.8",
"md5-file": "^5.0.0",
"mui-datatables": "^4.0.0",
"node": "^16.13.1",
"react": "^17.0.2",
"react-data-export": "^0.6.0",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"react-select": "^5.4.0",
"redux": "^4.1.2",
"redux-mock-store": "^1.5.4",
"redux-saga": "^1.1.3",
"styled-components": "^5.3.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start:local": "react-app-rewired start",
"start": "REACT_APP_ENV_HOST=$REACT_APP_ENV_HOST node --max-http-header-size 16384 build/server",
"build": "REACT_APP_ENV_HOST=$REACT_APP_ENV_HOST react-app-rewired build && cp -R ./server/* ./build && npm run moveFiles",
"test": "react-scripts test",
"test:coverage": "react-scripts test --coverage --watchAll=false",
"eject": "react-scripts eject",
"moveFiles": "cd build && mkdir channelperformance && cp -r ./static ./channelperformance/static",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public",
"test:update": "react-scripts test -u"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!/node_modules/",
"!src/coverage/**",
"!src/index.js",
"!src/stories/**"
],
"coveragePathIgnorePatterns": [
"/src/constants",
"/src/routes",
"/src/helper",
"/src/reportWebVitals.js",
"/src/components/Drilldown/DownloadMuiTable",
"/src/components/Drilldown/ReactVirtualized",
"/src/components/Drilldown/Common/ChannelBreakdown.js"
],
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\](?!(#amcharts)\\/).+\\.js$"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"babel-eslint": "^10.0.0"
},
"devDependencies": {
"#e2e-test-utils/ui-shield": "^3.0.3",
"#e2e-test-utils/ui-shield-utilities": "^4.1.5-0",
"#storybook/addon-actions": "^6.5.10",
"#storybook/addon-essentials": "^6.5.10",
"#storybook/addon-interactions": "^6.5.10",
"#storybook/addon-links": "^6.5.10",
"#storybook/builder-webpack4": "^6.5.10",
"#storybook/manager-webpack4": "^6.5.10",
"#storybook/node-logger": "^6.5.10",
"#storybook/preset-create-react-app": "^3.2.0",
"#storybook/react": "^6.5.10",
"#storybook/testing-library": "^0.0.13",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
"babel-jest-amcharts": "^0.0.2",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.4.4",
"eslint": "^7.28.0",
"prettier": "2.3.1",
"react-app-rewired": "^2.2.1",
"redux-devtools-extension": "^2.13.9"
}
}
However it throws an error saying "Cannot read properties of undefined (reading 'includes')". I think it's having a conflict with some library .
Please help. if any integration examples with MF plugin, please provide those links.

Related

export 'useEffect' (imported as 'useEffect') was not found in 'react' (module has no exports)

I am receiving errors of:
It seems to be errors related with redux and react redux:
I also have a warning of:
Attempted import error: 'useMemo' is not exported from 'react' (imported as 'useMemo').
LOG from webpack.FileSystemInfo
<w> Managed item C:\Users\Bernadette Kotelo\Documents\Gahn Eden\frontend\node_modules\react-redux\node_modules\#babel\runtime isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
+ 11 hidden lines
Here's my package.json inside my react redux folder in node_modules:
{
"name": "react-redux",
"version": "8.0.2",
"description": "Official React bindings for Redux",
"keywords": [
"react",
"reactjs",
"redux"
],
"license": "MIT",
"author": "Dan Abramov <dan.abramov#me.com> (https://github.com/gaearon)",
"homepage": "https://github.com/reduxjs/react-redux",
"repository": "github:reduxjs/react-redux",
"bugs": "https://github.com/reduxjs/react-redux/issues",
"main": "./lib/index.js",
"types": "./es/index.d.ts",
"unpkg": "dist/react-redux.js",
"module": "es/index.js",
"files": [
"dist",
"lib",
"src",
"es"
],
"scripts": {
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --extensions \".js,.ts,.tsx\" --out-dir lib",
"build:es": "babel src --extensions \".js,.ts,.tsx\" --out-dir es",
"build:umd": "cross-env NODE_ENV=development rollup -c -o dist/react-redux.js",
"build:umd:min": "cross-env NODE_ENV=production rollup -c -o dist/react-redux.min.js",
"build:types": "tsc",
"build": "yarn build:types && yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:umd:min",
"clean": "rimraf lib dist es coverage",
"api-types": "api-extractor run --local",
"format": "prettier --write \"{src,test}/**/*.{js,ts,tsx}\" \"docs/**/*.md\"",
"lint": "eslint src --ext ts,tsx,js test/utils test/components test/hooks",
"prepare": "yarn clean && yarn build",
"pretest": "yarn lint",
"test": "jest",
"type-tests": "yarn tsc -p test/typetests/tsconfig.json",
"coverage": "codecov"
},
"peerDependencies": {
"#types/react": "^16.8 || ^17.0 || ^18.0",
"#types/react-dom": "^16.8 || ^17.0 || ^18.0",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0",
"react-native": ">=0.59",
"redux": "^4"
},
"peerDependenciesMeta": {
"#types/react": {
"optional": true
},
"#types/react-dom": {
"optional": true
},
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
},
"redux": {
"optional": true
}
},
"dependencies": {
"#babel/runtime": "^7.12.1",
"#types/hoist-non-react-statics": "^3.3.1",
"#types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"devDependencies": {
"#babel/cli": "^7.12.1",
"#babel/core": "^7.12.3",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-object-rest-spread": "^7.12.1",
"#babel/plugin-transform-react-display-name": "^7.12.1",
"#babel/plugin-transform-react-jsx": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/preset-typescript": "^7.14.5",
"#microsoft/api-extractor": "^7.18.1",
"#reduxjs/toolkit": "^1.6.1",
"#rollup/plugin-babel": "^5.2.1",
"#rollup/plugin-commonjs": "^15.1.0",
"#rollup/plugin-node-resolve": "^9.0.0",
"#rollup/plugin-replace": "^2.3.3",
"#testing-library/jest-dom": "^5.11.5",
"#testing-library/jest-native": "^3.4.3",
"#testing-library/react": "13.0.0",
"#testing-library/react-12": "npm:#testing-library/react#^12",
"#testing-library/react-hooks": "^3.4.2",
"#testing-library/react-native": "^7.1.0",
"#types/object-assign": "^4.0.30",
"#types/react": "^18",
"#types/react-dom": "^18",
"#types/react-is": "^17",
"#types/react-native": "^0.67.4",
"#typescript-eslint/eslint-plugin": "^4.28.0",
"#typescript-eslint/parser": "^4.28.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.1",
"codecov": "^3.8.0",
"cross-env": "^7.0.2",
"eslint": "^7.12.0",
"eslint-config-prettier": "^6.14.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"glob": "^7.1.6",
"jest": "^26.6.1",
"prettier": "^2.1.2",
"react": "18.0.0",
"react-17": "npm:react#^17",
"react-dom": "18.0.0",
"react-dom-17": "npm:react-dom#^17",
"react-native": "^0.64.1",
"react-test-renderer": "18.0.0",
"react-test-renderer-17": "npm:react-test-renderer#^17",
"redux": "^4.0.5",
"rimraf": "^3.0.2",
"rollup": "^2.32.1",
"rollup-plugin-terser": "^7.0.2",
"ts-jest": "26.5.6",
"typescript": "^4.3.4"
}
}
And heres is my main app package.json:
{
"name": "frontend",
"proxy": "http://localhost:5000/",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/icons": "^2.0.9",
"#chakra-ui/react": "^2.3.2",
"#chakra-ui/system": "^2.2.9",
"#chakra-ui/theme-tools": "^2.0.11",
"#emotion/cache": "^11.10.3",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#hypertheme-editor/chakra-ui": "^0.2.0-dev.1",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.5",
"#mui/styled-engine": "^5.10.5",
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"apexcharts": "^3.35.5",
"axios": "^0.27.2",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"bootstrap": "^5.2.0",
"chart.js": "^3.9.1",
"chroma-js": "^2.4.2",
"framer-motion": "^7.2.1",
"jwt-decode": "^3.1.2",
"primeflex": "^3.2.1",
"primeicons": "^5.0.0",
"primereact": "^8.4.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.5.0",
"react-calendar": "^3.8.0",
"react-chartjs-2": "^4.3.1",
"react-custom-scrollbars-2": "^4.5.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.2",
"react-github-btn": "^1.4.0",
"react-icons": "^4.4.0",
"react-is": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-table": "^7.8.0",
"react-toastify": "^9.0.8",
"react-transition-group": "^4.4.5",
"redux": "^4.2.0",
"redux-persist": "^6.0.0",
"sass": "^1.54.9",
"sass-loader": "^13.0.2",
"stylis": "^4.1.2",
"stylis-plugin-rtl": "^2.0.2",
"swiper": "^8.4.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
I have tried uninstalling redux and react-redux and installing them again. It failed.
The errors say all my react hooks cannot be imported in react, inside my node_mudules/react-redux folder. Which is confusing because I have react installed.
Please help me. Thanks
I just ran into this issue. I deleted my node_modules folder rm -rf node_modules/ and ran npm i, and the issue was fixed.

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

ERR_CONNECTION_REFUSED when I start nightwatch via the chromium driver

package.json
{
"name": "assignment10",
"version": "0.1.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^2.10.8",
"#material-ui/core": "^4.11.4",
"#material-ui/pickers": "^3.3.10",
"#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/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"babel-preset-mobx": "^2.0.0",
"chromedriver": "^90.0.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.2",
"jest": "^26.6.0",
"mobx": "latest",
"mobx-react": "^7.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-intl": "^5.17.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
"test": "jest -u",
"browsertest": "nightwatch",
"coverage": "jest --coverage"
},
"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"
]
},
"devDependencies": {
"#types/enzyme": "^3.10.8",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/react-router-dom": "^5.1.7",
"#types/styled-components": "^5.1.9",
"#typescript-eslint/eslint-plugin": "4.22.1",
"#typescript-eslint/parser": "4.22.1",
"babel-eslint": "10.1.0",
"eslint": "^7.25.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "12.3.1",
"eslint-config-prettier": "8.3.0",
"eslint-config-react-app": "6.0.0",
"eslint-import-resolver-typescript": "2.4.0",
"eslint-loader": "4.0.2",
"eslint-plugin-flowtype": "5.7.2",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "4.2.0",
"nightwatch": "^1.6.4"
}
}
nightwatch.conf.js
module.exports = {
"src_folders" : ["./src/nightWatch"],
"webdriver" : {
"start_process": true,
"server_path": "node_modules/chromedriver/lib/chromedriver/chromedriver",
"port": 9515
},
"test_settings" : {
"default" : {
"desiredCapabilities": {
"browserName": "chrome"
}
}
}
}
when i run the script npm run browsertest i directly get a connection refused from google chrome. I have already deactivated sandboxing in the browser and disabled all proxies. I have also changed ports, but I just can't figure it out.
Does anyone have a solution? I have Debian 10 as OS
error
Hello I have found a solution. I had several instances running and therefore the npm start then selected a different port than I defined in the test. Have killed all processes on the port and restarted

ESLint configuration with react-scripts not working

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

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',
},
},
],
],
};

Resources