ERR_CONNECTION_REFUSED when I start nightwatch via the chromium driver - reactjs

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

Related

npm run build error with Create React App and TailwindCSS

When I run npm run build I get this error, why? I don't know if it has to do with TailwindCSS...
Creating an optimized production build...
Failed to compile.
static/css/main.a923260e.css from Css Minimizer plugin
/home/user/Documentos/coding/projects/todofeito app/client/static/css/main.a923260e.css:1882:43: Unknown word [webpack://./src/index.css:3,0][static/css/main.a923260e.css:1882,43]
package.json
{
"name": "todofeito-app-new",
"version": "0.1.0",
"private": true,
"dependencies": {
"#react-hook/resize-observer": "^1.2.6",
"#tanstack/react-query": "^4.3.9",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/react": "^18.0.20",
"#types/react-dom": "^18.0.6",
"date-fns": "^2.29.3",
"framer-motion": "^7.3.6",
"i18next": "^22.0.4",
"i18next-browser-languagedetector": "^7.0.1",
"lodash": "^4.17.21",
"nanoid": "^4.0.0",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-expanding-textarea": "^2.3.6",
"react-i18next": "^12.0.0",
"react-list": "^0.8.17",
"react-portal": "^4.2.2",
"react-resizable": "^3.0.4",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"react-select": "^5.6.0",
"tailwindcss-scoped-groups": "^2.0.0",
"typescript": "^4.8.3",
"web-vitals": "^2.1.4",
"zustand": "^4.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"test2": "jest"
},
"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": {
"#babel/preset-typescript": "^7.18.6",
"#types/lodash": "^4.14.186",
"#types/node": "^18.11.4",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-list": "^0.8.7",
"#types/react-portal": "^4.0.4",
"#types/react-resizable": "^3.0.3",
"#types/react-router-dom": "^5.3.3",
"autoprefixer": "^10.4.13",
"eslint-plugin-jest": "^27.1.3",
"jest": "^27.5.1",
"jest-environment-jsdom": "^29.2.2",
"postcss": "^8.4.19",
"postcss-normalize": "^10.0.1",
"tailwindcss": "^3.1.8"
}
}
yeah, I got the same error when I try to build, but I was able to run the project by yarn start without any style breaking or issues.

Module not found: Can't resolve 'color'

I have the following package.json for my React project.
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fluentui/react": "^8.33.0",
"#handsontable/react": "^9.0.2",
"#material-ui/core": "^4.9.8",
"#microsoft/office-js-helpers": "^1.0.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/react-stripe-elements": "^6.0.4",
"#uifabric/react-cards": "^0.109.49",
"axios": "^0.19.2",
"color": "^3.1.2",
"copy-to-clipboard": "^3.3.1",
"cross-storage": "^1.0.0",
"dva": "^2.4.1",
"dva-model-creator": "^0.4.3",
"formik": "^2.1.4",
"handsontable": "^9.0.2",
"highcharts": "^7.0.3",
"highcharts-react-official": "^3.0.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"monaco-editor": "^0.31.1",
"monaco-languageclient": "^0.13.0",
"node-sass": "^4.14.1",
"office-ui-fabric-core": "^11.0.0",
"office-ui-fabric-react": "^7.105.4",
"query-string": "^6.11.1",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-meta-tags": "^1.0.1",
"react-monaco-editor": "^0.35.0",
"react-scripts": "3.4.1",
"react-stripe-elements": "^6.1.1",
"redux-devtools-extension": "^2.13.8",
"styled-components": "^5.0.1",
"typescript": "^3.8.3",
"yup": "^0.28.3"
},
"scripts": {
"start": "PORT=3000 react-app-rewired start",
"start:https": "HTTPS=true react-app-rewired start",
"build": "react-scripts --max_old_space_size=8096 build",
"test": "react-scripts test",
"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": {
"#types/color": "^3.0.1",
"#types/cross-storage": "^0.8.29",
"#types/jest": "^25.1.4",
"#types/lodash": "^4.14.149",
"#types/node": "^13.9.5",
"#types/office-js": "^1.0.92",
"#types/query-string": "^6.3.0",
"#types/react": "^16.9.27",
"#types/react-dom": "^16.9.5",
"#types/react-redux": "^7.1.7",
"#types/styled-components": "^5.0.1",
"#types/yup": "^0.26.33",
"babel-loader": "8.1.0",
"css-loader": "^3.5.3",
"react-app-rewired": "^2.1.8",
"style-loader": "^1.2.1"
}
}
sudo PORT=8000 HTTPS=true ./node_modules/.bin/react-scripts start returns me the following error, could anyone help?
Failed to compile.
./src/theme.tsx
Module not found: Can't resolve 'color' in '/Users/SoftTimur/Submission/20220114/10Studio/frontend/src'
If you are using color package, make sure that you are importing the package on theme.tsx

