Explore all Axios open source software, libraries, packages, source code, cloud functions and APIs.
Popular New Releases in Axios
swr
2.0.0-beta.1
got
v12.0.0
vue-resource
framework
vue-apollo
Popular Libraries in Axios
swr
by vercel 
typescript
22012 MIT
React Hooks for Data Fetching
vue-admin-template
by PanJiaChen javascript
14865 MIT
a vue2.0 minimal admin template
got
by sindresorhus typescript
10532 MIT
🌐 Human-friendly and powerful HTTP request library for Node.js
vue-resource
by pagekit javascript
10108 MIT
The HTTP client for Vue.js
framework
by nuxt typescript
5586 MIT
The Hybrid Vue(3) Framework.
vue-apollo
by vuejs javascript
5388 MIT
🚀 Apollo/GraphQL integration for VueJS
spring-security-oauth
by spring-projects java
4559 Apache-2.0
Support for adding OAuth1(a) and OAuth2 features (consumer and provider) for Spring web applications.
vue-realworld-example-app
by gothinkster javascript
3843 MIT
An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.
web3-react
by NoahZinsmeister typescript
3304 GPL-3.0
A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps
Trending New libraries in Axios
framework
by nuxt typescript
5586 MIT
The Hybrid Vue(3) Framework.
node-react-ecommerce
by basir javascript
1165
Build ECommerce Website Like Amazon By React & Node & MongoDB
React-Total
by harryheman javascript
901 MIT
Ресурс для изучения React.js и связанных с ним технологий на русском языке
composition-api
by nuxt-community typescript
664 MIT
Composition API hooks for Nuxt.
use-wallet
by aragon typescript
576 MIT
👛 useWallet() · All-in-one solution to connect a dapp to an Ethereum provider.
vue-request
by AttoJS typescript
516 MIT
⚡️ Vue 3 composition API for data fetching, supports SWR, polling, error retry, cache request, pagination, etc. ⚡️ 一个能轻松帮你管理请求状态（支持SWR，轮询，错误重试，缓存，分页等）的 Vue 3 请求库
mande
by posva typescript
510 MIT
600 bytes convenient and modern wrapper around fetch with smart extensible defaults
Dart-Cms
by abcd498936590 javascript
366 MIT
这是一套基于nodejs+mongodb实现的电影网站cms系统.功能完备.欢迎star
jetlinks-ui-antd
by jetlinks typescript
361 MIT
jetlinks community ant design 演示地址：http://demo.jetlinks.cn 账号/密码: test/test123456
Top Authors in Axios
1
19 Libraries
292
2
12 Libraries
6276
3
7 Libraries
177
4
7 Libraries
235
5
6 Libraries
541
6
5 Libraries
47
7
5 Libraries
49
8
5 Libraries
37
9
5 Libraries
41
10
5 Libraries
889
1
19 Libraries
292
2
12 Libraries
6276
3
7 Libraries
177
4
7 Libraries
235
5
6 Libraries
541
6
5 Libraries
47
7
5 Libraries
49
8
5 Libraries
37
9
5 Libraries
41
10
5 Libraries
889
Trending Kits in Axios
No Trending Kits are available at this moment for Axios
Trending Discussions on Axios
Why items appends to the redux rather than replace?
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
React router v6 how to use `navigate` redirection in axios interceptor
The unauthenticated git protocol on port 9418 is no longer supported
Vue <script setup> Top level await causing template not to render
Z_DATA_ERROR, ERRNO -3, zlib: incorrect data check, MBA M1
java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;
Memory Leak in React component using useEffect
Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported
Cannot find name 'AbortSignal' during npm run build
QUESTION
Why items appends to the redux rather than replace?
Asked 2022-Apr-16 at 08:11I'm newbie to Reactjs. The problem I'm encountered:
When Article page loads in the first time, all is fine and there are 10 articles shown. When I click on the browser back button, and then I go to the Article page for the second time, the article-list will be duplicated (so, it will be 20 articles). If I do so again, it will be 30 articles and so on ..
I want to know, why the result of API call appends for the Redux and not replace? In other word, how can I clean the Redux on page load every time? The expected result is seeing always 10 item (articles) on the page Article when I open it.
Here is a simplified of the element (for navigating to the list of articles) in the main page:
1import Pages from "Constants/Pages";
2
3const Component = () => {
4
5 const history = useHistory();
6 const navigateWithToken = (page) => {
7 history.push(page);
8 }
9 };
10
11 return (
12 <div className="d-flex align-items-center flex-column py-1 ">
13 <div
14 className="main-footer-btn-article"
15 onClick={() => navigateWithToken(Pages.Articles)}
16 ></div>
17 <span className="main-footer-btn-text">Articles</span>
18 </div>
19 )
20};
21
22export const ArticlesBtn = memo(Component);
23Also, here is the Article page:
1import Pages from "Constants/Pages";
2
3const Component = () => {
4
5 const history = useHistory();
6 const navigateWithToken = (page) => {
7 history.push(page);
8 }
9 };
10
11 return (
12 <div className="d-flex align-items-center flex-column py-1 ">
13 <div
14 className="main-footer-btn-article"
15 onClick={() => navigateWithToken(Pages.Articles)}
16 ></div>
17 <span className="main-footer-btn-text">Articles</span>
18 </div>
19 )
20};
21
22export const ArticlesBtn = memo(Component);
23import { memo, useEffect } from "react";
24import { useHistory } from "react-router-dom";
25import { useSelector, useDispatch } from "react-redux";
26
27import PostItems from "SharedComponents/PostItems";
28import { getAllPosts } from "Redux/Actions";
29import Pages from "Constants/Pages";
30
31const Page = () => {
32 const posts = useSelector((state) => state?.articles?.posts?.items);
33 const dispatch = useDispatch();
34 const { push } = useHistory();
35 useEffect(() => {
36 dispatch(getAllPosts());
37 }, []);
38
39 const onClickPost = (item) => {
40 push({
41 pathname: Pages.SingleArticle,
42 state: {
43 postId: item.id,
44 title: item.subject,
45 is_saved: item.is_saved,
46 },
47 });
48 };
49
50 return (
51 <div className="full-height overflow-auto">
52 {
53 posts?.map((item, index) => {
54 return (
55 <PostItems
56 {...item}
57 key={item.id}
58 index={index}
59 onClickPost={() => onClickPost(item)}
60 />
61 );
62 })
63 }
64 </div>
65 );
66};
67
68export default memo(Page);
69Also here is the API call:
1import Pages from "Constants/Pages";
2
3const Component = () => {
4
5 const history = useHistory();
6 const navigateWithToken = (page) => {
7 history.push(page);
8 }
9 };
10
11 return (
12 <div className="d-flex align-items-center flex-column py-1 ">
13 <div
14 className="main-footer-btn-article"
15 onClick={() => navigateWithToken(Pages.Articles)}
16 ></div>
17 <span className="main-footer-btn-text">Articles</span>
18 </div>
19 )
20};
21
22export const ArticlesBtn = memo(Component);
23import { memo, useEffect } from "react";
24import { useHistory } from "react-router-dom";
25import { useSelector, useDispatch } from "react-redux";
26
27import PostItems from "SharedComponents/PostItems";
28import { getAllPosts } from "Redux/Actions";
29import Pages from "Constants/Pages";
30
31const Page = () => {
32 const posts = useSelector((state) => state?.articles?.posts?.items);
33 const dispatch = useDispatch();
34 const { push } = useHistory();
35 useEffect(() => {
36 dispatch(getAllPosts());
37 }, []);
38
39 const onClickPost = (item) => {
40 push({
41 pathname: Pages.SingleArticle,
42 state: {
43 postId: item.id,
44 title: item.subject,
45 is_saved: item.is_saved,
46 },
47 });
48 };
49
50 return (
51 <div className="full-height overflow-auto">
52 {
53 posts?.map((item, index) => {
54 return (
55 <PostItems
56 {...item}
57 key={item.id}
58 index={index}
59 onClickPost={() => onClickPost(item)}
60 />
61 );
62 })
63 }
64 </div>
65 );
66};
67
68export default memo(Page);
69const getAllPosts = (page = 1) => {
70 return async (dispatch: ReduxDispatch) => {
71 //"posts?for=for_website"
72 dispatch(toggleLoading(true));
73 try {
74 const { data } = await axios({
75 method: "GET",
76 url: "posts?for=for_mobile",
77 params: { page: page },
78 });
79 const items = data?.data?.data;
80 const pagination = {
81 current_page: data.data.current_page,
82 last_page: data.data.last_page,
83 };
84 dispatch(
85 dispatchItemToRedux({
86 type: ReducerTypes.GET_ALL_POSTS,
87 payload: {
88 items,
89 pagination,
90 },
91 })
92 );
93 } catch (err) {
94 return Promise.reject(err);
95 } finally {
96 dispatch(toggleLoading(false));
97 }
98 };
99};
100Also, here is the reducer:
1import Pages from "Constants/Pages";
2
3const Component = () => {
4
5 const history = useHistory();
6 const navigateWithToken = (page) => {
7 history.push(page);
8 }
9 };
10
11 return (
12 <div className="d-flex align-items-center flex-column py-1 ">
13 <div
14 className="main-footer-btn-article"
15 onClick={() => navigateWithToken(Pages.Articles)}
16 ></div>
17 <span className="main-footer-btn-text">Articles</span>
18 </div>
19 )
20};
21
22export const ArticlesBtn = memo(Component);
23import { memo, useEffect } from "react";
24import { useHistory } from "react-router-dom";
25import { useSelector, useDispatch } from "react-redux";
26
27import PostItems from "SharedComponents/PostItems";
28import { getAllPosts } from "Redux/Actions";
29import Pages from "Constants/Pages";
30
31const Page = () => {
32 const posts = useSelector((state) => state?.articles?.posts?.items);
33 const dispatch = useDispatch();
34 const { push } = useHistory();
35 useEffect(() => {
36 dispatch(getAllPosts());
37 }, []);
38
39 const onClickPost = (item) => {
40 push({
41 pathname: Pages.SingleArticle,
42 state: {
43 postId: item.id,
44 title: item.subject,
45 is_saved: item.is_saved,
46 },
47 });
48 };
49
50 return (
51 <div className="full-height overflow-auto">
52 {
53 posts?.map((item, index) => {
54 return (
55 <PostItems
56 {...item}
57 key={item.id}
58 index={index}
59 onClickPost={() => onClickPost(item)}
60 />
61 );
62 })
63 }
64 </div>
65 );
66};
67
68export default memo(Page);
69const getAllPosts = (page = 1) => {
70 return async (dispatch: ReduxDispatch) => {
71 //"posts?for=for_website"
72 dispatch(toggleLoading(true));
73 try {
74 const { data } = await axios({
75 method: "GET",
76 url: "posts?for=for_mobile",
77 params: { page: page },
78 });
79 const items = data?.data?.data;
80 const pagination = {
81 current_page: data.data.current_page,
82 last_page: data.data.last_page,
83 };
84 dispatch(
85 dispatchItemToRedux({
86 type: ReducerTypes.GET_ALL_POSTS,
87 payload: {
88 items,
89 pagination,
90 },
91 })
92 );
93 } catch (err) {
94 return Promise.reject(err);
95 } finally {
96 dispatch(toggleLoading(false));
97 }
98 };
99};
100import ReducerTypes from "Redux/Types/ReducerTypes";
101
102const INITIAL_STATE = {
103 posts: {
104 items: [],
105 pagination: {}
106 },
107 singlePost: {
108 id: null,
109 subject: null,
110 caption: null,
111 deep_link: null,
112 short_link: null,
113 total_comments: null,
114 total_likes: null,
115 total_views: null,
116 created: null,
117 medias: null,
118 likes: []
119 },
120 postComments: []
121};
122
123function articleReducer(state = INITIAL_STATE, action) {
124 switch (action.type) {
125 case ReducerTypes.GET_ALL_POSTS:
126 return {
127 ...state,
128 posts: {
129 items: state.posts.items.concat(action.payload.items),
130 pagination: action.payload.pagination
131 }
132 };
133 case ReducerTypes.GET_SINGLE_POST:
134 return {
135 ...state,
136 singlePost: action.payload
137 };
138 case ReducerTypes.GET_POST_COMMENTS:
139 return {
140 ...state,
141 postComments: action.payload
142 };
143 case ReducerTypes.GET_POST_LIKES:
144 return {
145 ...state,
146 singlePost: {
147 ...state.singlePost,
148 likes: action.payload
149 }
150 };
151 default:
152 return state;
153 };
154};
155export default articleReducer;
156ANSWER
Answered 2022-Apr-16 at 08:111import Pages from "Constants/Pages";
2
3const Component = () => {
4
5 const history = useHistory();
6 const navigateWithToken = (page) => {
7 history.push(page);
8 }
9 };
10
11 return (
12 <div className="d-flex align-items-center flex-column py-1 ">
13 <div
14 className="main-footer-btn-article"
15 onClick={() => navigateWithToken(Pages.Articles)}
16 ></div>
17 <span className="main-footer-btn-text">Articles</span>
18 </div>
19 )
20};
21
22export const ArticlesBtn = memo(Component);
23import { memo, useEffect } from "react";
24import { useHistory } from "react-router-dom";
25import { useSelector, useDispatch } from "react-redux";
26
27import PostItems from "SharedComponents/PostItems";
28import { getAllPosts } from "Redux/Actions";
29import Pages from "Constants/Pages";
30
31const Page = () => {
32 const posts = useSelector((state) => state?.articles?.posts?.items);
33 const dispatch = useDispatch();
34 const { push } = useHistory();
35 useEffect(() => {
36 dispatch(getAllPosts());
37 }, []);
38
39 const onClickPost = (item) => {
40 push({
41 pathname: Pages.SingleArticle,
42 state: {
43 postId: item.id,
44 title: item.subject,
45 is_saved: item.is_saved,
46 },
47 });
48 };
49
50 return (
51 <div className="full-height overflow-auto">
52 {
53 posts?.map((item, index) => {
54 return (
55 <PostItems
56 {...item}
57 key={item.id}
58 index={index}
59 onClickPost={() => onClickPost(item)}
60 />
61 );
62 })
63 }
64 </div>
65 );
66};
67
68export default memo(Page);
69const getAllPosts = (page = 1) => {
70 return async (dispatch: ReduxDispatch) => {
71 //"posts?for=for_website"
72 dispatch(toggleLoading(true));
73 try {
74 const { data } = await axios({
75 method: "GET",
76 url: "posts?for=for_mobile",
77 params: { page: page },
78 });
79 const items = data?.data?.data;
80 const pagination = {
81 current_page: data.data.current_page,
82 last_page: data.data.last_page,
83 };
84 dispatch(
85 dispatchItemToRedux({
86 type: ReducerTypes.GET_ALL_POSTS,
87 payload: {
88 items,
89 pagination,
90 },
91 })
92 );
93 } catch (err) {
94 return Promise.reject(err);
95 } finally {
96 dispatch(toggleLoading(false));
97 }
98 };
99};
100import ReducerTypes from "Redux/Types/ReducerTypes";
101
102const INITIAL_STATE = {
103 posts: {
104 items: [],
105 pagination: {}
106 },
107 singlePost: {
108 id: null,
109 subject: null,
110 caption: null,
111 deep_link: null,
112 short_link: null,
113 total_comments: null,
114 total_likes: null,
115 total_views: null,
116 created: null,
117 medias: null,
118 likes: []
119 },
120 postComments: []
121};
122
123function articleReducer(state = INITIAL_STATE, action) {
124 switch (action.type) {
125 case ReducerTypes.GET_ALL_POSTS:
126 return {
127 ...state,
128 posts: {
129 items: state.posts.items.concat(action.payload.items),
130 pagination: action.payload.pagination
131 }
132 };
133 case ReducerTypes.GET_SINGLE_POST:
134 return {
135 ...state,
136 singlePost: action.payload
137 };
138 case ReducerTypes.GET_POST_COMMENTS:
139 return {
140 ...state,
141 postComments: action.payload
142 };
143 case ReducerTypes.GET_POST_LIKES:
144 return {
145 ...state,
146 singlePost: {
147 ...state.singlePost,
148 likes: action.payload
149 }
150 };
151 default:
152 return state;
153 };
154};
155export default articleReducer;
156case ReducerTypes.GET_ALL_POSTS:
157 return {
158 ...state,
159 posts: {
160 items: action.payload.items,
161 pagination: action.payload.pagination
162 }
163 };
164Try omitting that .concat()
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
React router v6 how to use `navigate` redirection in axios interceptor
Asked 2022-Mar-28 at 18:261import axios from "axios";
2import { useNavigate } from "react-router-dom";
3
4export const api = axios.create({
5 baseURL: "http://127.0.0.1:8000/",
6 headers: {
7 "content-type": "application/json",
8 },
9});
10
11api.interceptors.response.use(
12 function (response) {
13 return response;
14 },
15 function (er) {
16 if (axios.isAxiosError(er)) {
17 if (er.response) {
18 if (er.response.status == 401) {
19
20 // Won't work
21 useNavigate()("/login");
22
23 }
24 }
25 }
26
27 return Promise.reject(er);
28 }
29);
30ANSWER
Answered 2021-Nov-17 at 02:14The reason this is not working is because you can only consume hooks inside a React component or a custom hook.
Since this is neither, hence the useNavigate() hook is failing.
My advice would be to wrap the entire logic inside a custom hook.
Pseudo code :
1import axios from "axios";
2import { useNavigate } from "react-router-dom";
3
4export const api = axios.create({
5 baseURL: "http://127.0.0.1:8000/",
6 headers: {
7 "content-type": "application/json",
8 },
9});
10
11api.interceptors.response.use(
12 function (response) {
13 return response;
14 },
15 function (er) {
16 if (axios.isAxiosError(er)) {
17 if (er.response) {
18 if (er.response.status == 401) {
19
20 // Won't work
21 useNavigate()("/login");
22
23 }
24 }
25 }
26
27 return Promise.reject(er);
28 }
29);
30import { useCallback, useEffect, useState } from "react"
31
32export default function useAsync(callback, dependencies = []) {
33 const [loading, setLoading] = useState(true)
34 const [error, setError] = useState()
35 const [value, setValue] = useState()
36
37 // Simply manage 3 different states and update them as per the results of a Promise's resolution
38 // Here, we define a callback
39 const callbackMemoized = useCallback(() => {
40 setLoading(true)
41 setError(undefined)
42 setValue(undefined)
43 callback()
44 // ON SUCCESS -> Set the data from promise as "value"
45 .then(setValue)
46 // ON FAILURE -> Set the err from promise as "error"
47 .catch((error)=> {
48 setError(error)
49 useNavigate()('/login')
50 })
51 // Irresp of fail or success, loading must stop after promise has ran
52 .finally(() => setLoading(false))
53 // This function runs everytime some dependency changes
54 }, dependencies)
55
56 // To run the callback function each time it itself changes i.e. when its dependencies change
57 useEffect(() => {
58 callbackMemoized()
59 }, [callbackMemoized])
60
61 return { loading, error, value }
62}
63Here, just pass your axios call as a callback to the hook.
For reference for migration from v5 to v6 of react router, this video is helpful
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
Vue <script setup> Top level await causing template not to render
Asked 2022-Mar-24 at 09:09I'm using the new syntax in Vue 3 and I really like the idea of it, but once I tried to use a top level await I started to run in some problems.
This is my code:
1<template>
2 <div class="inventory">
3 <a class="btn btn-primary">Test button</a>
4 <table class="table">
5 <thead>
6 <tr>Name</tr>
7 <tr>Description</tr>
8 </thead>
9 <tbody>
10 <tr v-for="(item, key) in inventory" :key="key">
11 <td>{{ item.name }}</td>
12 <td>{{ item.description }}</td>
13 </tr>
14 </tbody>
15 </table>
16 </div>
17</template>
18
19<script setup lang="ts">
20import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory'
21
22const inventory: GetInventoryResponse = await apiGetInventory()
23</script>
24As you can see it's not that complicated, the apiGetInventory is just an axios call so I won't bother going into that. The problem is, that if I have this top level await, my template doesn't render anymore, it's just a blank page in my browser. If I remove the two lines of code, it works fine. Also the promise seems to revolve just fine, if I place a console.log(inventory) underneath it I get an array with objects all fine and dandy.
Anyone have a clue what's going wrong here?
ANSWER
Answered 2022-Mar-24 at 09:09Top-level await must be used in combination with Suspense (which is experimental).
You should be able to just do it in onBeforeMount. Not as elegant; but a solid solution. Something like this:
1<template>
2 <div class="inventory">
3 <a class="btn btn-primary">Test button</a>
4 <table class="table">
5 <thead>
6 <tr>Name</tr>
7 <tr>Description</tr>
8 </thead>
9 <tbody>
10 <tr v-for="(item, key) in inventory" :key="key">
11 <td>{{ item.name }}</td>
12 <td>{{ item.description }}</td>
13 </tr>
14 </tbody>
15 </table>
16 </div>
17</template>
18
19<script setup lang="ts">
20import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory'
21
22const inventory: GetInventoryResponse = await apiGetInventory()
23</script>
24<script setup lang="ts">
25import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory';
26import {ref, onBeforeMount} from 'vue';
27
28const inventory = ref<GetInventoryResponse>()
29
30onBeforeMount( async () => {
31 inventory.value = await apiGetInventory()
32})
33</script>
34QUESTION
Z_DATA_ERROR, ERRNO -3, zlib: incorrect data check, MBA M1
Asked 2022-Mar-17 at 00:11Recently I face an issues to install my dependencies using latest Node and NPM on my MacBook Air M1 machine. Then I found out M1 is not supported latest Node version. So my solution, to using NVM and change them to Node v14.16
Everything works well, but when our team apply new eslint configuration. Yet, I still not sure whether eslint was causes the error or not.
.eslintrc1{
2 "env": {
3 "es6": true,
4 "browser": true,
5 "node": true
6 },
7 "extends": ["eslint:recommended", "plugin:react/recommended"],
8 "parser": "@babel/eslint-parser",
9 "parserOptions": {
10 "requireConfigFile": false,
11 "ecmaVersion": 2018,
12 "sourceType": "module",
13 "ecmaFeatures": {
14 "impliedStrict": true,
15 "jsx": true
16 }
17 },
18 "plugins": ["react", "prettier", "@babel"],
19 "rules": {
20 // "prettier/prettier": [
21 // "warn",
22 // {
23 // "endOfLine": "auto",
24 // }
25 // ],
26 "no-console": 1,
27 "indent": [
28 2,
29 2,
30 {
31 "SwitchCase": 1
32 }
33 ],
34 "linebreak-style": 0,
35 "quotes": [2, "single"],
36 "semi": 0,
37 "curly": [2, "all"],
38 "camelcase": "off",
39 "react/display-name": "off",
40 "eqeqeq": [2, "smart"],
41 "one-var-declaration-per-line": [2, "always"],
42 "new-cap": 2,
43 "no-case-declarations": 0
44 },
45 "globals": {
46 "axios": true,
47 "PropTypes": true
48 },
49 "settings": {
50 "import/resolver": {
51 "alias": [["./src/"]]
52 }
53 }
54}
55
56This error was occurred:
Error1{
2 "env": {
3 "es6": true,
4 "browser": true,
5 "node": true
6 },
7 "extends": ["eslint:recommended", "plugin:react/recommended"],
8 "parser": "@babel/eslint-parser",
9 "parserOptions": {
10 "requireConfigFile": false,
11 "ecmaVersion": 2018,
12 "sourceType": "module",
13 "ecmaFeatures": {
14 "impliedStrict": true,
15 "jsx": true
16 }
17 },
18 "plugins": ["react", "prettier", "@babel"],
19 "rules": {
20 // "prettier/prettier": [
21 // "warn",
22 // {
23 // "endOfLine": "auto",
24 // }
25 // ],
26 "no-console": 1,
27 "indent": [
28 2,
29 2,
30 {
31 "SwitchCase": 1
32 }
33 ],
34 "linebreak-style": 0,
35 "quotes": [2, "single"],
36 "semi": 0,
37 "curly": [2, "all"],
38 "camelcase": "off",
39 "react/display-name": "off",
40 "eqeqeq": [2, "smart"],
41 "one-var-declaration-per-line": [2, "always"],
42 "new-cap": 2,
43 "no-case-declarations": 0
44 },
45 "globals": {
46 "axios": true,
47 "PropTypes": true
48 },
49 "settings": {
50 "import/resolver": {
51 "alias": [["./src/"]]
52 }
53 }
54}
55
56npm ERR! code Z_DATA_ERROR
57npm ERR! errno -3
58npm ERR! zlib: incorrect data check
59
Log
1{
2 "env": {
3 "es6": true,
4 "browser": true,
5 "node": true
6 },
7 "extends": ["eslint:recommended", "plugin:react/recommended"],
8 "parser": "@babel/eslint-parser",
9 "parserOptions": {
10 "requireConfigFile": false,
11 "ecmaVersion": 2018,
12 "sourceType": "module",
13 "ecmaFeatures": {
14 "impliedStrict": true,
15 "jsx": true
16 }
17 },
18 "plugins": ["react", "prettier", "@babel"],
19 "rules": {
20 // "prettier/prettier": [
21 // "warn",
22 // {
23 // "endOfLine": "auto",
24 // }
25 // ],
26 "no-console": 1,
27 "indent": [
28 2,
29 2,
30 {
31 "SwitchCase": 1
32 }
33 ],
34 "linebreak-style": 0,
35 "quotes": [2, "single"],
36 "semi": 0,
37 "curly": [2, "all"],
38 "camelcase": "off",
39 "react/display-name": "off",
40 "eqeqeq": [2, "smart"],
41 "one-var-declaration-per-line": [2, "always"],
42 "new-cap": 2,
43 "no-case-declarations": 0
44 },
45 "globals": {
46 "axios": true,
47 "PropTypes": true
48 },
49 "settings": {
50 "import/resolver": {
51 "alias": [["./src/"]]
52 }
53 }
54}
55
56npm ERR! code Z_DATA_ERROR
57npm ERR! errno -3
58npm ERR! zlib: incorrect data check
595147 silly saveTree └── yup@0.32.11
605148 verbose stack ZlibError: zlib: incorrect data check
615148 verbose stack at Unzip.write (/Users/metalheadcoder/.nvm/versions/node/v14.16.1/lib/node_modules/npm/node_modules/minizlib/index.js:147:22)
625148 verbose stack at Object.write (/Users/metalheadcoder/.nvm/versions/node/v14.16.1/lib/node_modules/npm/node_modules/tar/lib/parse.js:305:58)
635148 verbose stack at PassThrough.ondata (internal/streams/readable.js:719:22)
645148 verbose stack at PassThrough.emit (events.js:315:20)
655148 verbose stack at addChunk (internal/streams/readable.js:309:12)
665148 verbose stack at readableAddChunk (internal/streams/readable.js:284:9)
675148 verbose stack at PassThrough.Readable.push (internal/streams/readable.js:223:10)
685148 verbose stack at PassThrough.Transform.push (internal/streams/transform.js:166:32)
695148 verbose stack at PassThrough.afterTransform (internal/streams/transform.js:101:10)
705148 verbose stack at PassThrough._transform (internal/streams/passthrough.js:46:3)
715148 verbose stack at PassThrough.Transform._read (internal/streams/transform.js:205:10)
725148 verbose stack at PassThrough.Transform._write (internal/streams/transform.js:193:12)
735148 verbose stack at writeOrBuffer (internal/streams/writable.js:358:12)
745148 verbose stack at PassThrough.Writable.write (internal/streams/writable.js:303:10)
755148 verbose stack at Readable.ondata (internal/streams/readable.js:719:22)
765148 verbose stack at Readable.emit (events.js:315:20)
775149 verbose cwd /Users/metalheadcoder/Gitlab/warefe
785150 verbose Darwin 21.1.0
795151 verbose argv "/Users/metalheadcoder/.nvm/versions/node/v14.16.1/bin/node" "/Users/metalheadcoder/.nvm/versions/node/v14.16.1/bin/npm" "install"
805152 verbose node v14.16.1
815153 verbose npm v6.14.12
825154 error code Z_DATA_ERROR
835155 error errno -3
845156 error zlib: incorrect data check
855157 verbose exit [ -3, true ]
86
Machine
MacBookAir M1 2020
Approach- Install package using
nvm use v14 - Install package using
nvm use v16 - Install package using
nvm use v17 - Remove node_modules and package-lock.js also run
npm cache clean --force
Thank you in advance.
ANSWER
Answered 2022-Mar-17 at 00:11I had a similar problem with another module.
The solution I found was to update both node (to v16) and npm (to v8).
For Node, I used brew (but nvm should be OK).
For npm, I used what the official doc says :
npm install -g npm@latest
QUESTION
java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;
Asked 2022-Feb-25 at 23:22It was working fine before I have done nothing, no packages update, no gradle update no nothing just created new build and this error occurs. but for some team members the error occur after gradle sync.
The issue is that build is generating successfully without any error but when opens the app it suddenly gets crash (in both debug and release mode)
Error
1 E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2 java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3 at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4 at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5 at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6 at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7 at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8 at java.lang.Thread.run(Thread.java:923)
9gradle-wrapper.properties
1 E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2 java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3 at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4 at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5 at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6 at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7 at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8 at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14build.gradle
1 E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2 java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3 at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4 at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5 at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6 at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7 at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8 at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14// Top-level build file where you can add configuration options common to all sub-projects/modules.
15
16buildscript {
17 ext {
18 buildToolsVersion = "30.0.2"
19 minSdkVersion = 21
20 compileSdkVersion = 30
21 targetSdkVersion = 30
22 ndkVersion = "21.4.7075529"
23 }
24 repositories {
25 google()
26 mavenCentral()
27 jcenter()
28 // maven {
29 // url 'https://maven.fabric.io/public'
30 // }
31 maven { url "https://www.jitpack.io" }
32 }
33 dependencies {
34 classpath("com.android.tools.build:gradle:4.2.2")
35 classpath 'com.google.gms:google-services:4.2.0' // Google Services plugin
36 // Add the Fabric Crashlytics plugin.
37 // classpath 'io.fabric.tools:gradle:1.31.2'
38 // firebase performance sdk
39 classpath 'com.google.firebase:perf-plugin:1.4.0'
40 classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
41
42
43 // NOTE: Do not place your application dependencies here; they belong
44 // in the individual module build.gradle files
45 }
46}
47
48allprojects {
49 repositories {
50 mavenCentral()
51 mavenLocal()
52 maven {
53 // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
54 url("$rootDir/../node_modules/react-native/android")
55 }
56 maven {
57 // Android JSC is installed from npm
58 url("$rootDir/../node_modules/jsc-android/dist")
59 }
60
61 google()
62 jcenter()
63 maven { url 'https://www.jitpack.io' }
64 }
65}
66
67
68subprojects {
69 afterEvaluate {project ->
70 if (project.hasProperty("android")) {
71 android {
72 buildToolsVersion "28.0.3"
73 compileSdkVersion 28
74 }
75 }
76 }
77}
78
79subprojects {
80 afterEvaluate {project ->
81 if (project.hasProperty("android")) {
82 android {
83 compileSdkVersion 29
84 buildToolsVersion '29.0.3'
85 }
86 }
87 }
88}
89packages
1 E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2 java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3 at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4 at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5 at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6 at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7 at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8 at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14// Top-level build file where you can add configuration options common to all sub-projects/modules.
15
16buildscript {
17 ext {
18 buildToolsVersion = "30.0.2"
19 minSdkVersion = 21
20 compileSdkVersion = 30
21 targetSdkVersion = 30
22 ndkVersion = "21.4.7075529"
23 }
24 repositories {
25 google()
26 mavenCentral()
27 jcenter()
28 // maven {
29 // url 'https://maven.fabric.io/public'
30 // }
31 maven { url "https://www.jitpack.io" }
32 }
33 dependencies {
34 classpath("com.android.tools.build:gradle:4.2.2")
35 classpath 'com.google.gms:google-services:4.2.0' // Google Services plugin
36 // Add the Fabric Crashlytics plugin.
37 // classpath 'io.fabric.tools:gradle:1.31.2'
38 // firebase performance sdk
39 classpath 'com.google.firebase:perf-plugin:1.4.0'
40 classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
41
42
43 // NOTE: Do not place your application dependencies here; they belong
44 // in the individual module build.gradle files
45 }
46}
47
48allprojects {
49 repositories {
50 mavenCentral()
51 mavenLocal()
52 maven {
53 // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
54 url("$rootDir/../node_modules/react-native/android")
55 }
56 maven {
57 // Android JSC is installed from npm
58 url("$rootDir/../node_modules/jsc-android/dist")
59 }
60
61 google()
62 jcenter()
63 maven { url 'https://www.jitpack.io' }
64 }
65}
66
67
68subprojects {
69 afterEvaluate {project ->
70 if (project.hasProperty("android")) {
71 android {
72 buildToolsVersion "28.0.3"
73 compileSdkVersion 28
74 }
75 }
76 }
77}
78
79subprojects {
80 afterEvaluate {project ->
81 if (project.hasProperty("android")) {
82 android {
83 compileSdkVersion 29
84 buildToolsVersion '29.0.3'
85 }
86 }
87 }
88}
89"dependencies": {
90 "@eva-design/eva": "^2.1.0",
91 "@react-native-async-storage/async-storage": "^1.15.14",
92 "@react-native-community/blur": "^3.6.0",
93 "@react-native-community/checkbox": "^0.5.0",
94 "@react-native-community/netinfo": "^6.0.1",
95 "@react-native-community/toolbar-android": "^0.1.0-rc.2",
96 "@react-native-firebase/analytics": "^10.3.1",
97 "@react-native-firebase/app": "^10.3.0",
98 "@react-native-firebase/auth": "^10.3.1",
99 "@react-native-firebase/crashlytics": "^10.3.1",
100 "@react-native-firebase/dynamic-links": "^10.3.1",
101 "@react-native-firebase/firestore": "^10.3.1",
102 "@react-native-firebase/iid": "^10.3.1",
103 "@react-native-firebase/in-app-messaging": "^10.3.1",
104 "@react-native-firebase/messaging": "^10.3.1",
105 "@react-native-firebase/perf": "^10.3.1",
106 "@react-native-firebase/remote-config": "^10.3.1",
107 "@react-native-firebase/storage": "^10.3.1",
108 "@react-native-picker/picker": "^2.1.0",
109 "@react-navigation/bottom-tabs": "^6.0.9",
110 "@react-navigation/native": "^6.0.6",
111 "@react-navigation/stack": "^6.0.11",
112 "@types/react-native": "^0.65.5",
113 "@ui-kitten/components": "^5.1.0",
114 "axios": "^0.19.0",
115 "i18n-js": "^3.5.1",
116 "moment": "^2.24.0",
117 "native-base": "2.13.8",
118 "react": "17.0.2",
119 "react-content-loader": "^4.3.4",
120 "react-native": "0.66.0",
121 "react-native-actions-sheet": "^0.5.6",
122 "react-native-adjust": "^4.28.0",
123 "react-native-amplitude-analytics": "^0.2.7",
124 "react-native-animatable": "^1.3.3",
125 "react-native-code-push": "^7.0.4",
126 "react-native-config": "^1.3.3",
127 "react-native-contacts": "^5.0.7",
128 "react-native-dots-pagination": "^0.2.0",
129 "react-native-fbsdk-next": "^6.2.0",
130 "react-native-fingerprint-scanner": "^6.0.0",
131 "react-native-floating-action": "^1.22.0",
132 "react-native-geocoding": "^0.4.0",
133 "react-native-geolocation-service": "^5.2.0",
134 "react-native-gesture-handler": "^1.5.2",
135 "react-native-get-random-values": "^1.4.0",
136 "react-native-html-to-pdf-lite": "^0.11.0",
137 "react-native-image-base64": "^0.1.4",
138 "react-native-image-pan-zoom": "^2.1.11",
139 "react-native-image-picker": "^4.1.2",
140 "react-native-image-resizer": "^1.2.0",
141 "react-native-in-app-review": "^2.1.7",
142 "react-native-linear-gradient": "^2.5.6",
143 "react-native-loading-spinner-overlay": "^1.1.0",
144 "react-native-material-menu": "^1.0.0",
145 "react-native-material-textfield": "^0.16.1",
146 "react-native-modal": "^13.0.0",
147 "react-native-phone-call": "^1.0.9",
148 "react-native-ratings": "^7.3.0",
149 "react-native-reanimated": "^1.13.0",
150 "react-native-safe-area-context": "^3.3.2",
151 "react-native-screens": "^3.9.0",
152 "react-native-share": "^7.2.1",
153 "react-native-smooth-pincode-input": "^1.0.9",
154 "react-native-sms-retriever": "https://github.com/sarmad1995/react-native-sms-retriever.git",
155 "react-native-snap-carousel": "^3.9.1",
156 "react-native-splash-screen": "^3.2.0",
157 "react-native-svg": "^12.1.1",
158 "react-native-version-check": "^3.4.2",
159 "react-native-version-number": "^0.3.6",
160 "react-native-view-shot": "^3.1.2",
161 "react-native-walkthrough-tooltip": "^1.3.0",
162 "react-redux": "^7.1.3",
163 "redux": "^4.0.4",
164 "redux-logger": "^3.0.6",
165 "redux-persist": "^6.0.0",
166 "redux-thunk": "^2.3.0",
167 "rn-fetch-blob": "^0.12.0",
168 "urbanairship-react-native": "^12.0.0",
169 "uuid": "^8.3.0"
170},
171ANSWER
Answered 2022-Feb-25 at 23:22We have fixed the issue by replacing
1 E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2 java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3 at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4 at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5 at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6 at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7 at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8 at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14// Top-level build file where you can add configuration options common to all sub-projects/modules.
15
16buildscript {
17 ext {
18 buildToolsVersion = "30.0.2"
19 minSdkVersion = 21
20 compileSdkVersion = 30
21 targetSdkVersion = 30
22 ndkVersion = "21.4.7075529"
23 }
24 repositories {
25 google()
26 mavenCentral()
27 jcenter()
28 // maven {
29 // url 'https://maven.fabric.io/public'
30 // }
31 maven { url "https://www.jitpack.io" }
32 }
33 dependencies {
34 classpath("com.android.tools.build:gradle:4.2.2")
35 classpath 'com.google.gms:google-services:4.2.0' // Google Services plugin
36 // Add the Fabric Crashlytics plugin.
37 // classpath 'io.fabric.tools:gradle:1.31.2'
38 // firebase performance sdk
39 classpath 'com.google.firebase:perf-plugin:1.4.0'
40 classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
41
42
43 // NOTE: Do not place your application dependencies here; they belong
44 // in the individual module build.gradle files
45 }
46}
47
48allprojects {
49 repositories {
50 mavenCentral()
51 mavenLocal()
52 maven {
53 // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
54 url("$rootDir/../node_modules/react-native/android")
55 }
56 maven {
57 // Android JSC is installed from npm
58 url("$rootDir/../node_modules/jsc-android/dist")
59 }
60
61 google()
62 jcenter()
63 maven { url 'https://www.jitpack.io' }
64 }
65}
66
67
68subprojects {
69 afterEvaluate {project ->
70 if (project.hasProperty("android")) {
71 android {
72 buildToolsVersion "28.0.3"
73 compileSdkVersion 28
74 }
75 }
76 }
77}
78
79subprojects {
80 afterEvaluate {project ->
81 if (project.hasProperty("android")) {
82 android {
83 compileSdkVersion 29
84 buildToolsVersion '29.0.3'
85 }
86 }
87 }
88}
89"dependencies": {
90 "@eva-design/eva": "^2.1.0",
91 "@react-native-async-storage/async-storage": "^1.15.14",
92 "@react-native-community/blur": "^3.6.0",
93 "@react-native-community/checkbox": "^0.5.0",
94 "@react-native-community/netinfo": "^6.0.1",
95 "@react-native-community/toolbar-android": "^0.1.0-rc.2",
96 "@react-native-firebase/analytics": "^10.3.1",
97 "@react-native-firebase/app": "^10.3.0",
98 "@react-native-firebase/auth": "^10.3.1",
99 "@react-native-firebase/crashlytics": "^10.3.1",
100 "@react-native-firebase/dynamic-links": "^10.3.1",
101 "@react-native-firebase/firestore": "^10.3.1",
102 "@react-native-firebase/iid": "^10.3.1",
103 "@react-native-firebase/in-app-messaging": "^10.3.1",
104 "@react-native-firebase/messaging": "^10.3.1",
105 "@react-native-firebase/perf": "^10.3.1",
106 "@react-native-firebase/remote-config": "^10.3.1",
107 "@react-native-firebase/storage": "^10.3.1",
108 "@react-native-picker/picker": "^2.1.0",
109 "@react-navigation/bottom-tabs": "^6.0.9",
110 "@react-navigation/native": "^6.0.6",
111 "@react-navigation/stack": "^6.0.11",
112 "@types/react-native": "^0.65.5",
113 "@ui-kitten/components": "^5.1.0",
114 "axios": "^0.19.0",
115 "i18n-js": "^3.5.1",
116 "moment": "^2.24.0",
117 "native-base": "2.13.8",
118 "react": "17.0.2",
119 "react-content-loader": "^4.3.4",
120 "react-native": "0.66.0",
121 "react-native-actions-sheet": "^0.5.6",
122 "react-native-adjust": "^4.28.0",
123 "react-native-amplitude-analytics": "^0.2.7",
124 "react-native-animatable": "^1.3.3",
125 "react-native-code-push": "^7.0.4",
126 "react-native-config": "^1.3.3",
127 "react-native-contacts": "^5.0.7",
128 "react-native-dots-pagination": "^0.2.0",
129 "react-native-fbsdk-next": "^6.2.0",
130 "react-native-fingerprint-scanner": "^6.0.0",
131 "react-native-floating-action": "^1.22.0",
132 "react-native-geocoding": "^0.4.0",
133 "react-native-geolocation-service": "^5.2.0",
134 "react-native-gesture-handler": "^1.5.2",
135 "react-native-get-random-values": "^1.4.0",
136 "react-native-html-to-pdf-lite": "^0.11.0",
137 "react-native-image-base64": "^0.1.4",
138 "react-native-image-pan-zoom": "^2.1.11",
139 "react-native-image-picker": "^4.1.2",
140 "react-native-image-resizer": "^1.2.0",
141 "react-native-in-app-review": "^2.1.7",
142 "react-native-linear-gradient": "^2.5.6",
143 "react-native-loading-spinner-overlay": "^1.1.0",
144 "react-native-material-menu": "^1.0.0",
145 "react-native-material-textfield": "^0.16.1",
146 "react-native-modal": "^13.0.0",
147 "react-native-phone-call": "^1.0.9",
148 "react-native-ratings": "^7.3.0",
149 "react-native-reanimated": "^1.13.0",
150 "react-native-safe-area-context": "^3.3.2",
151 "react-native-screens": "^3.9.0",
152 "react-native-share": "^7.2.1",
153 "react-native-smooth-pincode-input": "^1.0.9",
154 "react-native-sms-retriever": "https://github.com/sarmad1995/react-native-sms-retriever.git",
155 "react-native-snap-carousel": "^3.9.1",
156 "react-native-splash-screen": "^3.2.0",
157 "react-native-svg": "^12.1.1",
158 "react-native-version-check": "^3.4.2",
159 "react-native-version-number": "^0.3.6",
160 "react-native-view-shot": "^3.1.2",
161 "react-native-walkthrough-tooltip": "^1.3.0",
162 "react-redux": "^7.1.3",
163 "redux": "^4.0.4",
164 "redux-logger": "^3.0.6",
165 "redux-persist": "^6.0.0",
166 "redux-thunk": "^2.3.0",
167 "rn-fetch-blob": "^0.12.0",
168 "urbanairship-react-native": "^12.0.0",
169 "uuid": "^8.3.0"
170},
171implementation 'com.facebook.android:facebook-marketing:[4,5)'
172by
1 E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2 java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3 at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4 at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5 at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6 at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7 at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8 at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14// Top-level build file where you can add configuration options common to all sub-projects/modules.
15
16buildscript {
17 ext {
18 buildToolsVersion = "30.0.2"
19 minSdkVersion = 21
20 compileSdkVersion = 30
21 targetSdkVersion = 30
22 ndkVersion = "21.4.7075529"
23 }
24 repositories {
25 google()
26 mavenCentral()
27 jcenter()
28 // maven {
29 // url 'https://maven.fabric.io/public'
30 // }
31 maven { url "https://www.jitpack.io" }
32 }
33 dependencies {
34 classpath("com.android.tools.build:gradle:4.2.2")
35 classpath 'com.google.gms:google-services:4.2.0' // Google Services plugin
36 // Add the Fabric Crashlytics plugin.
37 // classpath 'io.fabric.tools:gradle:1.31.2'
38 // firebase performance sdk
39 classpath 'com.google.firebase:perf-plugin:1.4.0'
40 classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
41
42
43 // NOTE: Do not place your application dependencies here; they belong
44 // in the individual module build.gradle files
45 }
46}
47
48allprojects {
49 repositories {
50 mavenCentral()
51 mavenLocal()
52 maven {
53 // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
54 url("$rootDir/../node_modules/react-native/android")
55 }
56 maven {
57 // Android JSC is installed from npm
58 url("$rootDir/../node_modules/jsc-android/dist")
59 }
60
61 google()
62 jcenter()
63 maven { url 'https://www.jitpack.io' }
64 }
65}
66
67
68subprojects {
69 afterEvaluate {project ->
70 if (project.hasProperty("android")) {
71 android {
72 buildToolsVersion "28.0.3"
73 compileSdkVersion 28
74 }
75 }
76 }
77}
78
79subprojects {
80 afterEvaluate {project ->
81 if (project.hasProperty("android")) {
82 android {
83 compileSdkVersion 29
84 buildToolsVersion '29.0.3'
85 }
86 }
87 }
88}
89"dependencies": {
90 "@eva-design/eva": "^2.1.0",
91 "@react-native-async-storage/async-storage": "^1.15.14",
92 "@react-native-community/blur": "^3.6.0",
93 "@react-native-community/checkbox": "^0.5.0",
94 "@react-native-community/netinfo": "^6.0.1",
95 "@react-native-community/toolbar-android": "^0.1.0-rc.2",
96 "@react-native-firebase/analytics": "^10.3.1",
97 "@react-native-firebase/app": "^10.3.0",
98 "@react-native-firebase/auth": "^10.3.1",
99 "@react-native-firebase/crashlytics": "^10.3.1",
100 "@react-native-firebase/dynamic-links": "^10.3.1",
101 "@react-native-firebase/firestore": "^10.3.1",
102 "@react-native-firebase/iid": "^10.3.1",
103 "@react-native-firebase/in-app-messaging": "^10.3.1",
104 "@react-native-firebase/messaging": "^10.3.1",
105 "@react-native-firebase/perf": "^10.3.1",
106 "@react-native-firebase/remote-config": "^10.3.1",
107 "@react-native-firebase/storage": "^10.3.1",
108 "@react-native-picker/picker": "^2.1.0",
109 "@react-navigation/bottom-tabs": "^6.0.9",
110 "@react-navigation/native": "^6.0.6",
111 "@react-navigation/stack": "^6.0.11",
112 "@types/react-native": "^0.65.5",
113 "@ui-kitten/components": "^5.1.0",
114 "axios": "^0.19.0",
115 "i18n-js": "^3.5.1",
116 "moment": "^2.24.0",
117 "native-base": "2.13.8",
118 "react": "17.0.2",
119 "react-content-loader": "^4.3.4",
120 "react-native": "0.66.0",
121 "react-native-actions-sheet": "^0.5.6",
122 "react-native-adjust": "^4.28.0",
123 "react-native-amplitude-analytics": "^0.2.7",
124 "react-native-animatable": "^1.3.3",
125 "react-native-code-push": "^7.0.4",
126 "react-native-config": "^1.3.3",
127 "react-native-contacts": "^5.0.7",
128 "react-native-dots-pagination": "^0.2.0",
129 "react-native-fbsdk-next": "^6.2.0",
130 "react-native-fingerprint-scanner": "^6.0.0",
131 "react-native-floating-action": "^1.22.0",
132 "react-native-geocoding": "^0.4.0",
133 "react-native-geolocation-service": "^5.2.0",
134 "react-native-gesture-handler": "^1.5.2",
135 "react-native-get-random-values": "^1.4.0",
136 "react-native-html-to-pdf-lite": "^0.11.0",
137 "react-native-image-base64": "^0.1.4",
138 "react-native-image-pan-zoom": "^2.1.11",
139 "react-native-image-picker": "^4.1.2",
140 "react-native-image-resizer": "^1.2.0",
141 "react-native-in-app-review": "^2.1.7",
142 "react-native-linear-gradient": "^2.5.6",
143 "react-native-loading-spinner-overlay": "^1.1.0",
144 "react-native-material-menu": "^1.0.0",
145 "react-native-material-textfield": "^0.16.1",
146 "react-native-modal": "^13.0.0",
147 "react-native-phone-call": "^1.0.9",
148 "react-native-ratings": "^7.3.0",
149 "react-native-reanimated": "^1.13.0",
150 "react-native-safe-area-context": "^3.3.2",
151 "react-native-screens": "^3.9.0",
152 "react-native-share": "^7.2.1",
153 "react-native-smooth-pincode-input": "^1.0.9",
154 "react-native-sms-retriever": "https://github.com/sarmad1995/react-native-sms-retriever.git",
155 "react-native-snap-carousel": "^3.9.1",
156 "react-native-splash-screen": "^3.2.0",
157 "react-native-svg": "^12.1.1",
158 "react-native-version-check": "^3.4.2",
159 "react-native-version-number": "^0.3.6",
160 "react-native-view-shot": "^3.1.2",
161 "react-native-walkthrough-tooltip": "^1.3.0",
162 "react-redux": "^7.1.3",
163 "redux": "^4.0.4",
164 "redux-logger": "^3.0.6",
165 "redux-persist": "^6.0.0",
166 "redux-thunk": "^2.3.0",
167 "rn-fetch-blob": "^0.12.0",
168 "urbanairship-react-native": "^12.0.0",
169 "uuid": "^8.3.0"
170},
171implementation 'com.facebook.android:facebook-marketing:[4,5)'
172implementation 'com.facebook.android:facebook-marketing:latest.release'
173in android/app/build.gradle file.
Posted this so someone out there facing the same problem will find the solution easily. It took me and my team around one and a half day to figure it out as there is no clear solution out there.
Solution Ref: here
QUESTION
Memory Leak in React component using useEffect
Asked 2022-Feb-21 at 19:12Im doing a Carrousel that when it opens a "news" you can see a description in a modal, that works perfect, but when you click on a offer you redirect to another page with the info about that product.
It's working but when you do it, in the consolo shows the error of memory leak "react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function."
I'm knew using useEffect and I don't know how to avoid this.
Thanks for your time
This is the "AxiosCollection"
1import axios from "axios";
2const baseURL = "http://localhost:8080";
3
4function AxiosGetData(url, setData) {
5 axios
6 .get(`${baseURL}${url}`, {
7 headers: {
8 "Content-type": "application/json",
9 },
10 })
11 .then((response) => {
12 setData(response.data);
13 })
14 .catch((error) => {
15 return error;
16 });
17}
18
19export {
20 AxiosGetData
21};1import axios from "axios";
2const baseURL = "http://localhost:8080";
3
4function AxiosGetData(url, setData) {
5 axios
6 .get(`${baseURL}${url}`, {
7 headers: {
8 "Content-type": "application/json",
9 },
10 })
11 .then((response) => {
12 setData(response.data);
13 })
14 .catch((error) => {
15 return error;
16 });
17}
18
19export {
20 AxiosGetData
21};import React, { useState, useEffect } from "react";
22import { AxiosGetData } from "../AxiosCollection/AxiosCollection";
23import Modal from "../Modal/Modal";
24import { Link } from "react-router-dom";
25
26// Import Swiper React components
27import { Swiper, SwiperSlide } from "swiper/react";
28
29// Import Swiper styles
30import "swiper/swiper-bundle.min.css";
31import "swiper/swiper.min.css";
32
33import BenefitCard from "../";
34
35//Css file
36import "./Slider.css";
37
38// import Swiper core and required modules
39import SwiperCore, { Pagination, Navigation } from "swiper";
40
41// install Swiper modules
42SwiperCore.use([Pagination, Navigation]);
43
44const Slider = () => {
45 //state to populate with featured object from API
46 const [featured, setFeatured] = useState([]);
47 const [isOpen, setIsOpen] = useState(false);
48 const [featuredById, setFeaturedById] = useState();
49 const onCloseRequest = () => setIsOpen(false);
50
51 // hook to fetch data with Axios,it only runs once, takes an url and a function as params
52
53 const handleClick = (item) => {
54 AxiosGetData(`/jp-coin/featured/${item.featuredId}`, setFeaturedById);
55 setIsOpen(true);
56 };
57
58 useEffect(() => {
59 AxiosGetData("/...", setFeatured);
60
61 }, []);
62
63 return (
64 <Swiper
65 slidesPerView={1}
66 spaceBetween={30}
67 slidesPerGroup={1}
68 loop={true}
69 loopFillGroupWithBlank={true}
70 pagination={{ clickable: true }}
71 navigation={true}
72 breakpoints={{
73 768: {
74 slidesPerView: 3,
75 spaceBetween: 30,
76 slidesPerGroup: 3,
77 },
78 }}
79 className="mySwiper"
80 >
81 {featured.map((item) => (
82 <SwiperSlide key={item.featuredId} onClick={() => handleClick(item)}>
83 <Link to={item.type === "offer" ? `/jp-coin/offers/${item.featuredId}` : "/"}>
84 <BenefitCard benefit={item} />
85 </Link>
86 </SwiperSlide>
87 ))}
88 {featuredById && featuredById.type === "news" && (
89 <>
90 <Modal
91 isOpen={isOpen}
92 onCloseRequest={onCloseRequest}
93 className="slider__modalContainer"
94 >
95 <img src={featuredById.image} alt={featuredById.title} />
96 <h1 className="slider__modalTitle">{featuredById.title}</h1>
97 <p className="slider__modalDescription">
98 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic
99 blanditiis aperiam fuga ex, ratione recusandae ut harum, nam
100 doloremque veniam necessitatibus, fugiat delectus placeat possimus
101 totam sequi. Minus, at vitae.
102 </p>
103 </Modal>
104 </>
105 )}
106 ;
107 </Swiper>
108 );
109};
110
111export default Slider;ANSWER
Answered 2022-Feb-10 at 07:41That happens, because you're trying to update state asynchronously, and the update could happen when the component is unmounted.
You can keep a ref that will check if the component is mounted or not like in the code below.
Because I can't see the implementation of the AxiosGetData, you can just check is that ref is true, when you will consume the promise from the axios.
1import axios from "axios";
2const baseURL = "http://localhost:8080";
3
4function AxiosGetData(url, setData) {
5 axios
6 .get(`${baseURL}${url}`, {
7 headers: {
8 "Content-type": "application/json",
9 },
10 })
11 .then((response) => {
12 setData(response.data);
13 })
14 .catch((error) => {
15 return error;
16 });
17}
18
19export {
20 AxiosGetData
21};import React, { useState, useEffect } from "react";
22import { AxiosGetData } from "../AxiosCollection/AxiosCollection";
23import Modal from "../Modal/Modal";
24import { Link } from "react-router-dom";
25
26// Import Swiper React components
27import { Swiper, SwiperSlide } from "swiper/react";
28
29// Import Swiper styles
30import "swiper/swiper-bundle.min.css";
31import "swiper/swiper.min.css";
32
33import BenefitCard from "../";
34
35//Css file
36import "./Slider.css";
37
38// import Swiper core and required modules
39import SwiperCore, { Pagination, Navigation } from "swiper";
40
41// install Swiper modules
42SwiperCore.use([Pagination, Navigation]);
43
44const Slider = () => {
45 //state to populate with featured object from API
46 const [featured, setFeatured] = useState([]);
47 const [isOpen, setIsOpen] = useState(false);
48 const [featuredById, setFeaturedById] = useState();
49 const onCloseRequest = () => setIsOpen(false);
50
51 // hook to fetch data with Axios,it only runs once, takes an url and a function as params
52
53 const handleClick = (item) => {
54 AxiosGetData(`/jp-coin/featured/${item.featuredId}`, setFeaturedById);
55 setIsOpen(true);
56 };
57
58 useEffect(() => {
59 AxiosGetData("/...", setFeatured);
60
61 }, []);
62
63 return (
64 <Swiper
65 slidesPerView={1}
66 spaceBetween={30}
67 slidesPerGroup={1}
68 loop={true}
69 loopFillGroupWithBlank={true}
70 pagination={{ clickable: true }}
71 navigation={true}
72 breakpoints={{
73 768: {
74 slidesPerView: 3,
75 spaceBetween: 30,
76 slidesPerGroup: 3,
77 },
78 }}
79 className="mySwiper"
80 >
81 {featured.map((item) => (
82 <SwiperSlide key={item.featuredId} onClick={() => handleClick(item)}>
83 <Link to={item.type === "offer" ? `/jp-coin/offers/${item.featuredId}` : "/"}>
84 <BenefitCard benefit={item} />
85 </Link>
86 </SwiperSlide>
87 ))}
88 {featuredById && featuredById.type === "news" && (
89 <>
90 <Modal
91 isOpen={isOpen}
92 onCloseRequest={onCloseRequest}
93 className="slider__modalContainer"
94 >
95 <img src={featuredById.image} alt={featuredById.title} />
96 <h1 className="slider__modalTitle">{featuredById.title}</h1>
97 <p className="slider__modalDescription">
98 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic
99 blanditiis aperiam fuga ex, ratione recusandae ut harum, nam
100 doloremque veniam necessitatibus, fugiat delectus placeat possimus
101 totam sequi. Minus, at vitae.
102 </p>
103 </Modal>
104 </>
105 )}
106 ;
107 </Swiper>
108 );
109};
110
111export default Slider; const isMountedRef = useRef();
112
113 useEffect(() => {
114 isMountedRef.current = true
115 // In your async function check is the isMountedRef is true or not
116 AxiosGetData("/jp-coin/featured", setFeatured);
117
118 return () => { isMountedRef.current = false }
119 }, []);
120For example, using the regular fetch, you could achieve it like this:
1import axios from "axios";
2const baseURL = "http://localhost:8080";
3
4function AxiosGetData(url, setData) {
5 axios
6 .get(`${baseURL}${url}`, {
7 headers: {
8 "Content-type": "application/json",
9 },
10 })
11 .then((response) => {
12 setData(response.data);
13 })
14 .catch((error) => {
15 return error;
16 });
17}
18
19export {
20 AxiosGetData
21};import React, { useState, useEffect } from "react";
22import { AxiosGetData } from "../AxiosCollection/AxiosCollection";
23import Modal from "../Modal/Modal";
24import { Link } from "react-router-dom";
25
26// Import Swiper React components
27import { Swiper, SwiperSlide } from "swiper/react";
28
29// Import Swiper styles
30import "swiper/swiper-bundle.min.css";
31import "swiper/swiper.min.css";
32
33import BenefitCard from "../";
34
35//Css file
36import "./Slider.css";
37
38// import Swiper core and required modules
39import SwiperCore, { Pagination, Navigation } from "swiper";
40
41// install Swiper modules
42SwiperCore.use([Pagination, Navigation]);
43
44const Slider = () => {
45 //state to populate with featured object from API
46 const [featured, setFeatured] = useState([]);
47 const [isOpen, setIsOpen] = useState(false);
48 const [featuredById, setFeaturedById] = useState();
49 const onCloseRequest = () => setIsOpen(false);
50
51 // hook to fetch data with Axios,it only runs once, takes an url and a function as params
52
53 const handleClick = (item) => {
54 AxiosGetData(`/jp-coin/featured/${item.featuredId}`, setFeaturedById);
55 setIsOpen(true);
56 };
57
58 useEffect(() => {
59 AxiosGetData("/...", setFeatured);
60
61 }, []);
62
63 return (
64 <Swiper
65 slidesPerView={1}
66 spaceBetween={30}
67 slidesPerGroup={1}
68 loop={true}
69 loopFillGroupWithBlank={true}
70 pagination={{ clickable: true }}
71 navigation={true}
72 breakpoints={{
73 768: {
74 slidesPerView: 3,
75 spaceBetween: 30,
76 slidesPerGroup: 3,
77 },
78 }}
79 className="mySwiper"
80 >
81 {featured.map((item) => (
82 <SwiperSlide key={item.featuredId} onClick={() => handleClick(item)}>
83 <Link to={item.type === "offer" ? `/jp-coin/offers/${item.featuredId}` : "/"}>
84 <BenefitCard benefit={item} />
85 </Link>
86 </SwiperSlide>
87 ))}
88 {featuredById && featuredById.type === "news" && (
89 <>
90 <Modal
91 isOpen={isOpen}
92 onCloseRequest={onCloseRequest}
93 className="slider__modalContainer"
94 >
95 <img src={featuredById.image} alt={featuredById.title} />
96 <h1 className="slider__modalTitle">{featuredById.title}</h1>
97 <p className="slider__modalDescription">
98 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic
99 blanditiis aperiam fuga ex, ratione recusandae ut harum, nam
100 doloremque veniam necessitatibus, fugiat delectus placeat possimus
101 totam sequi. Minus, at vitae.
102 </p>
103 </Modal>
104 </>
105 )}
106 ;
107 </Swiper>
108 );
109};
110
111export default Slider; const isMountedRef = useRef();
112
113 useEffect(() => {
114 isMountedRef.current = true
115 // In your async function check is the isMountedRef is true or not
116 AxiosGetData("/jp-coin/featured", setFeatured);
117
118 return () => { isMountedRef.current = false }
119 }, []);
120 const isMountedRef = useRef();
121
122 useEffect(() => {
123 isMountedRef.current = true;
124
125 fetch('someAPIDomain').then(data => {
126 isMountedRef.current && setState(data);
127 });
128
129 return () => { isMountedRef.current = false }
130 }, []);
131QUESTION
Error: Must use import to load ES Module: D:\node_modules\react-markdown\index.js require() of ES modules is not supported
Asked 2022-Feb-13 at 06:31Currently I'm using "react": "17.0.2" and I have installed "react-markdown": "^7.0.1" via npm i react-markdown I'm using this package to display my rich text that I'm fetching from my Strapi CMS. I have used the following code to display the content:
1import ReactMarkdown from "react-markdown";
2
3export default function name({ posts }) {
4 return (
5 <>
6 <div>
7 <div>
8 {posts.Title}
9 </div>
10 </div>
11 <div>
12 <ReactMarkdown source={posts.Content} escapeHtml={false} />
13 </div>
14 </>
15 );
16}
17
18export async function getStaticProps() {
19 const res = await fetch("http://localhost:1337/blogs");
20 const posts = await res.json();
21
22 return {
23 props: { posts },
24 };
25}
26But when I run this it gives me the following error:
I'm using node v14.17.0 and have tried adding "type": "module".
My package.json:
1import ReactMarkdown from "react-markdown";
2
3export default function name({ posts }) {
4 return (
5 <>
6 <div>
7 <div>
8 {posts.Title}
9 </div>
10 </div>
11 <div>
12 <ReactMarkdown source={posts.Content} escapeHtml={false} />
13 </div>
14 </>
15 );
16}
17
18export async function getStaticProps() {
19 const res = await fetch("http://localhost:1337/blogs");
20 const posts = await res.json();
21
22 return {
23 props: { posts },
24 };
25}
26{
27 "name": "passportlegacy",
28 "version": "0.1.0",
29 "private": true,
30 "scripts": {
31 "dev": "next dev",
32 "build": "next build",
33 "start": "next start",
34 "lint": "next lint"
35 },
36 "dependencies": {
37 "axios": "^0.21.1",
38 "babel-plugin-inline-react-svg": "^2.0.1",
39 "next": "11.0.1",
40 "next-images": "^1.8.1",
41 "react": "17.0.2",
42 "react-dom": "17.0.2",
43 "react-map-gl": "^6.1.16",
44 "react-markdown": "^7.0.1",
45 },
46 "devDependencies": {
47 "@svgr/webpack": "^5.5.0",
48 "@types/react": "17.0.16",
49 "eslint": "7.32.0",
50 "eslint-config-next": "11.0.1",
51 "typescript": "4.3.5"
52 }
53}
54ANSWER
Answered 2021-Sep-01 at 10:23Node is currently treating your .js file as CommonJS. You need to tell Node to treat it as an ES module.
Try adding "type": "module" in your package.json file.
You can place it anywhere at the top level. E.g.:
1import ReactMarkdown from "react-markdown";
2
3export default function name({ posts }) {
4 return (
5 <>
6 <div>
7 <div>
8 {posts.Title}
9 </div>
10 </div>
11 <div>
12 <ReactMarkdown source={posts.Content} escapeHtml={false} />
13 </div>
14 </>
15 );
16}
17
18export async function getStaticProps() {
19 const res = await fetch("http://localhost:1337/blogs");
20 const posts = await res.json();
21
22 return {
23 props: { posts },
24 };
25}
26{
27 "name": "passportlegacy",
28 "version": "0.1.0",
29 "private": true,
30 "scripts": {
31 "dev": "next dev",
32 "build": "next build",
33 "start": "next start",
34 "lint": "next lint"
35 },
36 "dependencies": {
37 "axios": "^0.21.1",
38 "babel-plugin-inline-react-svg": "^2.0.1",
39 "next": "11.0.1",
40 "next-images": "^1.8.1",
41 "react": "17.0.2",
42 "react-dom": "17.0.2",
43 "react-map-gl": "^6.1.16",
44 "react-markdown": "^7.0.1",
45 },
46 "devDependencies": {
47 "@svgr/webpack": "^5.5.0",
48 "@types/react": "17.0.16",
49 "eslint": "7.32.0",
50 "eslint-config-next": "11.0.1",
51 "typescript": "4.3.5"
52 }
53}
54{
55 "name": "passportlegacy",
56 "version": "0.1.0",
57 "type": "module",
58 "private": true,
59 "scripts": {
60 ...
61 }
62 ...
63}
64More information: package.json and file extensions - Node.js 14.x LTS documentation
QUESTION
Cannot find name 'AbortSignal' during npm run build
Asked 2022-Feb-11 at 21:501node_modules/axios/index.d.ts:93:12 - error TS2304: Cannot find name 'AbortSignal'.
2
393 signal?: AbortSignal;
4 ~~~~~~~~~~~
5
6
7Found 1 error.
8When trying npm run build comand for node typescript project, i am getting above error, something related to axio package. before axio usage, npm run build working fine.
ANSWER
Answered 2021-Nov-23 at 19:48You need to add DOM to the lib array in your tsconfig.json:
1node_modules/axios/index.d.ts:93:12 - error TS2304: Cannot find name 'AbortSignal'.
2
393 signal?: AbortSignal;
4 ~~~~~~~~~~~
5
6
7Found 1 error.
8"lib": [
9 "es2018",
10 "DOM"
11 ],
12Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Axios
Tutorials and Learning Resources are not available at this moment for Axios
Share this Page
Get latest updates on Axios