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 doticontypescriptdoticon

star image 22012 doticonMIT

React Hooks for Data Fetching

vue-admin-template

by PanJiaChen doticonjavascriptdoticon

star image 14865 doticonMIT

a vue2.0 minimal admin template

got

by sindresorhus doticontypescriptdoticon

star image 10532 doticonMIT

🌐 Human-friendly and powerful HTTP request library for Node.js

vue-resource

by pagekit doticonjavascriptdoticon

star image 10108 doticonMIT

The HTTP client for Vue.js

framework

by nuxt doticontypescriptdoticon

star image 5586 doticonMIT

The Hybrid Vue(3) Framework.

vue-apollo

by vuejs doticonjavascriptdoticon

star image 5388 doticonMIT

🚀 Apollo/GraphQL integration for VueJS

spring-security-oauth

by spring-projects doticonjavadoticon

star image 4559 doticonApache-2.0

Support for adding OAuth1(a) and OAuth2 features (consumer and provider) for Spring web applications.

vue-realworld-example-app

by gothinkster doticonjavascriptdoticon

star image 3843 doticonMIT

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 doticontypescriptdoticon

star image 3304 doticonGPL-3.0

A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps

Trending New libraries in Axios

framework

by nuxt doticontypescriptdoticon

star image 5586 doticonMIT

The Hybrid Vue(3) Framework.

node-react-ecommerce

by basir doticonjavascriptdoticon

star image 1165 doticon

Build ECommerce Website Like Amazon By React & Node & MongoDB

React-Total

by harryheman doticonjavascriptdoticon

star image 901 doticonMIT

Ресурс для изучения React.js и связанных с ним технологий на русском языке

composition-api

by nuxt-community doticontypescriptdoticon

star image 664 doticonMIT

Composition API hooks for Nuxt.

use-wallet

by aragon doticontypescriptdoticon

star image 576 doticonMIT

👛 useWallet() · All-in-one solution to connect a dapp to an Ethereum provider.

vue-request

by AttoJS doticontypescriptdoticon

star image 516 doticonMIT

⚡️ Vue 3 composition API for data fetching, supports SWR, polling, error retry, cache request, pagination, etc. ⚡️ 一个能轻松帮你管理请求状态(支持SWR,轮询,错误重试,缓存,分页等)的 Vue 3 请求库

mande

by posva doticontypescriptdoticon

star image 510 doticonMIT

600 bytes convenient and modern wrapper around fetch with smart extensible defaults

Dart-Cms

by abcd498936590 doticonjavascriptdoticon

star image 366 doticonMIT

这是一套基于nodejs+mongodb实现的电影网站cms系统.功能完备.欢迎star

jetlinks-ui-antd

by jetlinks doticontypescriptdoticon

star image 361 doticonMIT

jetlinks community ant design 演示地址:http://demo.jetlinks.cn 账号/密码: test/test123456

Top Authors in Axios

1

PacktPublishing

19 Libraries

star icon292

2

nuxt-community

12 Libraries

star icon6276

3

bezkoder

7 Libraries

star icon177

4

IIC2233

7 Libraries

star icon235

5

lxchuan12

6 Libraries

star icon541

6

Ethiel97

5 Libraries

star icon47

7

DanielArturoAlejoAlvarez

5 Libraries

star icon49

8

Fictizia

5 Libraries

star icon37

9

duuliy

5 Libraries

star icon41

10

bradtraversy

5 Libraries

star icon889

1

19 Libraries

star icon292

2

12 Libraries

star icon6276

3

7 Libraries

star icon177

4

7 Libraries

star icon235

5

6 Libraries

star icon541

6

5 Libraries

star icon47

8

5 Libraries

star icon37

9

5 Libraries

star icon41

10

5 Libraries

star icon889

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:11

I'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);
23

Also, 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);
69

Also 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};
100

Also, 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;
156

ANSWER

Answered 2022-Apr-16 at 08:11
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;
156case ReducerTypes.GET_ALL_POSTS:
157            return {
158                ...state,
159                posts: {
160                    items: action.payload.items,
161                    pagination: action.payload.pagination
162                }
163            };
164

Try omitting that .concat()

Source https://stackoverflow.com/questions/71892118

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:08

I 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}
47

ANSWER

Answered 2021-Dec-19 at 16:06

Here 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};
58

Now, run your app. It should work.

Source https://stackoverflow.com/questions/70374005

QUESTION

React router v6 how to use `navigate` redirection in axios interceptor

Asked 2022-Mar-28 at 18:26
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);
30

ANSWER

Answered 2021-Nov-17 at 02:14

The 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}
63

Here, 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

Source https://stackoverflow.com/questions/69953377

QUESTION

The unauthenticated git protocol on port 9418 is no longer supported

Asked 2022-Mar-27 at 13:23

I 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.
7

Upon 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
9

I 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'
55

package.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}
234

ANSWER

Answered 2022-Mar-16 at 07:01

First, 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
236

That will change any git://github.com/ into https://github.com/.

For local projects

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/
237

You 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/
238

That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).

Source https://stackoverflow.com/questions/70663523

QUESTION

Vue <script setup> Top level await causing template not to render

Asked 2022-Mar-24 at 09:09

I'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>
24

As 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:09

Top-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>
34

Source https://stackoverflow.com/questions/69183835

QUESTION

Z_DATA_ERROR, ERRNO -3, zlib: incorrect data check, MBA M1

Asked 2022-Mar-17 at 00:11

Recently 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.

.eslintrc
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
56

This error was occurred:

Error
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
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:11

I 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

Source https://stackoverflow.com/questions/69793334

QUESTION

java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;

Asked 2022-Feb-25 at 23:22

It 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)
9

gradle-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
14

build.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}
89

packages

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},
171

ANSWER

Answered 2022-Feb-25 at 23:22

We 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)'
172

by

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'
173

in 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

Source https://stackoverflow.com/questions/71256006

QUESTION

Memory Leak in React component using useEffect

Asked 2022-Feb-21 at 19:12

Im 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:41

That 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  }, []);
120

For 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  }, []);
131

Source https://stackoverflow.com/questions/71055548

QUESTION

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:31

Currently 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}
26

But when I run this it gives me the following error:

enter image description here

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}
54

ANSWER

Answered 2021-Sep-01 at 10:23

Node 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}
64

Source https://stackoverflow.com/questions/69008215

QUESTION

Cannot find name 'AbortSignal' during npm run build

Asked 2022-Feb-11 at 21:50
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

When 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:48

You 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    ],
12

Source https://stackoverflow.com/questions/70079698

Community 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

share link

Get latest updates on Axios