Module not found: Can't resolve "NPM LINKED MODULE" when using npm-link

I'm working on a TypeScript React application which heavily relies on a private NPM package. I can successfully link the NPM package, but after doing so I get the error <pre>/src/components/xxxx/xxxx/xxxxx/xxxxHoc.tsx Module not found: Can&apos;t resolve &apos;#CompanyName/Company-package&apos; in &apos;/home/liam/CompanyName/Company-product/src/components/xxxx/xxxx/xxxxx&apos;</pre>
riddle all over the application where the npm package is imported. NPM isntalling this package traditionally does works as intended but I need to be able to locally test the package.
Typically when I npm-link the package it gets removed from package.json, I'm not sure if thats how it's supposed to work? would love some insight if possible
I was successfully able to npm-link this package to a laravel applicaiton, but linking it to this particular react app does not work.
Main projects package.json file
{
"name": "Company-product",
"version": "0.1.0",
"private": true,
"dependencies": {
"#aws-sdk/client-dynamodb": "^3.37.0",
"#aws-sdk/util-dynamodb": "^3.37.0",
"#elastic/apm-rum": "^5.9.1",
"#elastic/apm-rum-react": "^1.3.1",
"#fingerprintjs/fingerprintjs": "^3.3.0",
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.16",
"#CompanyName/NPM-LINKED-MODULE": "^2.10.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/fingerprintjs": "^0.5.28",
"#types/jest": "^26.0.24",
"#types/js-cookie": "^2.2.7",
"#types/node": "^12.20.33",
"#types/react": "^16.14.17",
"#types/react-csv": "^1.1.2",
"#types/react-dom": "^16.9.14",
"#types/react-router-dom": "^5.3.1",
"#types/react-select": "^3.0.28",
"aws-sdk": "^2.1012.0",
"bootstrap": "^4.6.0",
"deepmerge": "^4.2.2",
"formik": "^2.2.9",
"highcharts": "^8.2.2",
"highcharts-react-official": "^3.1.0",
"husky": "^4.3.8",
"ismobilejs": "^1.1.1",
"js-cookie": "^2.2.1",
"jwt-decode": "^3.1.2",
"luxon": "^1.28.0",
"mobx": "^6.3.5",
"mobx-react-lite": "^3.2.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"node-sass": "^4.14",
"nvm": "^0.0.4",
"react": "^17.0.2",
"react-bootstrap": "^1.6.4",
"react-csv": "^2.0.3",
"react-dom": "^17.0.2",
"react-map-gl": "^6.1.17",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.1",
"react-select": "^3.1.1",
"react-table": "^7.7.0",
"react-toastify": "^6.2.0",
"typescript": "^4.4.4",
"urijs": "^1.19.7",
"utility-types": "^3.10.0",
"web-vitals": "^0.2.4",
"worker-loader": "^3.0.8",
"yup": "^0.32.11"
},
"husky": {
"hooks": {
"pre-commit": "sh ./hooks/pre-commit"
}
},
"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"
]
},
"devDependencies": {
"#types/luxon": "^1.27.1",
"#types/react-map-gl": "^5.2.11",
"#types/react-table": "^7.7.7",
"#types/urijs": "^1.19.17"
}
The linked NPM package package.json file
{
"name": "#CompanyName/linked-module",
"version": "2.10.0",
"description": "Company Package",
"author": "Company",
"license": "MIT",
"repository": "CompanyName/company-package",
"main": "dist/bundle.js",
"types": "dist/index.d.ts",
"dependencies": {
"#types/jquery": "^3.3.33",
"#types/node": "^12.20.33",
"#types/urijs": "^1.19.6",
"axios": "^0.21.4",
"deepmerge": "^4.2.2",
"dotenv": "^8.2.0",
"highcharts": "^8.2.2",
"ismobilejs": "^1.1.1",
"moment": "^2.24.0",
"urijs": "^1.19.7"
},
"devDependencies": {
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
}
}
Thanks for any awnsers

