Explore all Jest open source software, libraries, packages, source code, cloud functions and APIs.
Popular New Releases in Jest
jest
v28.0.0-alpha.11
react-testing-library
v13.1.1
tsdx
v0.14.1
ts-jest
v27.1.4
react-hooks-testing-library
v8.0.0
Popular Libraries in Jest
nodebestpractices
by goldbergyoni 
javascript
76719 CC-BY-SA-4.0
:white_check_mark: The Node.js best practices list (March 2022)
jest
by facebook typescript
38648 MIT
Delightful JavaScript Testing.
react-starter-kit
by kriasoft typescript
21150 MIT
React Starter Kit — front-end starter kit using React, Relay, GraphQL, and JAM stack architecture
javascript-testing-best-practices
by goldbergyoni javascript
16734 MIT
📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (April 2022)
react-testing-library
by testing-library javascript
16240 MIT
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
TypeScript-React-Starter
by microsoft typescript
10678 MIT
A starter template for TypeScript and React with a detailed README describing how to use the two together.
sinon
by sinonjs javascript
8951 NOASSERTION
Test spies, stubs and mocks for JavaScript.
tsdx
by formium javascript
8143 MIT
Zero-config CLI for TypeScript package development
majestic
by Raathigesh typescript
7184 MIT
⚡ Zero config GUI for Jest
Trending New libraries in Jest
nodejs-integration-tests-best-practices
by testjavascript javascript
1892
✅ Master the art of the most powerful testing technique for Node.js: Component tests. Including super-comprehensive best practices list and an example app (November 2021)
superplate
by pankod typescript
1627
A well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, Bundle Analyzer and 30+ plugin. For now, only creates projects for React and Next.js. https://pankod.github.io/superplate/
nodejs-backend-architecture-typescript
by afteracademy typescript
1473 Apache-2.0
Node.js Backend Architecture Typescript - Learn to build a backend server for Blogging platform like Medium, FreeCodeCamp, MindOrks, AfterAcademy - Learn to write unit and integration tests - Learn to use Docker image - Open-Source Project By AfterAcademy
electron-typescript-react
by diego3g javascript
1192
:electron: An Electron boilerplate including TypeScript, React, Jest and ESLint.
next-right-now
by UnlyEd html
807 MIT
Flexible production-grade boilerplate with Next.js 11, Vercel and TypeScript. Includes multiple opt-in presets using Storybook, Airtable, GraphQL, Analytics, CSS-in-JS, Monitoring, End-to-end testing, Internationalization, CI/CD and SaaS B2B multi single-tenancy (monorepo) support
snapchat-clone
by TowhidKashem typescript
793 MIT
👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!
playwright-test
by microsoft typescript
780 NOASSERTION
Build a cross-browser end-to-end test suite with Playwright.
esbuild-node-tsc
by a7ul javascript
608 MIT
Build your Typescript Node.js projects using blazing fast esbuild
testing-react
by storybookjs typescript
539 MIT
Testing utilities that allow you to reuse your Storybook stories in your React unit tests!
Top Authors in Jest
1
13 Libraries
29972
2
13 Libraries
3273
3
11 Libraries
24
4
11 Libraries
556
5
11 Libraries
23
6
11 Libraries
382
7
11 Libraries
44
8
11 Libraries
5101
9
10 Libraries
75
10
10 Libraries
14424
1
13 Libraries
29972
2
13 Libraries
3273
3
11 Libraries
24
4
11 Libraries
556
5
11 Libraries
23
6
11 Libraries
382
7
11 Libraries
44
8
11 Libraries
5101
9
10 Libraries
75
10
10 Libraries
14424
Trending Kits in Jest
No Trending Kits are available at this moment for Jest
Trending Discussions on Jest
Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
The unauthenticated git protocol on port 9418 is no longer supported
Consider using the "jsdom" test environment
Making a JSX syntax for a MockComponent and have it typed with typescript
ESlint - Error: Must use import to load ES Module
Switch' is not exported from 'react-router-dom'
"Cannot read properties of undefined (reading 'pathname')" when testing pages in the v6 React Router
eslint / typescript: Unable to resolve path to module
Vue 3: Module '"../../node_modules/vue/dist/vue"' has no exported member
QUESTION
Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function
Asked 2022-Apr-04 at 13:24I am learning react js. I am a very beginner at this topic. But when I am doing setup to create a react environment I got an error. I have tried to solve the problem by Charles Stover blog in medium. But I got an error Command "up" not found.
Here's my index.js file:
1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './App';
4import reportWebVitals from './reportWebVitals';
5ReactDOM.render(
6 <React.StrictMode>
7 <App />
8 </React.StrictMode>,
9document.getElementById('root')
10);
11reportWebVitals();
12My package.json file:
1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './App';
4import reportWebVitals from './reportWebVitals';
5ReactDOM.render(
6 <React.StrictMode>
7 <App />
8 </React.StrictMode>,
9document.getElementById('root')
10);
11reportWebVitals();
12{
13 "name": "myreact",
14 "version": "0.1.0",
15 "private": true,
16 "dependencies": {
17 "@testing-library/jest-dom": "^5.11.4",
18 "@testing-library/react": "^11.1.0",
19 "@testing-library/user-event": "^12.1.10",
20 "react": "^17.0.2",
21 "react-dom": "^17.0.2",
22 "react-scripts": "4.0.3",
23 "web-vitals": "^1.0.1"
24 },
25 "scripts": {
26 "start": "react-scripts start",
27 "build": "react-scripts build",
28 "test": "react-scripts test",
29 "eject": "react-scripts eject",
30 "lint": "yarn add -D prettier && yarn add -D babel-eslint && npx install-peerdeps --dev eslint-config-airbnb && yarn add -D eslint-config-prettier eslint-plugin-prettier"
31 },
32 "eslintConfig": {
33 "extends": [
34 "react-app",
35 "react-app/jest"
36 ]
37 },
38 "browserslist": {
39 "production": [
40 ">0.2%",
41 "not dead",
42 "not op_mini all"
43 ],
44 "development": [
45 "last 1 chrome version",
46 "last 1 firefox version",
47 "last 1 safari version"
48 ]
49 },
50 "devDependencies": {
51 "babel-eslint": "^10.1.0",
52 "eslint": "7.2.0",
53 "eslint-config-airbnb": "18.2.1",
54 "eslint-config-prettier": "^8.3.0",
55 "eslint-plugin-import": "2.22.1",
56 "eslint-plugin-jsx-a11y": "6.4.1",
57 "eslint-plugin-prettier": "^4.0.0",
58 "eslint-plugin-react": "7.21.5",
59 "eslint-plugin-react-hooks": "1.7.0",
60 "prettier": "^2.3.2"
61 }
62}
63When I am running yarn start in terminal, I am getting an error.
1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './App';
4import reportWebVitals from './reportWebVitals';
5ReactDOM.render(
6 <React.StrictMode>
7 <App />
8 </React.StrictMode>,
9document.getElementById('root')
10);
11reportWebVitals();
12{
13 "name": "myreact",
14 "version": "0.1.0",
15 "private": true,
16 "dependencies": {
17 "@testing-library/jest-dom": "^5.11.4",
18 "@testing-library/react": "^11.1.0",
19 "@testing-library/user-event": "^12.1.10",
20 "react": "^17.0.2",
21 "react-dom": "^17.0.2",
22 "react-scripts": "4.0.3",
23 "web-vitals": "^1.0.1"
24 },
25 "scripts": {
26 "start": "react-scripts start",
27 "build": "react-scripts build",
28 "test": "react-scripts test",
29 "eject": "react-scripts eject",
30 "lint": "yarn add -D prettier && yarn add -D babel-eslint && npx install-peerdeps --dev eslint-config-airbnb && yarn add -D eslint-config-prettier eslint-plugin-prettier"
31 },
32 "eslintConfig": {
33 "extends": [
34 "react-app",
35 "react-app/jest"
36 ]
37 },
38 "browserslist": {
39 "production": [
40 ">0.2%",
41 "not dead",
42 "not op_mini all"
43 ],
44 "development": [
45 "last 1 chrome version",
46 "last 1 firefox version",
47 "last 1 safari version"
48 ]
49 },
50 "devDependencies": {
51 "babel-eslint": "^10.1.0",
52 "eslint": "7.2.0",
53 "eslint-config-airbnb": "18.2.1",
54 "eslint-config-prettier": "^8.3.0",
55 "eslint-plugin-import": "2.22.1",
56 "eslint-plugin-jsx-a11y": "6.4.1",
57 "eslint-plugin-prettier": "^4.0.0",
58 "eslint-plugin-react": "7.21.5",
59 "eslint-plugin-react-hooks": "1.7.0",
60 "prettier": "^2.3.2"
61 }
62}
63Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function
64Occurred while linting F:\react-projects\myreact\src\index.js
65Now what should I do?
ANSWER
Answered 2021-Sep-06 at 09:40I got two different solution.
- remove
1import React from 'react';
2import ReactDOM from 'react-dom';
3import App from './App';
4import reportWebVitals from './reportWebVitals';
5ReactDOM.render(
6 <React.StrictMode>
7 <App />
8 </React.StrictMode>,
9document.getElementById('root')
10);
11reportWebVitals();
12{
13 "name": "myreact",
14 "version": "0.1.0",
15 "private": true,
16 "dependencies": {
17 "@testing-library/jest-dom": "^5.11.4",
18 "@testing-library/react": "^11.1.0",
19 "@testing-library/user-event": "^12.1.10",
20 "react": "^17.0.2",
21 "react-dom": "^17.0.2",
22 "react-scripts": "4.0.3",
23 "web-vitals": "^1.0.1"
24 },
25 "scripts": {
26 "start": "react-scripts start",
27 "build": "react-scripts build",
28 "test": "react-scripts test",
29 "eject": "react-scripts eject",
30 "lint": "yarn add -D prettier && yarn add -D babel-eslint && npx install-peerdeps --dev eslint-config-airbnb && yarn add -D eslint-config-prettier eslint-plugin-prettier"
31 },
32 "eslintConfig": {
33 "extends": [
34 "react-app",
35 "react-app/jest"
36 ]
37 },
38 "browserslist": {
39 "production": [
40 ">0.2%",
41 "not dead",
42 "not op_mini all"
43 ],
44 "development": [
45 "last 1 chrome version",
46 "last 1 firefox version",
47 "last 1 safari version"
48 ]
49 },
50 "devDependencies": {
51 "babel-eslint": "^10.1.0",
52 "eslint": "7.2.0",
53 "eslint-config-airbnb": "18.2.1",
54 "eslint-config-prettier": "^8.3.0",
55 "eslint-plugin-import": "2.22.1",
56 "eslint-plugin-jsx-a11y": "6.4.1",
57 "eslint-plugin-prettier": "^4.0.0",
58 "eslint-plugin-react": "7.21.5",
59 "eslint-plugin-react-hooks": "1.7.0",
60 "prettier": "^2.3.2"
61 }
62}
63Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function
64Occurred while linting F:\react-projects\myreact\src\index.js
65"prettier/prettier": [
66 "error",
67 {
68 "trailingComma": "es5",
69 "singleQuote": true,
70 "printWidth": 100,
71 "tabWidth": 4,
72 "semi": true,
73 "endOfLine": "auto"
74 }
75 ]from .eslintrc folder and change react script version from 4.0.3 to 4.0.1 and run npm install.
- Use
yarn upgrade -R eslintand change react script version from 4.0.3 to 4.0.1 and runnpm install.
QUESTION
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
Asked 2022-Mar-28 at 21:08I have been stock on this error on my project when I add "proxy": "http://localhost:6000"
in my package.json.
This is the error response after yarn start.
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options.allowedHosts[0] should be a non-empty string. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
But everything is fine when I remove the "proxy": "http://localhost:6000".
This is on my package.json:
1{
2 "name": "client",
3 "version": "0.1.0",
4 "private": true,
5 "dependencies": {
6 "@material-ui/core": "^4.12.3",
7 "@testing-library/jest-dom": "^5.16.1",
8 "@testing-library/react": "^12.1.2",
9 "@testing-library/user-event": "^13.5.0",
10 "axios": "^0.24.0",
11 "moment": "^2.29.1",
12 "react": "^17.0.2",
13 "react-dom": "^17.0.2",
14 "react-file-base64": "^1.0.3",
15 "react-redux": "^7.2.6",
16 "react-scripts": "5.0.0",
17 "redux": "^4.1.2",
18 "redux-thunk": "^2.4.1",
19 "web-vitals": "^2.1.2"
20 },
21 "scripts": {
22 "start": "react-scripts start",
23 "build": "react-scripts build",
24 "test": "react-scripts test",
25 "eject": "react-scripts eject"
26 },
27 "eslintConfig": {
28 "extends": [
29 "react-app",
30 "react-app/jest"
31 ]
32 },
33 "browserslist": {
34 "production": [
35 ">0.2%",
36 "not dead",
37 "not op_mini all"
38 ],
39 "development": [
40 "last 1 chrome version",
41 "last 1 firefox version",
42 "last 1 safari version"
43 ]
44 },
45 "proxy": "http://localhost:6000"
46}
47ANSWER
Answered 2021-Dec-19 at 16:06Here is a workaround. Delete "proxy": "http://localhost:6000". Install package http-proxy-middleware with command npm install http-proxy-middleware --save. Create a file setupProxy.js inside your src folder. Add these lines inside:
1{
2 "name": "client",
3 "version": "0.1.0",
4 "private": true,
5 "dependencies": {
6 "@material-ui/core": "^4.12.3",
7 "@testing-library/jest-dom": "^5.16.1",
8 "@testing-library/react": "^12.1.2",
9 "@testing-library/user-event": "^13.5.0",
10 "axios": "^0.24.0",
11 "moment": "^2.29.1",
12 "react": "^17.0.2",
13 "react-dom": "^17.0.2",
14 "react-file-base64": "^1.0.3",
15 "react-redux": "^7.2.6",
16 "react-scripts": "5.0.0",
17 "redux": "^4.1.2",
18 "redux-thunk": "^2.4.1",
19 "web-vitals": "^2.1.2"
20 },
21 "scripts": {
22 "start": "react-scripts start",
23 "build": "react-scripts build",
24 "test": "react-scripts test",
25 "eject": "react-scripts eject"
26 },
27 "eslintConfig": {
28 "extends": [
29 "react-app",
30 "react-app/jest"
31 ]
32 },
33 "browserslist": {
34 "production": [
35 ">0.2%",
36 "not dead",
37 "not op_mini all"
38 ],
39 "development": [
40 "last 1 chrome version",
41 "last 1 firefox version",
42 "last 1 safari version"
43 ]
44 },
45 "proxy": "http://localhost:6000"
46}
47const { createProxyMiddleware } = require('http-proxy-middleware');
48
49module.exports = function(app) {
50 app.use(
51 '/api',
52 createProxyMiddleware({
53 target: 'http://localhost:6000',
54 changeOrigin: true,
55 })
56 );
57};
58Now, run your app. It should work.
QUESTION
The unauthenticated git protocol on port 9418 is no longer supported
Asked 2022-Mar-27 at 13:23I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7Upon investigation, it appears that below section in my yml file is causing the issue.
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9I have looked into this change log but can't seem to comprehend the issue.
Additional Details: Server: EC2 Instance Github actions steps:
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55package.json file
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55 {
56 "name": "stackstream-fe",
57 "version": "1.0.0",
58 "authors": [
59 "fayyaznofal@gmail.com"
60 ],
61 "private": true,
62 "dependencies": {
63 "@fortawesome/fontawesome-svg-core": "^1.2.34",
64 "@fortawesome/free-solid-svg-icons": "^5.15.2",
65 "@fortawesome/react-fontawesome": "^0.1.14",
66 "@fullcalendar/bootstrap": "^5.5.0",
67 "@fullcalendar/core": "^5.5.0",
68 "@fullcalendar/daygrid": "^5.5.0",
69 "@fullcalendar/interaction": "^5.5.0",
70 "@fullcalendar/react": "^5.5.0",
71 "@lourenci/react-kanban": "^2.1.0",
72 "@redux-saga/simple-saga-monitor": "^1.1.2",
73 "@testing-library/jest-dom": "^5.11.9",
74 "@testing-library/react": "^11.2.3",
75 "@testing-library/user-event": "^12.6.0",
76 "@toast-ui/react-chart": "^1.0.2",
77 "@types/jest": "^26.0.14",
78 "@types/node": "^14.10.3",
79 "@types/react": "^16.9.49",
80 "@types/react-dom": "^16.9.8",
81 "@vtaits/react-color-picker": "^0.1.1",
82 "apexcharts": "^3.23.1",
83 "availity-reactstrap-validation": "^2.7.0",
84 "axios": "^0.21.1",
85 "axios-mock-adapter": "^1.19.0",
86 "axios-progress-bar": "^1.2.0",
87 "bootstrap": "^5.0.0-beta2",
88 "chart.js": "^2.9.4",
89 "chartist": "^0.11.4",
90 "classnames": "^2.2.6",
91 "components": "^0.1.0",
92 "dotenv": "^8.2.0",
93 "draft-js": "^0.11.7",
94 "echarts": "^4.9.0",
95 "echarts-for-react": "^2.0.16",
96 "firebase": "^8.2.3",
97 "google-maps-react": "^2.0.6",
98 "history": "^4.10.1",
99 "i": "^0.3.6",
100 "i18next": "^19.8.4",
101 "i18next-browser-languagedetector": "^6.0.1",
102 "jsonwebtoken": "^8.5.1",
103 "leaflet": "^1.7.1",
104 "lodash": "^4.17.21",
105 "lodash.clonedeep": "^4.5.0",
106 "lodash.get": "^4.4.2",
107 "metismenujs": "^1.2.1",
108 "mkdirp": "^1.0.4",
109 "moment": "2.29.1",
110 "moment-timezone": "^0.5.32",
111 "nouislider-react": "^3.3.9",
112 "npm": "^7.6.3",
113 "prop-types": "^15.7.2",
114 "query-string": "^6.14.0",
115 "react": "^16.13.1",
116 "react-apexcharts": "^1.3.7",
117 "react-auth-code-input": "^1.0.0",
118 "react-avatar": "^3.10.0",
119 "react-bootstrap": "^1.5.0",
120 "react-bootstrap-editable": "^0.8.2",
121 "react-bootstrap-sweetalert": "^5.2.0",
122 "react-bootstrap-table-next": "^4.0.3",
123 "react-bootstrap-table2-editor": "^1.4.0",
124 "react-bootstrap-table2-paginator": "^2.1.2",
125 "react-bootstrap-table2-toolkit": "^2.1.3",
126 "react-chartist": "^0.14.3",
127 "react-chartjs-2": "^2.11.1",
128 "react-color": "^2.19.3",
129 "react-confirm-alert": "^2.7.0",
130 "react-content-loader": "^6.0.1",
131 "react-countdown": "^2.3.1",
132 "react-countup": "^4.3.3",
133 "react-cropper": "^2.1.4",
134 "react-data-table-component": "^6.11.8",
135 "react-date-picker": "^8.0.6",
136 "react-datepicker": "^3.4.1",
137 "react-dom": "^16.13.1",
138 "react-draft-wysiwyg": "^1.14.5",
139 "react-drag-listview": "^0.1.8",
140 "react-drawer": "^1.3.4",
141 "react-dropzone": "^11.2.4",
142 "react-dual-listbox": "^2.0.0",
143 "react-facebook-login": "^4.1.1",
144 "react-flatpickr": "^3.10.6",
145 "react-google-login": "^5.2.2",
146 "react-hook-form": "^7.15.2",
147 "react-i18next": "^11.8.5",
148 "react-icons": "^4.2.0",
149 "react-image-lightbox": "^5.1.1",
150 "react-input-mask": "^2.0.4",
151 "react-jvectormap": "^0.0.16",
152 "react-leaflet": "^3.0.5",
153 "react-meta-tags": "^1.0.1",
154 "react-modal-video": "^1.2.6",
155 "react-notifications": "^1.7.2",
156 "react-number-format": "^4.7.3",
157 "react-perfect-scrollbar": "^1.5.8",
158 "react-rangeslider": "^2.2.0",
159 "react-rating": "^2.0.5",
160 "react-rating-tooltip": "^1.1.6",
161 "react-redux": "^7.2.1",
162 "react-responsive-carousel": "^3.2.11",
163 "react-router-dom": "^5.2.0",
164 "react-script": "^2.0.5",
165 "react-scripts": "3.4.3",
166 "react-select": "^4.3.1",
167 "react-sparklines": "^1.7.0",
168 "react-star-ratings": "^2.3.0",
169 "react-super-responsive-table": "^5.2.0",
170 "react-switch": "^6.0.0",
171 "react-table": "^7.6.3",
172 "react-toastify": "^7.0.3",
173 "react-toastr": "^3.0.0",
174 "react-twitter-auth": "0.0.13",
175 "reactstrap": "^8.8.1",
176 "recharts": "^2.0.8",
177 "redux": "^4.0.5",
178 "redux-saga": "^1.1.3",
179 "reselect": "^4.0.0",
180 "sass": "^1.37.5",
181 "simplebar-react": "^2.3.0",
182 "styled": "^1.0.0",
183 "styled-components": "^5.2.1",
184 "toastr": "^2.1.4",
185 "typescript": "^4.0.2",
186 "universal-cookie": "^4.0.4"
187 },
188 "devDependencies": {
189 "@typescript-eslint/eslint-plugin": "^2.27.0",
190 "@typescript-eslint/parser": "^2.27.0",
191 "@typescript-eslint/typescript-estree": "^4.15.2",
192 "eslint-config-prettier": "^6.10.1",
193 "eslint-plugin-prettier": "^3.1.2",
194 "husky": "^4.2.5",
195 "lint-staged": "^10.1.3",
196 "prettier": "^1.19.1",
197 "react-test-renderer": "^16.13.1",
198 "redux-devtools-extension": "^2.13.8",
199 "redux-mock-store": "^1.5.4"
200 },
201 "scripts": {
202 "start": "react-scripts start",
203 "build": "react-scripts build && mv build ./deploy/build",
204 "build-local": "react-scripts build",
205 "test": "react-scripts test",
206 "eject": "react-scripts eject"
207 },
208 "eslintConfig": {
209 "extends": "react-app"
210 },
211 "husky": {
212 "hooks": {
213 "pre-commit": "lint-staged"
214 }
215 },
216 "lint-staged": {
217 "*.{js,ts,tsx}": [
218 "eslint --fix"
219 ]
220 },
221 "browserslist": {
222 "production": [
223 ">0.2%",
224 "not dead",
225 "not op_mini all"
226 ],
227 "development": [
228 "last 1 chrome version",
229 "last 1 firefox version",
230 "last 1 safari version"
231 ]
232 }
233}
234ANSWER
Answered 2022-Mar-16 at 07:01First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".
January 11, 2022 Final brownout.
This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.
Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.
As noted by Jörg W Mittag:
There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".
Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.
The permanent shutdown is not until March 15th.
For GitHub Actions:
As in actions/checkout issue 14, you can add as a first step:
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55 {
56 "name": "stackstream-fe",
57 "version": "1.0.0",
58 "authors": [
59 "fayyaznofal@gmail.com"
60 ],
61 "private": true,
62 "dependencies": {
63 "@fortawesome/fontawesome-svg-core": "^1.2.34",
64 "@fortawesome/free-solid-svg-icons": "^5.15.2",
65 "@fortawesome/react-fontawesome": "^0.1.14",
66 "@fullcalendar/bootstrap": "^5.5.0",
67 "@fullcalendar/core": "^5.5.0",
68 "@fullcalendar/daygrid": "^5.5.0",
69 "@fullcalendar/interaction": "^5.5.0",
70 "@fullcalendar/react": "^5.5.0",
71 "@lourenci/react-kanban": "^2.1.0",
72 "@redux-saga/simple-saga-monitor": "^1.1.2",
73 "@testing-library/jest-dom": "^5.11.9",
74 "@testing-library/react": "^11.2.3",
75 "@testing-library/user-event": "^12.6.0",
76 "@toast-ui/react-chart": "^1.0.2",
77 "@types/jest": "^26.0.14",
78 "@types/node": "^14.10.3",
79 "@types/react": "^16.9.49",
80 "@types/react-dom": "^16.9.8",
81 "@vtaits/react-color-picker": "^0.1.1",
82 "apexcharts": "^3.23.1",
83 "availity-reactstrap-validation": "^2.7.0",
84 "axios": "^0.21.1",
85 "axios-mock-adapter": "^1.19.0",
86 "axios-progress-bar": "^1.2.0",
87 "bootstrap": "^5.0.0-beta2",
88 "chart.js": "^2.9.4",
89 "chartist": "^0.11.4",
90 "classnames": "^2.2.6",
91 "components": "^0.1.0",
92 "dotenv": "^8.2.0",
93 "draft-js": "^0.11.7",
94 "echarts": "^4.9.0",
95 "echarts-for-react": "^2.0.16",
96 "firebase": "^8.2.3",
97 "google-maps-react": "^2.0.6",
98 "history": "^4.10.1",
99 "i": "^0.3.6",
100 "i18next": "^19.8.4",
101 "i18next-browser-languagedetector": "^6.0.1",
102 "jsonwebtoken": "^8.5.1",
103 "leaflet": "^1.7.1",
104 "lodash": "^4.17.21",
105 "lodash.clonedeep": "^4.5.0",
106 "lodash.get": "^4.4.2",
107 "metismenujs": "^1.2.1",
108 "mkdirp": "^1.0.4",
109 "moment": "2.29.1",
110 "moment-timezone": "^0.5.32",
111 "nouislider-react": "^3.3.9",
112 "npm": "^7.6.3",
113 "prop-types": "^15.7.2",
114 "query-string": "^6.14.0",
115 "react": "^16.13.1",
116 "react-apexcharts": "^1.3.7",
117 "react-auth-code-input": "^1.0.0",
118 "react-avatar": "^3.10.0",
119 "react-bootstrap": "^1.5.0",
120 "react-bootstrap-editable": "^0.8.2",
121 "react-bootstrap-sweetalert": "^5.2.0",
122 "react-bootstrap-table-next": "^4.0.3",
123 "react-bootstrap-table2-editor": "^1.4.0",
124 "react-bootstrap-table2-paginator": "^2.1.2",
125 "react-bootstrap-table2-toolkit": "^2.1.3",
126 "react-chartist": "^0.14.3",
127 "react-chartjs-2": "^2.11.1",
128 "react-color": "^2.19.3",
129 "react-confirm-alert": "^2.7.0",
130 "react-content-loader": "^6.0.1",
131 "react-countdown": "^2.3.1",
132 "react-countup": "^4.3.3",
133 "react-cropper": "^2.1.4",
134 "react-data-table-component": "^6.11.8",
135 "react-date-picker": "^8.0.6",
136 "react-datepicker": "^3.4.1",
137 "react-dom": "^16.13.1",
138 "react-draft-wysiwyg": "^1.14.5",
139 "react-drag-listview": "^0.1.8",
140 "react-drawer": "^1.3.4",
141 "react-dropzone": "^11.2.4",
142 "react-dual-listbox": "^2.0.0",
143 "react-facebook-login": "^4.1.1",
144 "react-flatpickr": "^3.10.6",
145 "react-google-login": "^5.2.2",
146 "react-hook-form": "^7.15.2",
147 "react-i18next": "^11.8.5",
148 "react-icons": "^4.2.0",
149 "react-image-lightbox": "^5.1.1",
150 "react-input-mask": "^2.0.4",
151 "react-jvectormap": "^0.0.16",
152 "react-leaflet": "^3.0.5",
153 "react-meta-tags": "^1.0.1",
154 "react-modal-video": "^1.2.6",
155 "react-notifications": "^1.7.2",
156 "react-number-format": "^4.7.3",
157 "react-perfect-scrollbar": "^1.5.8",
158 "react-rangeslider": "^2.2.0",
159 "react-rating": "^2.0.5",
160 "react-rating-tooltip": "^1.1.6",
161 "react-redux": "^7.2.1",
162 "react-responsive-carousel": "^3.2.11",
163 "react-router-dom": "^5.2.0",
164 "react-script": "^2.0.5",
165 "react-scripts": "3.4.3",
166 "react-select": "^4.3.1",
167 "react-sparklines": "^1.7.0",
168 "react-star-ratings": "^2.3.0",
169 "react-super-responsive-table": "^5.2.0",
170 "react-switch": "^6.0.0",
171 "react-table": "^7.6.3",
172 "react-toastify": "^7.0.3",
173 "react-toastr": "^3.0.0",
174 "react-twitter-auth": "0.0.13",
175 "reactstrap": "^8.8.1",
176 "recharts": "^2.0.8",
177 "redux": "^4.0.5",
178 "redux-saga": "^1.1.3",
179 "reselect": "^4.0.0",
180 "sass": "^1.37.5",
181 "simplebar-react": "^2.3.0",
182 "styled": "^1.0.0",
183 "styled-components": "^5.2.1",
184 "toastr": "^2.1.4",
185 "typescript": "^4.0.2",
186 "universal-cookie": "^4.0.4"
187 },
188 "devDependencies": {
189 "@typescript-eslint/eslint-plugin": "^2.27.0",
190 "@typescript-eslint/parser": "^2.27.0",
191 "@typescript-eslint/typescript-estree": "^4.15.2",
192 "eslint-config-prettier": "^6.10.1",
193 "eslint-plugin-prettier": "^3.1.2",
194 "husky": "^4.2.5",
195 "lint-staged": "^10.1.3",
196 "prettier": "^1.19.1",
197 "react-test-renderer": "^16.13.1",
198 "redux-devtools-extension": "^2.13.8",
199 "redux-mock-store": "^1.5.4"
200 },
201 "scripts": {
202 "start": "react-scripts start",
203 "build": "react-scripts build && mv build ./deploy/build",
204 "build-local": "react-scripts build",
205 "test": "react-scripts test",
206 "eject": "react-scripts eject"
207 },
208 "eslintConfig": {
209 "extends": "react-app"
210 },
211 "husky": {
212 "hooks": {
213 "pre-commit": "lint-staged"
214 }
215 },
216 "lint-staged": {
217 "*.{js,ts,tsx}": [
218 "eslint --fix"
219 ]
220 },
221 "browserslist": {
222 "production": [
223 ">0.2%",
224 "not dead",
225 "not op_mini all"
226 ],
227 "development": [
228 "last 1 chrome version",
229 "last 1 firefox version",
230 "last 1 safari version"
231 ]
232 }
233}
234 - name: Fix up git URLs
235 run: echo -e '[url "https://github.com/"]\n insteadOf = "git://github.com/"' >> ~/.gitconfig
236That will change any git://github.com/ into https://github.com/.
For all your repositories, you can set:
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55 {
56 "name": "stackstream-fe",
57 "version": "1.0.0",
58 "authors": [
59 "fayyaznofal@gmail.com"
60 ],
61 "private": true,
62 "dependencies": {
63 "@fortawesome/fontawesome-svg-core": "^1.2.34",
64 "@fortawesome/free-solid-svg-icons": "^5.15.2",
65 "@fortawesome/react-fontawesome": "^0.1.14",
66 "@fullcalendar/bootstrap": "^5.5.0",
67 "@fullcalendar/core": "^5.5.0",
68 "@fullcalendar/daygrid": "^5.5.0",
69 "@fullcalendar/interaction": "^5.5.0",
70 "@fullcalendar/react": "^5.5.0",
71 "@lourenci/react-kanban": "^2.1.0",
72 "@redux-saga/simple-saga-monitor": "^1.1.2",
73 "@testing-library/jest-dom": "^5.11.9",
74 "@testing-library/react": "^11.2.3",
75 "@testing-library/user-event": "^12.6.0",
76 "@toast-ui/react-chart": "^1.0.2",
77 "@types/jest": "^26.0.14",
78 "@types/node": "^14.10.3",
79 "@types/react": "^16.9.49",
80 "@types/react-dom": "^16.9.8",
81 "@vtaits/react-color-picker": "^0.1.1",
82 "apexcharts": "^3.23.1",
83 "availity-reactstrap-validation": "^2.7.0",
84 "axios": "^0.21.1",
85 "axios-mock-adapter": "^1.19.0",
86 "axios-progress-bar": "^1.2.0",
87 "bootstrap": "^5.0.0-beta2",
88 "chart.js": "^2.9.4",
89 "chartist": "^0.11.4",
90 "classnames": "^2.2.6",
91 "components": "^0.1.0",
92 "dotenv": "^8.2.0",
93 "draft-js": "^0.11.7",
94 "echarts": "^4.9.0",
95 "echarts-for-react": "^2.0.16",
96 "firebase": "^8.2.3",
97 "google-maps-react": "^2.0.6",
98 "history": "^4.10.1",
99 "i": "^0.3.6",
100 "i18next": "^19.8.4",
101 "i18next-browser-languagedetector": "^6.0.1",
102 "jsonwebtoken": "^8.5.1",
103 "leaflet": "^1.7.1",
104 "lodash": "^4.17.21",
105 "lodash.clonedeep": "^4.5.0",
106 "lodash.get": "^4.4.2",
107 "metismenujs": "^1.2.1",
108 "mkdirp": "^1.0.4",
109 "moment": "2.29.1",
110 "moment-timezone": "^0.5.32",
111 "nouislider-react": "^3.3.9",
112 "npm": "^7.6.3",
113 "prop-types": "^15.7.2",
114 "query-string": "^6.14.0",
115 "react": "^16.13.1",
116 "react-apexcharts": "^1.3.7",
117 "react-auth-code-input": "^1.0.0",
118 "react-avatar": "^3.10.0",
119 "react-bootstrap": "^1.5.0",
120 "react-bootstrap-editable": "^0.8.2",
121 "react-bootstrap-sweetalert": "^5.2.0",
122 "react-bootstrap-table-next": "^4.0.3",
123 "react-bootstrap-table2-editor": "^1.4.0",
124 "react-bootstrap-table2-paginator": "^2.1.2",
125 "react-bootstrap-table2-toolkit": "^2.1.3",
126 "react-chartist": "^0.14.3",
127 "react-chartjs-2": "^2.11.1",
128 "react-color": "^2.19.3",
129 "react-confirm-alert": "^2.7.0",
130 "react-content-loader": "^6.0.1",
131 "react-countdown": "^2.3.1",
132 "react-countup": "^4.3.3",
133 "react-cropper": "^2.1.4",
134 "react-data-table-component": "^6.11.8",
135 "react-date-picker": "^8.0.6",
136 "react-datepicker": "^3.4.1",
137 "react-dom": "^16.13.1",
138 "react-draft-wysiwyg": "^1.14.5",
139 "react-drag-listview": "^0.1.8",
140 "react-drawer": "^1.3.4",
141 "react-dropzone": "^11.2.4",
142 "react-dual-listbox": "^2.0.0",
143 "react-facebook-login": "^4.1.1",
144 "react-flatpickr": "^3.10.6",
145 "react-google-login": "^5.2.2",
146 "react-hook-form": "^7.15.2",
147 "react-i18next": "^11.8.5",
148 "react-icons": "^4.2.0",
149 "react-image-lightbox": "^5.1.1",
150 "react-input-mask": "^2.0.4",
151 "react-jvectormap": "^0.0.16",
152 "react-leaflet": "^3.0.5",
153 "react-meta-tags": "^1.0.1",
154 "react-modal-video": "^1.2.6",
155 "react-notifications": "^1.7.2",
156 "react-number-format": "^4.7.3",
157 "react-perfect-scrollbar": "^1.5.8",
158 "react-rangeslider": "^2.2.0",
159 "react-rating": "^2.0.5",
160 "react-rating-tooltip": "^1.1.6",
161 "react-redux": "^7.2.1",
162 "react-responsive-carousel": "^3.2.11",
163 "react-router-dom": "^5.2.0",
164 "react-script": "^2.0.5",
165 "react-scripts": "3.4.3",
166 "react-select": "^4.3.1",
167 "react-sparklines": "^1.7.0",
168 "react-star-ratings": "^2.3.0",
169 "react-super-responsive-table": "^5.2.0",
170 "react-switch": "^6.0.0",
171 "react-table": "^7.6.3",
172 "react-toastify": "^7.0.3",
173 "react-toastr": "^3.0.0",
174 "react-twitter-auth": "0.0.13",
175 "reactstrap": "^8.8.1",
176 "recharts": "^2.0.8",
177 "redux": "^4.0.5",
178 "redux-saga": "^1.1.3",
179 "reselect": "^4.0.0",
180 "sass": "^1.37.5",
181 "simplebar-react": "^2.3.0",
182 "styled": "^1.0.0",
183 "styled-components": "^5.2.1",
184 "toastr": "^2.1.4",
185 "typescript": "^4.0.2",
186 "universal-cookie": "^4.0.4"
187 },
188 "devDependencies": {
189 "@typescript-eslint/eslint-plugin": "^2.27.0",
190 "@typescript-eslint/parser": "^2.27.0",
191 "@typescript-eslint/typescript-estree": "^4.15.2",
192 "eslint-config-prettier": "^6.10.1",
193 "eslint-plugin-prettier": "^3.1.2",
194 "husky": "^4.2.5",
195 "lint-staged": "^10.1.3",
196 "prettier": "^1.19.1",
197 "react-test-renderer": "^16.13.1",
198 "redux-devtools-extension": "^2.13.8",
199 "redux-mock-store": "^1.5.4"
200 },
201 "scripts": {
202 "start": "react-scripts start",
203 "build": "react-scripts build && mv build ./deploy/build",
204 "build-local": "react-scripts build",
205 "test": "react-scripts test",
206 "eject": "react-scripts eject"
207 },
208 "eslintConfig": {
209 "extends": "react-app"
210 },
211 "husky": {
212 "hooks": {
213 "pre-commit": "lint-staged"
214 }
215 },
216 "lint-staged": {
217 "*.{js,ts,tsx}": [
218 "eslint --fix"
219 ]
220 },
221 "browserslist": {
222 "production": [
223 ">0.2%",
224 "not dead",
225 "not op_mini all"
226 ],
227 "development": [
228 "last 1 chrome version",
229 "last 1 firefox version",
230 "last 1 safari version"
231 ]
232 }
233}
234 - name: Fix up git URLs
235 run: echo -e '[url "https://github.com/"]\n insteadOf = "git://github.com/"' >> ~/.gitconfig
236git config --global url."https://github.com/".insteadOf git://github.com/
237You can also use SSH, but GitHub Security reminds us that, as of March 15th, 2022, GitHub stopped accepting DSA keys. RSA keys uploaded after Nov 2, 2021 will work only with SHA-2 signatures.
The deprecated MACs, ciphers, and unencrypted Git protocol are permanently disabled.
So this (with the right key) would work:
1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error:
6 The unauthenticated git protocol on port 9418 is no longer supported.
7 - name: Installing modules
8 run: yarn install
9 steps:
10 - name: Checkout
11 uses: actions/checkout@v2
12
13 - id: vars
14 run: |
15 if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream" ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17 - uses: pCYSl5EDgo/cat@master
18 id: slack
19 with:
20 path: .github/workflows/slack.txt
21
22 - name: Slack Start Notification
23 uses: 8398a7/action-slack@v3
24 env:
25 SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26 ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27 COLOR: good
28 STATUS: '`Started`'
29 with:
30 status: custom
31 fields: workflow,job,commit,repo,ref,author,took
32 custom_payload: |
33 ${{ steps.slack.outputs.text }}
34
35 - name: Installing modules
36 env:
37 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38 run: yarn install
39
40 - name: Create Frontend Build
41 env:
42 REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43 run: yarn build
44
45 - name: Deploy to Frontend Server DEV
46 if: ${{ contains(github.ref, 'dev') }}
47 uses: easingthemes/ssh-deploy@v2.1.5
48 env:
49 SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50 ARGS: '-rltgoDzvO --delete'
51 SOURCE: 'deploy/'
52 REMOTE_HOST: ${{ secrets.DEV_HOST }}
53 REMOTE_USER: plyfolio-dev
54 TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55 {
56 "name": "stackstream-fe",
57 "version": "1.0.0",
58 "authors": [
59 "fayyaznofal@gmail.com"
60 ],
61 "private": true,
62 "dependencies": {
63 "@fortawesome/fontawesome-svg-core": "^1.2.34",
64 "@fortawesome/free-solid-svg-icons": "^5.15.2",
65 "@fortawesome/react-fontawesome": "^0.1.14",
66 "@fullcalendar/bootstrap": "^5.5.0",
67 "@fullcalendar/core": "^5.5.0",
68 "@fullcalendar/daygrid": "^5.5.0",
69 "@fullcalendar/interaction": "^5.5.0",
70 "@fullcalendar/react": "^5.5.0",
71 "@lourenci/react-kanban": "^2.1.0",
72 "@redux-saga/simple-saga-monitor": "^1.1.2",
73 "@testing-library/jest-dom": "^5.11.9",
74 "@testing-library/react": "^11.2.3",
75 "@testing-library/user-event": "^12.6.0",
76 "@toast-ui/react-chart": "^1.0.2",
77 "@types/jest": "^26.0.14",
78 "@types/node": "^14.10.3",
79 "@types/react": "^16.9.49",
80 "@types/react-dom": "^16.9.8",
81 "@vtaits/react-color-picker": "^0.1.1",
82 "apexcharts": "^3.23.1",
83 "availity-reactstrap-validation": "^2.7.0",
84 "axios": "^0.21.1",
85 "axios-mock-adapter": "^1.19.0",
86 "axios-progress-bar": "^1.2.0",
87 "bootstrap": "^5.0.0-beta2",
88 "chart.js": "^2.9.4",
89 "chartist": "^0.11.4",
90 "classnames": "^2.2.6",
91 "components": "^0.1.0",
92 "dotenv": "^8.2.0",
93 "draft-js": "^0.11.7",
94 "echarts": "^4.9.0",
95 "echarts-for-react": "^2.0.16",
96 "firebase": "^8.2.3",
97 "google-maps-react": "^2.0.6",
98 "history": "^4.10.1",
99 "i": "^0.3.6",
100 "i18next": "^19.8.4",
101 "i18next-browser-languagedetector": "^6.0.1",
102 "jsonwebtoken": "^8.5.1",
103 "leaflet": "^1.7.1",
104 "lodash": "^4.17.21",
105 "lodash.clonedeep": "^4.5.0",
106 "lodash.get": "^4.4.2",
107 "metismenujs": "^1.2.1",
108 "mkdirp": "^1.0.4",
109 "moment": "2.29.1",
110 "moment-timezone": "^0.5.32",
111 "nouislider-react": "^3.3.9",
112 "npm": "^7.6.3",
113 "prop-types": "^15.7.2",
114 "query-string": "^6.14.0",
115 "react": "^16.13.1",
116 "react-apexcharts": "^1.3.7",
117 "react-auth-code-input": "^1.0.0",
118 "react-avatar": "^3.10.0",
119 "react-bootstrap": "^1.5.0",
120 "react-bootstrap-editable": "^0.8.2",
121 "react-bootstrap-sweetalert": "^5.2.0",
122 "react-bootstrap-table-next": "^4.0.3",
123 "react-bootstrap-table2-editor": "^1.4.0",
124 "react-bootstrap-table2-paginator": "^2.1.2",
125 "react-bootstrap-table2-toolkit": "^2.1.3",
126 "react-chartist": "^0.14.3",
127 "react-chartjs-2": "^2.11.1",
128 "react-color": "^2.19.3",
129 "react-confirm-alert": "^2.7.0",
130 "react-content-loader": "^6.0.1",
131 "react-countdown": "^2.3.1",
132 "react-countup": "^4.3.3",
133 "react-cropper": "^2.1.4",
134 "react-data-table-component": "^6.11.8",
135 "react-date-picker": "^8.0.6",
136 "react-datepicker": "^3.4.1",
137 "react-dom": "^16.13.1",
138 "react-draft-wysiwyg": "^1.14.5",
139 "react-drag-listview": "^0.1.8",
140 "react-drawer": "^1.3.4",
141 "react-dropzone": "^11.2.4",
142 "react-dual-listbox": "^2.0.0",
143 "react-facebook-login": "^4.1.1",
144 "react-flatpickr": "^3.10.6",
145 "react-google-login": "^5.2.2",
146 "react-hook-form": "^7.15.2",
147 "react-i18next": "^11.8.5",
148 "react-icons": "^4.2.0",
149 "react-image-lightbox": "^5.1.1",
150 "react-input-mask": "^2.0.4",
151 "react-jvectormap": "^0.0.16",
152 "react-leaflet": "^3.0.5",
153 "react-meta-tags": "^1.0.1",
154 "react-modal-video": "^1.2.6",
155 "react-notifications": "^1.7.2",
156 "react-number-format": "^4.7.3",
157 "react-perfect-scrollbar": "^1.5.8",
158 "react-rangeslider": "^2.2.0",
159 "react-rating": "^2.0.5",
160 "react-rating-tooltip": "^1.1.6",
161 "react-redux": "^7.2.1",
162 "react-responsive-carousel": "^3.2.11",
163 "react-router-dom": "^5.2.0",
164 "react-script": "^2.0.5",
165 "react-scripts": "3.4.3",
166 "react-select": "^4.3.1",
167 "react-sparklines": "^1.7.0",
168 "react-star-ratings": "^2.3.0",
169 "react-super-responsive-table": "^5.2.0",
170 "react-switch": "^6.0.0",
171 "react-table": "^7.6.3",
172 "react-toastify": "^7.0.3",
173 "react-toastr": "^3.0.0",
174 "react-twitter-auth": "0.0.13",
175 "reactstrap": "^8.8.1",
176 "recharts": "^2.0.8",
177 "redux": "^4.0.5",
178 "redux-saga": "^1.1.3",
179 "reselect": "^4.0.0",
180 "sass": "^1.37.5",
181 "simplebar-react": "^2.3.0",
182 "styled": "^1.0.0",
183 "styled-components": "^5.2.1",
184 "toastr": "^2.1.4",
185 "typescript": "^4.0.2",
186 "universal-cookie": "^4.0.4"
187 },
188 "devDependencies": {
189 "@typescript-eslint/eslint-plugin": "^2.27.0",
190 "@typescript-eslint/parser": "^2.27.0",
191 "@typescript-eslint/typescript-estree": "^4.15.2",
192 "eslint-config-prettier": "^6.10.1",
193 "eslint-plugin-prettier": "^3.1.2",
194 "husky": "^4.2.5",
195 "lint-staged": "^10.1.3",
196 "prettier": "^1.19.1",
197 "react-test-renderer": "^16.13.1",
198 "redux-devtools-extension": "^2.13.8",
199 "redux-mock-store": "^1.5.4"
200 },
201 "scripts": {
202 "start": "react-scripts start",
203 "build": "react-scripts build && mv build ./deploy/build",
204 "build-local": "react-scripts build",
205 "test": "react-scripts test",
206 "eject": "react-scripts eject"
207 },
208 "eslintConfig": {
209 "extends": "react-app"
210 },
211 "husky": {
212 "hooks": {
213 "pre-commit": "lint-staged"
214 }
215 },
216 "lint-staged": {
217 "*.{js,ts,tsx}": [
218 "eslint --fix"
219 ]
220 },
221 "browserslist": {
222 "production": [
223 ">0.2%",
224 "not dead",
225 "not op_mini all"
226 ],
227 "development": [
228 "last 1 chrome version",
229 "last 1 firefox version",
230 "last 1 safari version"
231 ]
232 }
233}
234 - name: Fix up git URLs
235 run: echo -e '[url "https://github.com/"]\n insteadOf = "git://github.com/"' >> ~/.gitconfig
236git config --global url."https://github.com/".insteadOf git://github.com/
237git config --global url."git@github.com:".insteadOf git://github.com/
238That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).
QUESTION
Consider using the "jsdom" test environment
Asked 2022-Mar-23 at 20:23I have this simple test:
1import React from 'react'
2import { render } from '@testing-library/react'
3
4import Button from '.'
5
6describe('Button', () => {
7 it('renders button without crashing', () => {
8 const label = 'test'
9
10 render(<Button label={label} />)
11 })
12})
13
14And I have a jest.config.json with this content
1import React from 'react'
2import { render } from '@testing-library/react'
3
4import Button from '.'
5
6describe('Button', () => {
7 it('renders button without crashing', () => {
8 const label = 'test'
9
10 render(<Button label={label} />)
11 })
12})
13
14{
15 "setupFilesAfterEnv": [
16 "<rootDir>/lib/settings/setupTests.ts"
17 ]
18}
19And on my setupTests.ts I have
1import React from 'react'
2import { render } from '@testing-library/react'
3
4import Button from '.'
5
6describe('Button', () => {
7 it('renders button without crashing', () => {
8 const label = 'test'
9
10 render(<Button label={label} />)
11 })
12})
13
14{
15 "setupFilesAfterEnv": [
16 "<rootDir>/lib/settings/setupTests.ts"
17 ]
18}
19import '@testing-library/jest-dom'
20When I run npm run test (which just run jest), I got the following error:
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.
What I am doing wrong? This used to work before an upgrade.
ANSWER
Answered 2021-Oct-25 at 05:17In your package.json, or jest.config.js/jest.config.js, change the value of the testEnvironment property to jsdom.
1import React from 'react'
2import { render } from '@testing-library/react'
3
4import Button from '.'
5
6describe('Button', () => {
7 it('renders button without crashing', () => {
8 const label = 'test'
9
10 render(<Button label={label} />)
11 })
12})
13
14{
15 "setupFilesAfterEnv": [
16 "<rootDir>/lib/settings/setupTests.ts"
17 ]
18}
19import '@testing-library/jest-dom'
20"jest":{
21 "testEnvironment": "jsdom"
22}
23
jest.config.[js|ts]
1import React from 'react'
2import { render } from '@testing-library/react'
3
4import Button from '.'
5
6describe('Button', () => {
7 it('renders button without crashing', () => {
8 const label = 'test'
9
10 render(<Button label={label} />)
11 })
12})
13
14{
15 "setupFilesAfterEnv": [
16 "<rootDir>/lib/settings/setupTests.ts"
17 ]
18}
19import '@testing-library/jest-dom'
20"jest":{
21 "testEnvironment": "jsdom"
22}
23{
24 "testEnvironment": "jsdom"
25}
26
Why?
By default, jest uses the node testEnvironment. This essentially makes any tests meant for a browser environment invalid.
jsdom is an implementation of a browser environment, which supports these types of UI tests.
QUESTION
Making a JSX syntax for a MockComponent and have it typed with typescript
Asked 2022-Mar-20 at 22:37Wondering if anybody has some good suggestions on how to crack this. Got this test helper utils I have added some types to:
1import { jest } from '@jest/globals'
2import React from 'react'
3
4// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
5export function mockComponent(moduleName: string, propOverrideFn = (props: Record<string, any>) => ({})) {
6 const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
7 const CustomizedComponent = (props: Record<string, any>) => {
8 return React.createElement(
9 'CustomizedComponent',
10 {
11 ...props,
12 ...propOverrideFn(props),
13 },
14 props.children
15 )
16 }
17 CustomizedComponent.propTypes = RealComponent.propTypes
18
19 return CustomizedComponent
20}
21So currently I can call it like this
1import { jest } from '@jest/globals'
2import React from 'react'
3
4// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
5export function mockComponent(moduleName: string, propOverrideFn = (props: Record<string, any>) => ({})) {
6 const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
7 const CustomizedComponent = (props: Record<string, any>) => {
8 return React.createElement(
9 'CustomizedComponent',
10 {
11 ...props,
12 ...propOverrideFn(props),
13 },
14 props.children
15 )
16 }
17 CustomizedComponent.propTypes = RealComponent.propTypes
18
19 return CustomizedComponent
20}
21jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
22 return mockComponent('react-native/Libraries/Components/Touchable/TouchableOpacity', (props) => {
23 return {
24 onPress: props.disabled ? () => {} : props.onPress
25 }
26 })
27})
28But I would like to be able to call it more like
1import { jest } from '@jest/globals'
2import React from 'react'
3
4// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
5export function mockComponent(moduleName: string, propOverrideFn = (props: Record<string, any>) => ({})) {
6 const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
7 const CustomizedComponent = (props: Record<string, any>) => {
8 return React.createElement(
9 'CustomizedComponent',
10 {
11 ...props,
12 ...propOverrideFn(props),
13 },
14 props.children
15 )
16 }
17 CustomizedComponent.propTypes = RealComponent.propTypes
18
19 return CustomizedComponent
20}
21jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
22 return mockComponent('react-native/Libraries/Components/Touchable/TouchableOpacity', (props) => {
23 return {
24 onPress: props.disabled ? () => {} : props.onPress
25 }
26 })
27})
28
29jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
30 return <MockComponent
31 module='TouchableOpacity'
32 onPress={props => props.disabled ? () => {} : props.onPress}
33 />
34})
35
36or
1import { jest } from '@jest/globals'
2import React from 'react'
3
4// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
5export function mockComponent(moduleName: string, propOverrideFn = (props: Record<string, any>) => ({})) {
6 const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
7 const CustomizedComponent = (props: Record<string, any>) => {
8 return React.createElement(
9 'CustomizedComponent',
10 {
11 ...props,
12 ...propOverrideFn(props),
13 },
14 props.children
15 )
16 }
17 CustomizedComponent.propTypes = RealComponent.propTypes
18
19 return CustomizedComponent
20}
21jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
22 return mockComponent('react-native/Libraries/Components/Touchable/TouchableOpacity', (props) => {
23 return {
24 onPress: props.disabled ? () => {} : props.onPress
25 }
26 })
27})
28
29jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
30 return <MockComponent
31 module='TouchableOpacity'
32 onPress={props => props.disabled ? () => {} : props.onPress}
33 />
34})
35
36jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
37 return <MockComponent
38 module='TouchableOpacity'
39 propOverride={props => ({onPress: props.disabled ? () => {} : props.onPress, ...props})}
40 />
41})
42ANSWER
Answered 2022-Mar-20 at 22:37If you look at React without JSX, you'll see that the XML-inspired syntax (<MockComponent />) is just short for React.createElement('MockComponent').
Right now, if you renamed mockComponent to MockComponent and tried using the angle bracket syntax, the first issue is that your function receives two arguments. React components are either class components that take one constructor argument (props) or functional components that take one argument (again, props). The second issue is that your function returns a React functional component, when it needs to return a rendered React element.
One way to fix this issue is to convert mockComponent into a React functional component and make module and propOverride props of the FC.
1import { jest } from '@jest/globals'
2import React from 'react'
3
4// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
5export function mockComponent(moduleName: string, propOverrideFn = (props: Record<string, any>) => ({})) {
6 const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
7 const CustomizedComponent = (props: Record<string, any>) => {
8 return React.createElement(
9 'CustomizedComponent',
10 {
11 ...props,
12 ...propOverrideFn(props),
13 },
14 props.children
15 )
16 }
17 CustomizedComponent.propTypes = RealComponent.propTypes
18
19 return CustomizedComponent
20}
21jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
22 return mockComponent('react-native/Libraries/Components/Touchable/TouchableOpacity', (props) => {
23 return {
24 onPress: props.disabled ? () => {} : props.onPress
25 }
26 })
27})
28
29jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
30 return <MockComponent
31 module='TouchableOpacity'
32 onPress={props => props.disabled ? () => {} : props.onPress}
33 />
34})
35
36jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
37 return <MockComponent
38 module='TouchableOpacity'
39 propOverride={props => ({onPress: props.disabled ? () => {} : props.onPress, ...props})}
40 />
41})
42// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
43export function MockComponent(props) {
44 const { moduleName, propOverrideFn, ...customComponentProps } = props;
45
46 const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
47 const CustomizedComponent = (props: Record<string, any>) => {
48 return React.createElement(
49 'CustomizedComponent',
50 {
51 ...props,
52 ...propOverrideFn(props),
53 },
54 props.children
55 )
56 }
57 CustomizedComponent.propTypes = RealComponent.propTypes
58
59 return <CustomizedComponent {...customComponentProps} />
60}
61The differences are subtle but important. Here I modified MockComponent to take in a singular prop argument to be compatible with React.createElement(). This leads to the issue of how to differentiate props that are meant for the CustomizedComponent and what used to be arguments for mockComponent(). Here, I use the JavaScript destructuring and spread operators to separate module and propOverride from the props intended from CustomizedComponent.
Lastly, I use the JSX spread syntax to pass the arbitrary props intended for CustomizedComponent into CustomizedComponent, and I use angle brackets to render it (instead of returning a function).
I'll leave as an exercise for you to come up with the appropriate TypeScript definition for MockComponent's props. You can simply define it as the union of Record<string, any> and module and propOverride. However, you can get fancy and use a template definition so MockComponent<Toolbar> is a union of module and propOverride and Toolbar's props.
Oh, and I almost forgot. Your Jest call would look like
1import { jest } from '@jest/globals'
2import React from 'react'
3
4// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
5export function mockComponent(moduleName: string, propOverrideFn = (props: Record<string, any>) => ({})) {
6 const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
7 const CustomizedComponent = (props: Record<string, any>) => {
8 return React.createElement(
9 'CustomizedComponent',
10 {
11 ...props,
12 ...propOverrideFn(props),
13 },
14 props.children
15 )
16 }
17 CustomizedComponent.propTypes = RealComponent.propTypes
18
19 return CustomizedComponent
20}
21jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
22 return mockComponent('react-native/Libraries/Components/Touchable/TouchableOpacity', (props) => {
23 return {
24 onPress: props.disabled ? () => {} : props.onPress
25 }
26 })
27})
28
29jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
30 return <MockComponent
31 module='TouchableOpacity'
32 onPress={props => props.disabled ? () => {} : props.onPress}
33 />
34})
35
36jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
37 return <MockComponent
38 module='TouchableOpacity'
39 propOverride={props => ({onPress: props.disabled ? () => {} : props.onPress, ...props})}
40 />
41})
42// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
43export function MockComponent(props) {
44 const { moduleName, propOverrideFn, ...customComponentProps } = props;
45
46 const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
47 const CustomizedComponent = (props: Record<string, any>) => {
48 return React.createElement(
49 'CustomizedComponent',
50 {
51 ...props,
52 ...propOverrideFn(props),
53 },
54 props.children
55 )
56 }
57 CustomizedComponent.propTypes = RealComponent.propTypes
58
59 return <CustomizedComponent {...customComponentProps} />
60}
61jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
62 (props) => {
63 return <MockComponent
64 module='TouchableOpacity'
65 onPress={props => props.disabled ? () => {} : props.onPress}
66 {...props}
67 />
68 }
69})
70QUESTION
ESlint - Error: Must use import to load ES Module
Asked 2022-Mar-17 at 12:13I am currently setting up a boilerplate with React, Typescript, styled components, webpack etc. and I am getting an error when trying to run eslint:
Error: Must use import to load ES Module
Here is a more verbose version of the error:
1/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
2 0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
3require() of ES modules is not supported.
4require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
5Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
6The error occurs in every single one of my .js and .ts/ .tsx files where I only use import or the file doesn't even have an import at all. I understand what the error is saying but I have no idea why it is being thrown when in fact I only use imports or even no imports at all in some files.
Here is my package.json where I trigger the linter from using npm run lint:eslint:quiet:
1/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
2 0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
3require() of ES modules is not supported.
4require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
5Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
6{
7 "name": "my-react-boilerplate",
8 "version": "1.0.0",
9 "description": "",
10 "main": "index.tsx",
11 "directories": {
12 "test": "test"
13 },
14 "engines": {
15 "node": ">=14.0.0"
16 },
17 "type": "module",
18 "scripts": {
19 "build": "webpack --config webpack.prod.js",
20 "dev": "webpack serve --config webpack.dev.js",
21 "lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",
22 "lint:css": "stylelint './src/**/*.{js,ts,tsx}'",
23 "lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet",
24 "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern",
25 "lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix",
26 "test": "cross-env NODE_ENV=test jest --coverage",
27 "test:watch": "cross-env NODE_ENV=test jest --watchAll",
28 "typecheck": "tsc --noEmit",
29 "precommit": "npm run lint"
30 },
31 "lint-staged": {
32 "*.{ts,tsx,js,jsx}": [
33 "npm run lint:eslint:fix",
34 "git add --force"
35 ],
36 "*.{md,json}": [
37 "prettier --write",
38 "git add --force"
39 ]
40 },
41 "husky": {
42 "hooks": {
43 "pre-commit": "npx lint-staged && npm run typecheck"
44 }
45 },
46 "resolutions": {
47 "styled-components": "^5"
48 },
49 "author": "",
50 "license": "ISC",
51 "devDependencies": {
52 "@babel/core": "^7.5.4",
53 "@babel/plugin-proposal-class-properties": "^7.5.0",
54 "@babel/preset-env": "^7.5.4",
55 "@babel/preset-react": "^7.0.0",
56 "@types/history": "^4.7.6",
57 "@types/react": "^17.0.29",
58 "@types/react-dom": "^17.0.9",
59 "@types/react-router": "^5.1.17",
60 "@types/react-router-dom": "^5.1.5",
61 "@types/styled-components": "^5.1.15",
62 "@typescript-eslint/eslint-plugin": "^5.0.0",
63 "babel-cli": "^6.26.0",
64 "babel-eslint": "^10.0.2",
65 "babel-loader": "^8.0.0-beta.6",
66 "babel-polyfill": "^6.26.0",
67 "babel-preset-env": "^1.7.0",
68 "babel-preset-react": "^6.24.1",
69 "babel-preset-stage-2": "^6.24.1",
70 "clean-webpack-plugin": "^4.0.0",
71 "dotenv-webpack": "^7.0.3",
72 "error-overlay-webpack-plugin": "^1.0.0",
73 "eslint": "^8.0.0",
74 "eslint-config-airbnb": "^18.2.0",
75 "eslint-config-prettier": "^8.3.0",
76 "eslint-config-with-prettier": "^6.0.0",
77 "eslint-plugin-compat": "^3.3.0",
78 "eslint-plugin-import": "^2.25.2",
79 "eslint-plugin-jsx-a11y": "^6.2.3",
80 "eslint-plugin-prettier": "^4.0.0",
81 "eslint-plugin-react": "^7.14.2",
82 "eslint-plugin-react-hooks": "^4.2.0",
83 "extract-text-webpack-plugin": "^3.0.2",
84 "file-loader": "^6.2.0",
85 "html-webpack-plugin": "^5.3.2",
86 "husky": "^7.0.2",
87 "prettier": "^2.4.1",
88 "raw-loader": "^4.0.2",
89 "style-loader": "^3.3.0",
90 "stylelint": "^13.13.1",
91 "stylelint-config-recommended": "^5.0.0",
92 "stylelint-config-styled-components": "^0.1.1",
93 "stylelint-processor-styled-components": "^1.10.0",
94 "ts-loader": "^9.2.6",
95 "tslint": "^6.1.3",
96 "typescript": "^4.4.4",
97 "url-loader": "^4.1.1",
98 "webpack": "^5.58.2",
99 "webpack-cli": "^4.2.0",
100 "webpack-dev-server": "^4.3.1",
101 "webpack-merge": "^5.3.0"
102 },
103 "dependencies": {
104 "history": "^4.10.0",
105 "process": "^0.11.10",
106 "react": "^17.0.1",
107 "react-dom": "^17.0.1",
108 "react-router-dom": "^5.2.0",
109 "styled-components": "^5.2.1"
110 }
111}
112Here is my .eslintrc file:
1/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
2 0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
3require() of ES modules is not supported.
4require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
5Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
6{
7 "name": "my-react-boilerplate",
8 "version": "1.0.0",
9 "description": "",
10 "main": "index.tsx",
11 "directories": {
12 "test": "test"
13 },
14 "engines": {
15 "node": ">=14.0.0"
16 },
17 "type": "module",
18 "scripts": {
19 "build": "webpack --config webpack.prod.js",
20 "dev": "webpack serve --config webpack.dev.js",
21 "lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",
22 "lint:css": "stylelint './src/**/*.{js,ts,tsx}'",
23 "lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet",
24 "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern",
25 "lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix",
26 "test": "cross-env NODE_ENV=test jest --coverage",
27 "test:watch": "cross-env NODE_ENV=test jest --watchAll",
28 "typecheck": "tsc --noEmit",
29 "precommit": "npm run lint"
30 },
31 "lint-staged": {
32 "*.{ts,tsx,js,jsx}": [
33 "npm run lint:eslint:fix",
34 "git add --force"
35 ],
36 "*.{md,json}": [
37 "prettier --write",
38 "git add --force"
39 ]
40 },
41 "husky": {
42 "hooks": {
43 "pre-commit": "npx lint-staged && npm run typecheck"
44 }
45 },
46 "resolutions": {
47 "styled-components": "^5"
48 },
49 "author": "",
50 "license": "ISC",
51 "devDependencies": {
52 "@babel/core": "^7.5.4",
53 "@babel/plugin-proposal-class-properties": "^7.5.0",
54 "@babel/preset-env": "^7.5.4",
55 "@babel/preset-react": "^7.0.0",
56 "@types/history": "^4.7.6",
57 "@types/react": "^17.0.29",
58 "@types/react-dom": "^17.0.9",
59 "@types/react-router": "^5.1.17",
60 "@types/react-router-dom": "^5.1.5",
61 "@types/styled-components": "^5.1.15",
62 "@typescript-eslint/eslint-plugin": "^5.0.0",
63 "babel-cli": "^6.26.0",
64 "babel-eslint": "^10.0.2",
65 "babel-loader": "^8.0.0-beta.6",
66 "babel-polyfill": "^6.26.0",
67 "babel-preset-env": "^1.7.0",
68 "babel-preset-react": "^6.24.1",
69 "babel-preset-stage-2": "^6.24.1",
70 "clean-webpack-plugin": "^4.0.0",
71 "dotenv-webpack": "^7.0.3",
72 "error-overlay-webpack-plugin": "^1.0.0",
73 "eslint": "^8.0.0",
74 "eslint-config-airbnb": "^18.2.0",
75 "eslint-config-prettier": "^8.3.0",
76 "eslint-config-with-prettier": "^6.0.0",
77 "eslint-plugin-compat": "^3.3.0",
78 "eslint-plugin-import": "^2.25.2",
79 "eslint-plugin-jsx-a11y": "^6.2.3",
80 "eslint-plugin-prettier": "^4.0.0",
81 "eslint-plugin-react": "^7.14.2",
82 "eslint-plugin-react-hooks": "^4.2.0",
83 "extract-text-webpack-plugin": "^3.0.2",
84 "file-loader": "^6.2.0",
85 "html-webpack-plugin": "^5.3.2",
86 "husky": "^7.0.2",
87 "prettier": "^2.4.1",
88 "raw-loader": "^4.0.2",
89 "style-loader": "^3.3.0",
90 "stylelint": "^13.13.1",
91 "stylelint-config-recommended": "^5.0.0",
92 "stylelint-config-styled-components": "^0.1.1",
93 "stylelint-processor-styled-components": "^1.10.0",
94 "ts-loader": "^9.2.6",
95 "tslint": "^6.1.3",
96 "typescript": "^4.4.4",
97 "url-loader": "^4.1.1",
98 "webpack": "^5.58.2",
99 "webpack-cli": "^4.2.0",
100 "webpack-dev-server": "^4.3.1",
101 "webpack-merge": "^5.3.0"
102 },
103 "dependencies": {
104 "history": "^4.10.0",
105 "process": "^0.11.10",
106 "react": "^17.0.1",
107 "react-dom": "^17.0.1",
108 "react-router-dom": "^5.2.0",
109 "styled-components": "^5.2.1"
110 }
111}
112{
113 "extends": ["airbnb", "prettier"],
114 "parser": "babel-eslint",
115 "plugins": ["prettier", "@typescript-eslint"],
116 "parserOptions": {
117 "ecmaVersion": 8,
118 "ecmaFeatures": {
119 "experimentalObjectRestSpread": true,
120 "impliedStrict": true,
121 "classes": true
122 }
123 },
124 "env": {
125 "browser": true,
126 "node": true,
127 "jest": true
128 },
129 "rules": {
130 "arrow-body-style": ["error", "as-needed"],
131 "class-methods-use-this": 0,
132 "react/jsx-filename-extension": 0,
133 "global-require": 0,
134 "react/destructuring-assignment": 0,
135 "import/named": 2,
136 "linebreak-style": 0,
137 "import/no-dynamic-require": 0,
138 "import/no-named-as-default": 0,
139 "import/no-unresolved": 2,
140 "import/prefer-default-export": 0,
141 "semi": [2, "always"],
142 "max-len": [
143 "error",
144 {
145 "code": 80,
146 "ignoreUrls": true,
147 "ignoreComments": true,
148 "ignoreStrings": true,
149 "ignoreTemplateLiterals": true
150 }
151 ],
152 "new-cap": [
153 2,
154 {
155 "capIsNew": false,
156 "newIsCap": true
157 }
158 ],
159 "no-param-reassign": 0,
160 "no-shadow": 0,
161 "no-tabs": 2,
162 "no-underscore-dangle": 0,
163 "react/forbid-prop-types": [
164 "error",
165 {
166 "forbid": ["any"]
167 }
168 ],
169 "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
170 "react/jsx-no-bind": [
171 "error",
172 {
173 "ignoreRefs": true,
174 "allowArrowFunctions": true,
175 "allowBind": false
176 }
177 ],
178 "react/no-unknown-property": [
179 2,
180 {
181 "ignore": ["itemscope", "itemtype", "itemprop"]
182 }
183 ]
184 }
185}
186And i'm not sure if relevant but also my tsconfig.eslint.json file:
1/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
2 0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
3require() of ES modules is not supported.
4require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
5Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
6{
7 "name": "my-react-boilerplate",
8 "version": "1.0.0",
9 "description": "",
10 "main": "index.tsx",
11 "directories": {
12 "test": "test"
13 },
14 "engines": {
15 "node": ">=14.0.0"
16 },
17 "type": "module",
18 "scripts": {
19 "build": "webpack --config webpack.prod.js",
20 "dev": "webpack serve --config webpack.dev.js",
21 "lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",
22 "lint:css": "stylelint './src/**/*.{js,ts,tsx}'",
23 "lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet",
24 "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern",
25 "lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix",
26 "test": "cross-env NODE_ENV=test jest --coverage",
27 "test:watch": "cross-env NODE_ENV=test jest --watchAll",
28 "typecheck": "tsc --noEmit",
29 "precommit": "npm run lint"
30 },
31 "lint-staged": {
32 "*.{ts,tsx,js,jsx}": [
33 "npm run lint:eslint:fix",
34 "git add --force"
35 ],
36 "*.{md,json}": [
37 "prettier --write",
38 "git add --force"
39 ]
40 },
41 "husky": {
42 "hooks": {
43 "pre-commit": "npx lint-staged && npm run typecheck"
44 }
45 },
46 "resolutions": {
47 "styled-components": "^5"
48 },
49 "author": "",
50 "license": "ISC",
51 "devDependencies": {
52 "@babel/core": "^7.5.4",
53 "@babel/plugin-proposal-class-properties": "^7.5.0",
54 "@babel/preset-env": "^7.5.4",
55 "@babel/preset-react": "^7.0.0",
56 "@types/history": "^4.7.6",
57 "@types/react": "^17.0.29",
58 "@types/react-dom": "^17.0.9",
59 "@types/react-router": "^5.1.17",
60 "@types/react-router-dom": "^5.1.5",
61 "@types/styled-components": "^5.1.15",
62 "@typescript-eslint/eslint-plugin": "^5.0.0",
63 "babel-cli": "^6.26.0",
64 "babel-eslint": "^10.0.2",
65 "babel-loader": "^8.0.0-beta.6",
66 "babel-polyfill": "^6.26.0",
67 "babel-preset-env": "^1.7.0",
68 "babel-preset-react": "^6.24.1",
69 "babel-preset-stage-2": "^6.24.1",
70 "clean-webpack-plugin": "^4.0.0",
71 "dotenv-webpack": "^7.0.3",
72 "error-overlay-webpack-plugin": "^1.0.0",
73 "eslint": "^8.0.0",
74 "eslint-config-airbnb": "^18.2.0",
75 "eslint-config-prettier": "^8.3.0",
76 "eslint-config-with-prettier": "^6.0.0",
77 "eslint-plugin-compat": "^3.3.0",
78 "eslint-plugin-import": "^2.25.2",
79 "eslint-plugin-jsx-a11y": "^6.2.3",
80 "eslint-plugin-prettier": "^4.0.0",
81 "eslint-plugin-react": "^7.14.2",
82 "eslint-plugin-react-hooks": "^4.2.0",
83 "extract-text-webpack-plugin": "^3.0.2",
84 "file-loader": "^6.2.0",
85 "html-webpack-plugin": "^5.3.2",
86 "husky": "^7.0.2",
87 "prettier": "^2.4.1",
88 "raw-loader": "^4.0.2",
89 "style-loader": "^3.3.0",
90 "stylelint": "^13.13.1",
91 "stylelint-config-recommended": "^5.0.0",
92 "stylelint-config-styled-components": "^0.1.1",
93 "stylelint-processor-styled-components": "^1.10.0",
94 "ts-loader": "^9.2.6",
95 "tslint": "^6.1.3",
96 "typescript": "^4.4.4",
97 "url-loader": "^4.1.1",
98 "webpack": "^5.58.2",
99 "webpack-cli": "^4.2.0",
100 "webpack-dev-server": "^4.3.1",
101 "webpack-merge": "^5.3.0"
102 },
103 "dependencies": {
104 "history": "^4.10.0",
105 "process": "^0.11.10",
106 "react": "^17.0.1",
107 "react-dom": "^17.0.1",
108 "react-router-dom": "^5.2.0",
109 "styled-components": "^5.2.1"
110 }
111}
112{
113 "extends": ["airbnb", "prettier"],
114 "parser": "babel-eslint",
115 "plugins": ["prettier", "@typescript-eslint"],
116 "parserOptions": {
117 "ecmaVersion": 8,
118 "ecmaFeatures": {
119 "experimentalObjectRestSpread": true,
120 "impliedStrict": true,
121 "classes": true
122 }
123 },
124 "env": {
125 "browser": true,
126 "node": true,
127 "jest": true
128 },
129 "rules": {
130 "arrow-body-style": ["error", "as-needed"],
131 "class-methods-use-this": 0,
132 "react/jsx-filename-extension": 0,
133 "global-require": 0,
134 "react/destructuring-assignment": 0,
135 "import/named": 2,
136 "linebreak-style": 0,
137 "import/no-dynamic-require": 0,
138 "import/no-named-as-default": 0,
139 "import/no-unresolved": 2,
140 "import/prefer-default-export": 0,
141 "semi": [2, "always"],
142 "max-len": [
143 "error",
144 {
145 "code": 80,
146 "ignoreUrls": true,
147 "ignoreComments": true,
148 "ignoreStrings": true,
149 "ignoreTemplateLiterals": true
150 }
151 ],
152 "new-cap": [
153 2,
154 {
155 "capIsNew": false,
156 "newIsCap": true
157 }
158 ],
159 "no-param-reassign": 0,
160 "no-shadow": 0,
161 "no-tabs": 2,
162 "no-underscore-dangle": 0,
163 "react/forbid-prop-types": [
164 "error",
165 {
166 "forbid": ["any"]
167 }
168 ],
169 "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
170 "react/jsx-no-bind": [
171 "error",
172 {
173 "ignoreRefs": true,
174 "allowArrowFunctions": true,
175 "allowBind": false
176 }
177 ],
178 "react/no-unknown-property": [
179 2,
180 {
181 "ignore": ["itemscope", "itemtype", "itemprop"]
182 }
183 ]
184 }
185}
186{
187 "extends": "./tsconfig.json",
188 "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],
189 "exclude": ["node_modules/**", "build/**", "coverage/**"]
190}
191Not sure if anyone has come across this before? Googling the error does not present any useful forums or raised bugs, most of them just state not to use require in your files which I am not.
ANSWER
Answered 2022-Mar-15 at 16:08I think the problem is that you are trying to use the deprecated babel-eslint parser, last updated a year ago, which looks like it doesn't support ES6 modules. Updating to the latest parser seems to work, at least for simple linting.
So, do this:
- In package.json, update the line
"babel-eslint": "^10.0.2",to"@babel/eslint-parser": "^7.5.4",. This works with the code above but it may be better to use the latest version, which at the time of writing is 7.16.3. - Run
npm ifrom a terminal/command prompt in the folder - In .eslintrc, update the parser line
"parser": "babel-eslint",to"parser": "@babel/eslint-parser", - In .eslintrc, add
"requireConfigFile": false,to the parserOptions section (underneath"ecmaVersion": 8,) (I needed this or babel was looking for config files I don't have) - Run the command to lint a file
Then, for me with just your two configuration files, the error goes away and I get appropriate linting errors.
QUESTION
Switch' is not exported from 'react-router-dom'
Asked 2022-Mar-01 at 09:07In package.json file react-router-dom dependencies added. App component wrapped by BrowswerRouter , but when I wrap route by switch it says the following error Switch' is not exported from 'react-router-dom'. I deleted the package.json.lock ,node modules, installed npm again and npm install @babel/core --save. Still not working. I successfully wasted 6 hour for this. Can you please help me to fix this? why it's not importing?
Index.js
1import {BrowserRouter} from 'react-router-dom';
2
3ReactDOM.render(
4 <BrowserRouter>
5 <App />
6 </BrowserRouter>,
7 document.getElementById('root')
8);
9App.js:
1import {BrowserRouter} from 'react-router-dom';
2
3ReactDOM.render(
4 <BrowserRouter>
5 <App />
6 </BrowserRouter>,
7 document.getElementById('root')
8);
9 import logo from './logo.svg';
10import './App.css';
11import React from 'react';
12import {Switch,Route,Link} from 'react-router-dom';
13import Home from './Home';
14class App extends React.Component {
15 componentDidMount(){
16 alert('mounting');
17 }
18 componentDidUpdate(){
19 alert('updated');
20 }
21 render(){
22 return (
23
24 <div className="App">
25
26 <div>
27 <Link to="/">Home</Link>
28 </div>
29
30 <hr />
31
32 <Switch>
33 <Route exact path="/">
34 <Home/>
35 </Route>
36 </Switch>
37
38 </div>
39
40);
41 }
42}
43
44export default App;
45
46import React from 'react';
47
48 const Home = () => {
49 return <h1>Home</h1>;
50 };
51
52 export default Home;
53package.json
1import {BrowserRouter} from 'react-router-dom';
2
3ReactDOM.render(
4 <BrowserRouter>
5 <App />
6 </BrowserRouter>,
7 document.getElementById('root')
8);
9 import logo from './logo.svg';
10import './App.css';
11import React from 'react';
12import {Switch,Route,Link} from 'react-router-dom';
13import Home from './Home';
14class App extends React.Component {
15 componentDidMount(){
16 alert('mounting');
17 }
18 componentDidUpdate(){
19 alert('updated');
20 }
21 render(){
22 return (
23
24 <div className="App">
25
26 <div>
27 <Link to="/">Home</Link>
28 </div>
29
30 <hr />
31
32 <Switch>
33 <Route exact path="/">
34 <Home/>
35 </Route>
36 </Switch>
37
38 </div>
39
40);
41 }
42}
43
44export default App;
45
46import React from 'react';
47
48 const Home = () => {
49 return <h1>Home</h1>;
50 };
51
52 export default Home;
53"dependencies": {
54 "@babel/core": "^7.16.0",
55 "@testing-library/jest-dom": "^5.11.4",
56 "@testing-library/react": "^11.1.0",
57 "@testing-library/user-event": "^12.1.10",
58 "react": "^17.0.2",
59 "react-dom": "^17.0.2",
60 "react-router": "^6.0.0",
61 "react-router-dom": "^6.0.0",
62 "react-scripts": "4.0.3",
63 "web-vitals": "^1.0.1"
64 },
65ANSWER
Answered 2021-Nov-04 at 18:10Using
Routes instead of Switch in react-router v6
You are using react-router-dom version 6, which replaced Switch with the Routes component
1import {BrowserRouter} from 'react-router-dom';
2
3ReactDOM.render(
4 <BrowserRouter>
5 <App />
6 </BrowserRouter>,
7 document.getElementById('root')
8);
9 import logo from './logo.svg';
10import './App.css';
11import React from 'react';
12import {Switch,Route,Link} from 'react-router-dom';
13import Home from './Home';
14class App extends React.Component {
15 componentDidMount(){
16 alert('mounting');
17 }
18 componentDidUpdate(){
19 alert('updated');
20 }
21 render(){
22 return (
23
24 <div className="App">
25
26 <div>
27 <Link to="/">Home</Link>
28 </div>
29
30 <hr />
31
32 <Switch>
33 <Route exact path="/">
34 <Home/>
35 </Route>
36 </Switch>
37
38 </div>
39
40);
41 }
42}
43
44export default App;
45
46import React from 'react';
47
48 const Home = () => {
49 return <h1>Home</h1>;
50 };
51
52 export default Home;
53"dependencies": {
54 "@babel/core": "^7.16.0",
55 "@testing-library/jest-dom": "^5.11.4",
56 "@testing-library/react": "^11.1.0",
57 "@testing-library/user-event": "^12.1.10",
58 "react": "^17.0.2",
59 "react-dom": "^17.0.2",
60 "react-router": "^6.0.0",
61 "react-router-dom": "^6.0.0",
62 "react-scripts": "4.0.3",
63 "web-vitals": "^1.0.1"
64 },
65import {
66 BrowserRouter,
67 Routes, // instead of "Switch"
68 Route,
69} from "react-router-dom";
70
71// ...
72
73 <BrowserRouter>
74 <Routes>
75 <Route exact path="/" element={<Home />}>
76 <Home/>
77 </Route>
78 </Routes>
79 </BrowserRouter>
80Note that you now also pass your component as the element prop instead of using children.
QUESTION
"Cannot read properties of undefined (reading 'pathname')" when testing pages in the v6 React Router
Asked 2022-Feb-03 at 00:48When testing components with <Link>s, for example in my answer to Recommended approach for route-based tests within routes of react-router, I often use the following pattern to get access to the current location for testing purposes:
1const renderInRouter = () => {
2 const history = createMemoryHistory();
3 const wrapper = render(
4 <Router history={history}>
5 <MyPage />
6 </Router>
7 );
8 return { ...wrapper, history };
9}
10This worked fine up to v5.3, but after upgrading to v6 I get:
1const renderInRouter = () => {
2 const history = createMemoryHistory();
3 const wrapper = render(
4 <Router history={history}>
5 <MyPage />
6 </Router>
7 );
8 return { ...wrapper, history };
9}
10 FAIL ./demo.test.js
11 ✕ works (205 ms)
12
13 ● works
14
15 TypeError: Cannot read properties of undefined (reading 'pathname')
16
17 at Router (../packages/react-router/index.tsx:281:5)
18
19 ...
20This use-case isn't covered in the migration docs, v6 has no testing guides so far and, although the API reference does show that the history prop is no longer expected:
1const renderInRouter = () => {
2 const history = createMemoryHistory();
3 const wrapper = render(
4 <Router history={history}>
5 <MyPage />
6 </Router>
7 );
8 return { ...wrapper, history };
9}
10 FAIL ./demo.test.js
11 ✕ works (205 ms)
12
13 ● works
14
15 TypeError: Cannot read properties of undefined (reading 'pathname')
16
17 at Router (../packages/react-router/index.tsx:281:5)
18
19 ...
20interface RouterProps {
21 basename?: string;
22 children?: React.ReactNode;
23 location: Partial<Location> | string;
24 navigationType?: NavigationType;
25 navigator: Navigator;
26 static?: boolean;
27}
28it's not clear what the v6 equivalent is; I tried switching to navigator={history} but still got the same error.
To reproduce, copy the following files into a new directory and run npm install then npm test:
package.json
1const renderInRouter = () => {
2 const history = createMemoryHistory();
3 const wrapper = render(
4 <Router history={history}>
5 <MyPage />
6 </Router>
7 );
8 return { ...wrapper, history };
9}
10 FAIL ./demo.test.js
11 ✕ works (205 ms)
12
13 ● works
14
15 TypeError: Cannot read properties of undefined (reading 'pathname')
16
17 at Router (../packages/react-router/index.tsx:281:5)
18
19 ...
20interface RouterProps {
21 basename?: string;
22 children?: React.ReactNode;
23 location: Partial<Location> | string;
24 navigationType?: NavigationType;
25 navigator: Navigator;
26 static?: boolean;
27}
28{
29 "name": "router6-demo",
30 "version": "1.0.0",
31 "description": "",
32 "main": "index.js",
33 "scripts": {
34 "test": "jest"
35 },
36 "jest": {
37 "testEnvironment": "jsdom"
38 },
39 "babel": {
40 "presets": [
41 "@babel/preset-react"
42 ]
43 },
44 "keywords": [],
45 "author": "",
46 "license": "ISC",
47 "devDependencies": {
48 "@babel/preset-react": "^7.16.0",
49 "@testing-library/react": "^12.1.2",
50 "jest": "^27.3.1",
51 "react": "^17.0.2",
52 "react-dom": "^17.0.2",
53 "react-router-dom": "^6.0.0"
54 }
55}
56
57index.test.js:
1const renderInRouter = () => {
2 const history = createMemoryHistory();
3 const wrapper = render(
4 <Router history={history}>
5 <MyPage />
6 </Router>
7 );
8 return { ...wrapper, history };
9}
10 FAIL ./demo.test.js
11 ✕ works (205 ms)
12
13 ● works
14
15 TypeError: Cannot read properties of undefined (reading 'pathname')
16
17 at Router (../packages/react-router/index.tsx:281:5)
18
19 ...
20interface RouterProps {
21 basename?: string;
22 children?: React.ReactNode;
23 location: Partial<Location> | string;
24 navigationType?: NavigationType;
25 navigator: Navigator;
26 static?: boolean;
27}
28{
29 "name": "router6-demo",
30 "version": "1.0.0",
31 "description": "",
32 "main": "index.js",
33 "scripts": {
34 "test": "jest"
35 },
36 "jest": {
37 "testEnvironment": "jsdom"
38 },
39 "babel": {
40 "presets": [
41 "@babel/preset-react"
42 ]
43 },
44 "keywords": [],
45 "author": "",
46 "license": "ISC",
47 "devDependencies": {
48 "@babel/preset-react": "^7.16.0",
49 "@testing-library/react": "^12.1.2",
50 "jest": "^27.3.1",
51 "react": "^17.0.2",
52 "react-dom": "^17.0.2",
53 "react-router-dom": "^6.0.0"
54 }
55}
56
57const { render } = require("@testing-library/react");
58const { createMemoryHistory } = require("history");
59const React = require("react");
60const { Router } = require("react-router-dom");
61
62it("used to work", () => {
63 render(
64 <Router history={createMemoryHistory()}></Router>
65 );
66});
67If you npm install --save-dev react-router@5 and run npm test again, you can see that this passes in v5.
ANSWER
Answered 2021-Nov-06 at 10:28React Router v6 splits apart the history into multiple pieces, for this use case the relevant parts are the navigator and the location. This change is hinted at in Use useNavigate instead of useHistory, and you can see it in the definition of the Navigator type used in the Router props:
1const renderInRouter = () => {
2 const history = createMemoryHistory();
3 const wrapper = render(
4 <Router history={history}>
5 <MyPage />
6 </Router>
7 );
8 return { ...wrapper, history };
9}
10 FAIL ./demo.test.js
11 ✕ works (205 ms)
12
13 ● works
14
15 TypeError: Cannot read properties of undefined (reading 'pathname')
16
17 at Router (../packages/react-router/index.tsx:281:5)
18
19 ...
20interface RouterProps {
21 basename?: string;
22 children?: React.ReactNode;
23 location: Partial<Location> | string;
24 navigationType?: NavigationType;
25 navigator: Navigator;
26 static?: boolean;
27}
28{
29 "name": "router6-demo",
30 "version": "1.0.0",
31 "description": "",
32 "main": "index.js",
33 "scripts": {
34 "test": "jest"
35 },
36 "jest": {
37 "testEnvironment": "jsdom"
38 },
39 "babel": {
40 "presets": [
41 "@babel/preset-react"
42 ]
43 },
44 "keywords": [],
45 "author": "",
46 "license": "ISC",
47 "devDependencies": {
48 "@babel/preset-react": "^7.16.0",
49 "@testing-library/react": "^12.1.2",
50 "jest": "^27.3.1",
51 "react": "^17.0.2",
52 "react-dom": "^17.0.2",
53 "react-router-dom": "^6.0.0"
54 }
55}
56
57const { render } = require("@testing-library/react");
58const { createMemoryHistory } = require("history");
59const React = require("react");
60const { Router } = require("react-router-dom");
61
62it("used to work", () => {
63 render(
64 <Router history={createMemoryHistory()}></Router>
65 );
66});
67export declare type Navigator = Omit<History, "action" | "location" | "back" | "forward" | "listen" | "block">;
68Just changing history={history} to navigator={history} still left the location prop, from which the router was trying to access the pathname (among other properties), undefined. To get the test working again, update the rendering as follows:
1const renderInRouter = () => {
2 const history = createMemoryHistory();
3 const wrapper = render(
4 <Router history={history}>
5 <MyPage />
6 </Router>
7 );
8 return { ...wrapper, history };
9}
10 FAIL ./demo.test.js
11 ✕ works (205 ms)
12
13 ● works
14
15 TypeError: Cannot read properties of undefined (reading 'pathname')
16
17 at Router (../packages/react-router/index.tsx:281:5)
18
19 ...
20interface RouterProps {
21 basename?: string;
22 children?: React.ReactNode;
23 location: Partial<Location> | string;
24 navigationType?: NavigationType;
25 navigator: Navigator;
26 static?: boolean;
27}
28{
29 "name": "router6-demo",
30 "version": "1.0.0",
31 "description": "",
32 "main": "index.js",
33 "scripts": {
34 "test": "jest"
35 },
36 "jest": {
37 "testEnvironment": "jsdom"
38 },
39 "babel": {
40 "presets": [
41 "@babel/preset-react"
42 ]
43 },
44 "keywords": [],
45 "author": "",
46 "license": "ISC",
47 "devDependencies": {
48 "@babel/preset-react": "^7.16.0",
49 "@testing-library/react": "^12.1.2",
50 "jest": "^27.3.1",
51 "react": "^17.0.2",
52 "react-dom": "^17.0.2",
53 "react-router-dom": "^6.0.0"
54 }
55}
56
57const { render } = require("@testing-library/react");
58const { createMemoryHistory } = require("history");
59const React = require("react");
60const { Router } = require("react-router-dom");
61
62it("used to work", () => {
63 render(
64 <Router history={createMemoryHistory()}></Router>
65 );
66});
67export declare type Navigator = Omit<History, "action" | "location" | "back" | "forward" | "listen" | "block">;
68const { render } = require("@testing-library/react");
69const { createMemoryHistory } = require("history");
70const React = require("react");
71const { Router } = require("react-router-dom");
72
73it("works", () => {
74 const history = createMemoryHistory();
75 render(
76 <Router location={history.location} navigator={history}></Router>
77 );
78});
79QUESTION
eslint / typescript: Unable to resolve path to module
Asked 2022-Feb-02 at 23:32My .eslintrc.json is:
1{
2 "env": {
3 "browser": true,
4 "commonjs": true,
5 "es6": true,
6 "node": true,
7 "jest": true
8 },
9 "parserOptions": {
10 "ecmaFeatures": {
11 "jsx": true
12 },
13 "sourceType": "module"
14 },
15 "plugins": [
16 "react",
17 "prettier",
18 "import"
19 ],
20 "extends": [
21 "airbnb",
22 "airbnb/hooks",
23 "plugin:@typescript-eslint/recommended",
24 "plugin:react/recommended",
25 "plugin:import/errors",
26 "plugin:import/warnings",
27 "plugin:import/typescript",
28 "prettier"
29 ],
30 "root": true,
31 "rules": {
32 "no-const-assign": 1,
33 "no-extra-semi": 0,
34 "semi": 0,
35 "no-fallthrough": 0,
36 "no-empty": 0,
37 "no-mixed-spaces-and-tabs": 0,
38 "no-redeclare": 0,
39 "no-this-before-super": 1,
40 "no-unreachable": 1,
41 "no-use-before-define": 0,
42 "constructor-super": 1,
43 "curly": 0,
44 "eqeqeq": 0,
45 "func-names": 0,
46 "valid-typeof": 1,
47 "import/extensions": 0,
48 "react/jsx-filename-extension": 0,
49 // note you must disable the base rule as it can report incorrect errors
50 "no-shadow": 0,
51 "@typescript-eslint/no-shadow": [
52 1
53 ],
54 "no-unused-vars": 0,
55 "@typescript-eslint/no-unused-vars": 1,
56 "no-undef": 0,
57 "jsx-a11y/click-events-have-key-events": 0,
58 "jsx-a11y/no-static-element-interactions": 0,
59 "@typescript-eslint/explicit-module-boundary-types": 0,
60 "react/button-has-type": 0,
61 "react/require-default-props": 0,
62 "react/prop-types": 0,
63 "react-hooks/exhaustive-deps": 0,
64 "react/jsx-props-no-spreading": 0
65 },
66 "settings": {
67 "import/resolver": {
68 "node": {
69 "extensions": [
70 ".js",
71 ".jsx",
72 ".ts",
73 ".tsx"
74 ]
75 }
76 }
77 }
78}
79In a file src/components/elements/ProtectedRoutes/InviteRoute.tsx, I have:
1{
2 "env": {
3 "browser": true,
4 "commonjs": true,
5 "es6": true,
6 "node": true,
7 "jest": true
8 },
9 "parserOptions": {
10 "ecmaFeatures": {
11 "jsx": true
12 },
13 "sourceType": "module"
14 },
15 "plugins": [
16 "react",
17 "prettier",
18 "import"
19 ],
20 "extends": [
21 "airbnb",
22 "airbnb/hooks",
23 "plugin:@typescript-eslint/recommended",
24 "plugin:react/recommended",
25 "plugin:import/errors",
26 "plugin:import/warnings",
27 "plugin:import/typescript",
28 "prettier"
29 ],
30 "root": true,
31 "rules": {
32 "no-const-assign": 1,
33 "no-extra-semi": 0,
34 "semi": 0,
35 "no-fallthrough": 0,
36 "no-empty": 0,
37 "no-mixed-spaces-and-tabs": 0,
38 "no-redeclare": 0,
39 "no-this-before-super": 1,
40 "no-unreachable": 1,
41 "no-use-before-define": 0,
42 "constructor-super": 1,
43 "curly": 0,
44 "eqeqeq": 0,
45 "func-names": 0,
46 "valid-typeof": 1,
47 "import/extensions": 0,
48 "react/jsx-filename-extension": 0,
49 // note you must disable the base rule as it can report incorrect errors
50 "no-shadow": 0,
51 "@typescript-eslint/no-shadow": [
52 1
53 ],
54 "no-unused-vars": 0,
55 "@typescript-eslint/no-unused-vars": 1,
56 "no-undef": 0,
57 "jsx-a11y/click-events-have-key-events": 0,
58 "jsx-a11y/no-static-element-interactions": 0,
59 "@typescript-eslint/explicit-module-boundary-types": 0,
60 "react/button-has-type": 0,
61 "react/require-default-props": 0,
62 "react/prop-types": 0,
63 "react-hooks/exhaustive-deps": 0,
64 "react/jsx-props-no-spreading": 0
65 },
66 "settings": {
67 "import/resolver": {
68 "node": {
69 "extensions": [
70 ".js",
71 ".jsx",
72 ".ts",
73 ".tsx"
74 ]
75 }
76 }
77 }
78}
79import routeNames from 'constants/routeNames';
80import useRoles from 'hooks/roles';
81import { ROLE } from 'shared/src/types/enums';
82The app runs fine, but when I run lint, I get errors:
1{
2 "env": {
3 "browser": true,
4 "commonjs": true,
5 "es6": true,
6 "node": true,
7 "jest": true
8 },
9 "parserOptions": {
10 "ecmaFeatures": {
11 "jsx": true
12 },
13 "sourceType": "module"
14 },
15 "plugins": [
16 "react",
17 "prettier",
18 "import"
19 ],
20 "extends": [
21 "airbnb",
22 "airbnb/hooks",
23 "plugin:@typescript-eslint/recommended",
24 "plugin:react/recommended",
25 "plugin:import/errors",
26 "plugin:import/warnings",
27 "plugin:import/typescript",
28 "prettier"
29 ],
30 "root": true,
31 "rules": {
32 "no-const-assign": 1,
33 "no-extra-semi": 0,
34 "semi": 0,
35 "no-fallthrough": 0,
36 "no-empty": 0,
37 "no-mixed-spaces-and-tabs": 0,
38 "no-redeclare": 0,
39 "no-this-before-super": 1,
40 "no-unreachable": 1,
41 "no-use-before-define": 0,
42 "constructor-super": 1,
43 "curly": 0,
44 "eqeqeq": 0,
45 "func-names": 0,
46 "valid-typeof": 1,
47 "import/extensions": 0,
48 "react/jsx-filename-extension": 0,
49 // note you must disable the base rule as it can report incorrect errors
50 "no-shadow": 0,
51 "@typescript-eslint/no-shadow": [
52 1
53 ],
54 "no-unused-vars": 0,
55 "@typescript-eslint/no-unused-vars": 1,
56 "no-undef": 0,
57 "jsx-a11y/click-events-have-key-events": 0,
58 "jsx-a11y/no-static-element-interactions": 0,
59 "@typescript-eslint/explicit-module-boundary-types": 0,
60 "react/button-has-type": 0,
61 "react/require-default-props": 0,
62 "react/prop-types": 0,
63 "react-hooks/exhaustive-deps": 0,
64 "react/jsx-props-no-spreading": 0
65 },
66 "settings": {
67 "import/resolver": {
68 "node": {
69 "extensions": [
70 ".js",
71 ".jsx",
72 ".ts",
73 ".tsx"
74 ]
75 }
76 }
77 }
78}
79import routeNames from 'constants/routeNames';
80import useRoles from 'hooks/roles';
81import { ROLE } from 'shared/src/types/enums';
82 2:24 error Unable to resolve path to module 'constants/routeNames' import/no-unresolved
83 3:22 error Unable to resolve path to module 'hooks/roles' import/no-unresolved
84 5:22 error Unable to resolve path to module 'shared/src/types/enums' import/no-unresolved
85What am I doing wrong?
ANSWER
Answered 2022-Jan-11 at 17:06It looks like you have defined custom paths in your TypeScript config (usually tsconfig.json). The import plugin doesn't know about the correct location of the TypeScript config and hence cannot resolve those paths. What you need to do, is to specify the correct path to your TypeScript config via the project parameter in the resolver options:
1{
2 "env": {
3 "browser": true,
4 "commonjs": true,
5 "es6": true,
6 "node": true,
7 "jest": true
8 },
9 "parserOptions": {
10 "ecmaFeatures": {
11 "jsx": true
12 },
13 "sourceType": "module"
14 },
15 "plugins": [
16 "react",
17 "prettier",
18 "import"
19 ],
20 "extends": [
21 "airbnb",
22 "airbnb/hooks",
23 "plugin:@typescript-eslint/recommended",
24 "plugin:react/recommended",
25 "plugin:import/errors",
26 "plugin:import/warnings",
27 "plugin:import/typescript",
28 "prettier"
29 ],
30 "root": true,
31 "rules": {
32 "no-const-assign": 1,
33 "no-extra-semi": 0,
34 "semi": 0,
35 "no-fallthrough": 0,
36 "no-empty": 0,
37 "no-mixed-spaces-and-tabs": 0,
38 "no-redeclare": 0,
39 "no-this-before-super": 1,
40 "no-unreachable": 1,
41 "no-use-before-define": 0,
42 "constructor-super": 1,
43 "curly": 0,
44 "eqeqeq": 0,
45 "func-names": 0,
46 "valid-typeof": 1,
47 "import/extensions": 0,
48 "react/jsx-filename-extension": 0,
49 // note you must disable the base rule as it can report incorrect errors
50 "no-shadow": 0,
51 "@typescript-eslint/no-shadow": [
52 1
53 ],
54 "no-unused-vars": 0,
55 "@typescript-eslint/no-unused-vars": 1,
56 "no-undef": 0,
57 "jsx-a11y/click-events-have-key-events": 0,
58 "jsx-a11y/no-static-element-interactions": 0,
59 "@typescript-eslint/explicit-module-boundary-types": 0,
60 "react/button-has-type": 0,
61 "react/require-default-props": 0,
62 "react/prop-types": 0,
63 "react-hooks/exhaustive-deps": 0,
64 "react/jsx-props-no-spreading": 0
65 },
66 "settings": {
67 "import/resolver": {
68 "node": {
69 "extensions": [
70 ".js",
71 ".jsx",
72 ".ts",
73 ".tsx"
74 ]
75 }
76 }
77 }
78}
79import routeNames from 'constants/routeNames';
80import useRoles from 'hooks/roles';
81import { ROLE } from 'shared/src/types/enums';
82 2:24 error Unable to resolve path to module 'constants/routeNames' import/no-unresolved
83 3:22 error Unable to resolve path to module 'hooks/roles' import/no-unresolved
84 5:22 error Unable to resolve path to module 'shared/src/types/enums' import/no-unresolved
85{
86 ...
87 "settings": {
88 "import/resolver": {
89 "project": "./my-path-to/tsconfig.json",
90 ...
91 }
92 }
93}
94Or if your tsconfig.json is located in your respository's root, set: "project": {}, see this GitHub issue: https://github.com/import-js/eslint-plugin-import/issues/1485
QUESTION
Vue 3: Module '"../../node_modules/vue/dist/vue"' has no exported member
Asked 2022-Jan-24 at 08:38After updating my npm packages, some of the imports from the 'vue' module started showing errors:
TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'X'
where X is nextTick, onMounted, ref, watch etc. When serving the project, Vue says it's "failed to compile". WebStorm actually recognizes the exports, suggests them and shows types, but the error is shown regardless. Some exports like computed and defineComponent work just fine.
What I've tried:
- Rollback to the previously used Vue version "3.2.2" > "3.0.11". It makes the abovementioned type errors disappear, but the app stops working entirely, showing lots of
TypeError: Object(...) is not a functionerrors in console and not rendering the app at all. In the terminal, some new warnings are introduced:"export 'X' (imported as '_X') was not found in 'vue'where X is createElementBlock, createElementVNode, normalizeClass and normalizeStyle. - Rollback other dependencies. None of the ones that I tried helped fix the problem, unfortunately.
- Manually declare the entirety of 'vue' module. We can declare the 'vue' module exports in shims-vue.d.ts, and it actually makes the errors disappear, however, this seems like a terrible, time-consuming workaround, so I would opt out for a better solution if possible.
My full list of dependencies:
1"dependencies": {
2 "@capacitor/android": "3.0.0",
3 "@capacitor/app": "1.0.0",
4 "@capacitor/core": "3.0.0",
5 "@capacitor/haptics": "1.0.0",
6 "@capacitor/keyboard": "1.0.0",
7 "@capacitor/push-notifications": "^1.0.3",
8 "@google-pay/button-element": "^2.5.0",
9 "@ionic-native/core": "^5.34.0",
10 "@ionic-native/qr-scanner": "^5.35.0",
11 "@ionic-native/vibration": "^5.34.0",
12 "@ionic/vue": "^5.4.0",
13 "@ionic/vue-router": "^5.4.0",
14 "@j-t-mcc/vue3-chartjs": "^1.1.2",
15 "chart.js": "^3.4.1",
16 "chartjs-plugin-datalabels": "^2.0.0",
17 "color": "^3.1.3",
18 "cordova-plugin-background-mode": "^0.7.3",
19 "cordova-plugin-device": "^2.0.3",
20 "cordova-plugin-qrscanner": "^3.0.1",
21 "core-js": "^3.6.5",
22 "firebase": "^8.6.2",
23 "numeral": "^2.0.6",
24 "pug": "^3.0.2",
25 "pug-plain-loader": "^1.1.0",
26 "secure-ls": "^1.2.6",
27 "uuid": "^8.3.2",
28 "v-cupertino": "^1.2.4",
29 "vue": "^3.2.0",
30 "vue-chartjs": "^3.5.1",
31 "vue-i18n": "^9.1.3",
32 "vue-numerals": "^4.0.6",
33 "vue-router": "^4.0.0-0",
34 "vuex": "^4.0.1"
35 },
36 "devDependencies": {
37 "@capacitor/cli": "3.0.0",
38 "@types/jest": "^24.0.19",
39 "@types/uuid": "^8.3.1",
40 "@typescript-eslint/eslint-plugin": "^2.33.0",
41 "@typescript-eslint/parser": "^2.33.0",
42 "@vue/cli-plugin-babel": "~4.5.0",
43 "@vue/cli-plugin-e2e-cypress": "~4.5.0",
44 "@vue/cli-plugin-eslint": "^4.5.13",
45 "@vue/cli-plugin-router": "~4.5.0",
46 "@vue/cli-plugin-typescript": "~4.5.0",
47 "@vue/cli-plugin-unit-jest": "~4.5.0",
48 "@vue/cli-service": "~4.5.0",
49 "@vue/compiler-sfc": "^3.0.0-0",
50 "@vue/eslint-config-typescript": "^5.0.2",
51 "@vue/test-utils": "^2.0.0-0",
52 "eslint": "^6.7.2",
53 "eslint-plugin-vue": "^7.0.0-0",
54 "stylus": "^0.54.7",
55 "stylus-loader": "^3.0.2",
56 "typescript": "~3.9.3",
57 "vue-jest": "^5.0.0-0"
58 }
59ANSWER
Answered 2021-Aug-15 at 13:53That named exports from composition API are unavailable means that vue is Vue 2 at some place which has only default export. Since Vue 3 is in dependencies and both lock file and node_modules were refreshed, this means that Vue 2 is nested dependency of some direct dependency.
The problem needs to be investigated in lock file. It shows that @vue/cli-plugin-unit-jest@4.5.13 depends on vue-jest@3 which depends on vue@2.
A possible solution is to upgrade @vue/cli-plugin-unit-jest to the latest version, next. The same likely applies to other @vue/cli-* packages because they have matching versions.
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Jest
Tutorials and Learning Resources are not available at this moment for Jest
Share this Page
Get latest updates on Jest