eslint-config-react-app is invalid Property "overrides" is the wrong type

I have a lot of ESLint warnings and I noticed my VSCode isn't showing me them in my code. It's only visible in the console log for my react app. I checked the output of ESLint in VSCode and it says:
[Info - 2:43:19 PM] ESLint configuration in package.json » eslint-config-react-app is invalid: - Property "overrides" is the wrong type (expected array but got {"files":["**/*.ts","**/*.tsx"],"parser":"#typescript-eslint/parser","parserOptions":{"ecmaVersion":2018,"sourceType":"module","ecmaFeatures":{"jsx":true},"warnOnUnsupportedTypeScriptVersion":true},"plugins":["#typescript-eslint"],"rules":{"default-case":"off","no-dupe-class-members":"off","#typescript-eslint/no-angle-bracket-type-assertion":"warn","no-array-constructor":"off","#typescript-eslint/no-array-constructor":"warn","#typescript-eslint/no-namespace":"error","no-unused-vars":"off","#typescript-eslint/no-unused-vars":["warn",{"args":"none","ignoreRestSiblings":true}],"no-useless-constructor":"off","#typescript-eslint/no-useless-constructor":"warn"}}). Referenced from: C:\Users\(my-name)\(my-app)\package.json
{
"name": "(my-app-name)",
"version": "0.1.0",
"private": true,
"dependencies": {
"#azure/cognitiveservices-qnamaker": "^3.1.0",
"#azure/ms-rest-azure-js": "^2.0.1",
"#microsoft/microsoft-graph-client": "^2.0.0",
"#types/jest": "^25.2.1",
"#types/node": "^13.13.4",
"#types/react": "^16.9.34",
"#types/react-bootstrap-typeahead": "^3.4.5",
"#types/react-dom": "^16.9.7",
"#types/reactstrap": "^8.4.2",
"adaptivecards": "^1.2.3",
"axios": "^0.19.2",
"bootstrap": "^4.1.3",
"date-fns": "^2.12.0",
"dotenv": "^8.2.0",
"fusioncharts": "^3.15.1",
"jquery": "^3.5.0",
"luis-node-sdk": "^1.0.0",
"merge": "^1.2.1",
"msal": "^1.3.0",
"ncp": "^2.0.0",
"oidc-client": "^1.10.1",
"promise.allsettled": "^1.0.2",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "^1.0.1",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-typeahead": "^3.4.7",
"react-datepicker": "^2.14.1",
"react-dom": "^16.13.1",
"react-fusioncharts": "^3.1.2",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"reactstrap": "^8.4.1",
"rimraf": "^2.6.2"
},
"devDependencies": {
"#microsoft/microsoft-graph-types": "^1.12.0",
"#types/promise.allsettled": "^1.0.3",
"ajv": "^6.12.2",
"cross-env": "^5.2.0",
"eslint-config-react-app": "^4.0.1",
"eslint-plugin-flowtype": "^2.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.19.0",
"typescript": "^3.8.3"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/",
"build": "react-scripts build",
"publish-qa": "node tasks/publish-qa.js",
"publish-production": "node tasks/publish-prod.js"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
">0.2%",
"not dead",
"not op_mini all"
]
},
"homepage": "."
}
I solved this by upgrading from eslint 6.7.2 to 6.8.0
So, essentially npm install eslint --save
Run this from the directory which holds your package.json file and see how it goes.

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