axios | Promise based HTTP client for the browser and node.js | Reactive Programming library

by axios JavaScript Version: 1.3.4 License: MIT

X-Ray Key Features Code Snippets(10)Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | axios Summary

axios is a JavaScript library typically used in Programming Style, Reactive Programming, Nodejs applications. axios has no bugs, it has a Permissive License and it has medium support. However axios has 2 vulnerabilities. You can install using 'npm i tj-axios' or download it from GitHub, npm.

Promise based HTTP client for the browser and node.js.

Support

Quality

Security

License

Reuse

Support

Quality

Security

License

Reuse

Support

axios has a medium active ecosystem.

It has 99462 star(s) with 10257 fork(s). There are 1203 watchers for this library.

There were 10 major release(s) in the last 6 months.

There are 355 open issues and 3792 have been closed. On average issues are closed in 192 days. There are 48 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of axios is 1.3.4

axios Support

Best in #Reactive Programming

Average in #Reactive Programming

axios Support

Best in #Reactive Programming

Average in #Reactive Programming

Quality

axios has 0 bugs and 0 code smells.

axios Quality

Best in #Reactive Programming

Average in #Reactive Programming

axios Quality

Best in #Reactive Programming

Average in #Reactive Programming

Security

axios has 2 vulnerability issues reported (0 critical, 2 high, 0 medium, 0 low).

axios code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

axios Security

Best in #Reactive Programming

Average in #Reactive Programming

axios Security

Best in #Reactive Programming

Average in #Reactive Programming

License

axios is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

axios License

Best in #Reactive Programming

Average in #Reactive Programming

axios License

Best in #Reactive Programming

Average in #Reactive Programming

Reuse

axios releases are available to install and integrate.

Deployable package is available in npm.

Installation instructions, examples and code snippets are available.

axios saves you 167 person hours of effort in developing the same functionality from scratch.

It has 422 lines of code, 0 functions and 95 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

axios Reuse

Best in #Reactive Programming

Average in #Reactive Programming

axios Reuse

Best in #Reactive Programming

Average in #Reactive Programming

Top functions reviewed by kandi - BETA

kandi has reviewed axios and discovered the below as its top functions. This is intended to give you an instant insight into axios implemented functionality, and help decide if they suit your requirements.

Converts an object to a FormData

Cancel a token .

Convert form data to JSON

Set proxy configuration

Default conversion handler .

Terminate the load request body

Builds path to target object .

Iterate over an object

Copy properties from sourceObject to destination object

Resolves a URL node

Get all kandi verified functions for this library.

axios Key Features

Make XMLHttpRequests from the browser

Make http requests from node.js

Supports the Promise API

Intercept request and response

Transform request and response data

Cancel requests

Automatic transforms for JSON data

Client side support for protecting against XSRF

axios Examples and Code Snippets

Not getting any data from api controller into vue component

Lines of Code : 19

License : Strong Copyleft (CC BY-SA 4.0)

Copy

   try {
    axios
      .post("/api/show", {
        firstname: this.form.firstname,
        email: this.form.email,
        selectedAnswer: this.form.selectedAnswer,
        selectedCategory: this.form.selectedCategory,
      })
      .then((res) => {
        localStorage.setItem("show", JSON.stringify(res.data));
      });
  } catch (error) {
    console.error("error");
  }

loadProductDetails() {
    this.products = JSON.parse(localStorage.getItem('show'));
}

how to set default value from axios call to selectfield in a form

Lines of Code : 30

License : Strong Copyleft (CC BY-SA 4.0)

Copy

var vm = new Vue({
  el:"#app",
  data:{
    shopping_cart_items_list: ['item1']
  },
  methods: {
    currentitemamount(item, index) {
      // axios call
            return 2; // response.data.amount
    }
  }
});

React update state from the axios response

Lines of Code : 48

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import { useEffect, useState } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import apiurl from '../axios'; // custom axios interceptor

const AuthVerifyFunction = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isAuth, setIsAuth] = useState();

  const config = {
    headers: {
      'Content-Type': 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
    },
  };

  const verifyAuth = () => {
    apiurl
      .get('/api/auth/verify', config)
      .then((res) => {
        setIsAuth(res.data.success);
        setIsLoading(false);
        console.log(res);
        console.log('isAuth:', isAuth);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    verifyAuth();
  }, []);

  return (
    
      {isLoading ? (
        'Authenticating...'
      ) : isAuth ? (
        
      ) : (
        
      )}
    
  );
};

export default AuthVerifyFunction;

How to post more than one object using React JS, Axios with a Spring boot backend?

Lines of Code : 28

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import axios from 'axios';

const user_base_url = "http://localhost:8080/api";

class CostService{

    addCost(cost) {
        return axios.post(user_base_url + '/cost', cost);
    }

    uploadFile(image, root) {
       const config = {
           headers: { 'content-type': 'multipart/form-data' }
       }
       const formData = new FormData();
        formData.append('file', image);
        formData.append('root', root);
        return axios.post(user_base_url + '/cost_image_upload', formData, config);
    }

    showCost() {
        return axios.get(user_base_url + '/costings');
    }


}
export default new CostService();

How can I export a state from a parent file to a child file in React js?

Lines of Code : 38

License : Strong Copyleft (CC BY-SA 4.0)

Copy

function Parent() {
  const [species, setSpecies] = useState([]);

  useEffect(() => {
    axios
      .get(`https://pokeapi.co/api/v2/pokemon-species/${name}`)
      .then((results) => {
        return results.data;
      })
      .then((results) => {
        setSpecies(results);
      });
  }, [name]);

  return (
    <>
      // ...
      
    
  );
}

function Child({ species }) {
  return (
    <>
      // ...
      
        {species?.flavor_text_entries?.map((sf) => 
          sf?.language?.name === 'en' && sf?.version?.name === game && 
            <>
              {sf?.flavor_text?.replace('\u000c', ' ')}
            
        )}
      
    
  );
}

Send parameter data value array in vue js and backend laravel not work

Lines of Code : 17

License : Strong Copyleft (CC BY-SA 4.0)

Copy

    let params = new FormData;
    let arr = ['this', 'is', 'an', 'array'];
    
    for (var i = 0; i < arr.length; i++) {
      params.append('arr[]', arr[i]);
    }
      postGradingAkhir(params) {
        const url = `${API_URL_DEV}post-grading-akhir`
        options.headers.Authorization = 'bearer ' + localStorage.getItem('token')
        const data = axios
          .post(url, params, options)
          .then(response => response.data)
          .catch(err => err)
        return data
      }

Django, request.user prints AnonymousUser, even if i logged in

Lines of Code : 12

License : Strong Copyleft (CC BY-SA 4.0)

Copy

permission_classes = [IsAuthenticated]

axios
  .get(
    `http://localhost:8000/anything`,
    {
      headers: {
        Authorization: `Token ${token}`,
      },
    }
  )

React Router v6 changes URL but doesn't render

Lines of Code : 87

License : Strong Copyleft (CC BY-SA 4.0)

Copy

const ProjectOverview = (props) => {
  const { projectId } = useParams();
  ...

  useEffect(() => {
    axios
      .get("http://localhost:4000/projects/" + projectId, {
        withCredentials: true
      })
      .then((res) => {
        setProject(res.data);
        axios
          .get("http://localhost:4000/projects/" + projectId + "/owner", {
            withCredentials: true
          })
          .then((res) => {
            setOwner(res.data);
            axios
              .get("http://localhost:4000/projects/" + projectId + "/repos", {
                withCredentials: true
              })
              .then((res) => {
                setRepos(res.data);
                axios
                  .get(
                    "http://localhost:4000/projects/" + projectId + "/issues",
                    { withCredentials: true }
                  )
                  .then((res) => {
                    ...
                  });
              });
          });
      })
      .catch((err) => {
        ...
      });
    ...
  }, [projectId]);

const options = { withCredentials: true };
axios
  .get("http://localhost:4000/projects/" + projectId, options)
  .then((res) => {
    setProject(res.data);
    return axios.get(
      "http://localhost:4000/projects/" + projectId + "/owner",
      options
    );
  })
  .then((res) => {
    setOwner(res.data);
    return axios.get(
      "http://localhost:4000/projects/" + projectId + "/repos",
      options
    );
  })
  .then((res) => {
    setRepos(res.data);
    return axios.get(
      "http://localhost:4000/projects/" + projectId + "/issues",
      options
    );
  })
  .then((res) => {
    /**
     * distributing data for charts
     */
    const repoDistrubution = [0, 0, 0, 0];
    const csetDistribution = [0, 0, 0, 0];
    let cSum = 0;
    let rSum = 0;
    for (const issue of res.data) {
      ...
    }
    setCsetIssueDistribution(csetDistribution);
    setReposIssueDistribution(repoDistrubution);
    setCsetSum(cSum);
    setReposSum(rSum);
  })
  .catch((err) => {
    if (err.status === 404) {
      setProjectNotFound(true);
    }
    console.log(err);
  });

UseEffect & Axios Get issues on loading data to Card

Lines of Code : 36

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import axios from 'axios';

const API_URL = 'https://myapi/.....';

export function APIGet (resource = "", params = {}) {
  const session_id = JSON.parse(localStorage.getItem("session_id"));
  const url = API_URL + resource;

  params['session_id'] = session_id;

  return axios.get(url, {params: params})
    .then((v) => {
      return v.data
    })
    .catch((err) => console.log(["APIGet error:", err]));
}

import { APIGet } from '../API.js';

function RenderCardLoadMore() {
  const [data, setData] = useState([]);

  const resource = 'search';
  const params = { 'limit': '2' };

  useEffect(() => {
    console.log("initialload");
    APIGet(resource, params)
      .then(results => {
        setData(results);
      });
  }, []);

  return (....);
}

How can I trigger download base on API response?

Lines of Code : 11

License : Strong Copyleft (CC BY-SA 4.0)

Copy

axios
    .post(window.URL, body, { responseType: 'arraybuffer' })
    .then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download',  'filename.ext')
        document.body.appendChild(link)
        link.click()
    })

Community Discussions

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

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

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

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:

import Pages from "Constants/Pages";

const Component = () => {

    const history = useHistory();
    const navigateWithToken = (page) => {
        history.push(page);
      }
    };
    
    return (
        
           navigateWithToken(Pages.Articles)}
          >
          Articles
        
    )
};

export const ArticlesBtn = memo(Component);

Also, here is the Article page:

import { memo, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";

import PostItems from "SharedComponents/PostItems";
import { getAllPosts } from "Redux/Actions";
import Pages from "Constants/Pages";

const Page = () => {
  const posts = useSelector((state) => state?.articles?.posts?.items);
  const dispatch = useDispatch();
  const { push } = useHistory();
  useEffect(() => {
    dispatch(getAllPosts());
  }, []);

  const onClickPost = (item) => {
    push({
      pathname: Pages.SingleArticle,
      state: {
        postId: item.id,
        title: item.subject,
        is_saved: item.is_saved,
      },
    });
  };

  return (
    
      { 
        posts?.map((item, index) => {
          return (
             onClickPost(item)}
            />
          );
        })
      }
    
  );
};

export default memo(Page);

Also here is the API call:

const getAllPosts = (page = 1) => {
  return async (dispatch: ReduxDispatch) => {
    //"posts?for=for_website"
    dispatch(toggleLoading(true));
    try {
      const { data } = await axios({
        method: "GET",
        url: "posts?for=for_mobile",
        params: { page: page },
      });
      const items = data?.data?.data;
      const pagination = {
        current_page: data.data.current_page,
        last_page: data.data.last_page,
      };
      dispatch(
        dispatchItemToRedux({
          type: ReducerTypes.GET_ALL_POSTS,
          payload: {
            items,
            pagination,
          },
        })
      );
    } catch (err) {
      return Promise.reject(err);
    } finally {
      dispatch(toggleLoading(false));
    }
  };
};

Also, here is the reducer:

import ReducerTypes from "Redux/Types/ReducerTypes";

const INITIAL_STATE = {
    posts: {
        items: [],
        pagination: {}
    },
    singlePost: {
        id: null,
        subject: null,
        caption: null,
        deep_link: null,
        short_link: null,
        total_comments: null,
        total_likes: null,
        total_views: null,
        created: null,
        medias: null,
        likes: [] 
    },
    postComments: []
};

function articleReducer(state = INITIAL_STATE, action) {
    switch (action.type) {
        case ReducerTypes.GET_ALL_POSTS:
            return {
                ...state,
                posts: {
                    items: state.posts.items.concat(action.payload.items),
                    pagination: action.payload.pagination
                }
            };
        case ReducerTypes.GET_SINGLE_POST:
            return {
                ...state,
                singlePost: action.payload
            };
        case ReducerTypes.GET_POST_COMMENTS:
            return {
                ...state,
                postComments: action.payload
            };
        case ReducerTypes.GET_POST_LIKES:
            return {
                ...state,
                singlePost: {
                    ...state.singlePost,
                    likes: action.payload
                }
            };
        default:
            return state;
    };
};
export default articleReducer;

ANSWER

Answered 2022-Apr-16 at 08:11

case ReducerTypes.GET_ALL_POSTS:
            return {
                ...state,
                posts: {
                    items: action.payload.items,
                    pagination: action.payload.pagination
                }
            };

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:

{
  "name": "client",
  "version": "0.1.0",
  "private": true, 
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.24.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-file-base64": "^1.0.3",
    "react-redux": "^7.2.6",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://localhost:6000"
}

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:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:6000',
      changeOrigin: true,
    })
  );
};

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

import axios from "axios";
import { useNavigate } from "react-router-dom";

export const api = axios.create({
  baseURL: "http://127.0.0.1:8000/",
  headers: {
    "content-type": "application/json",
  },
});

api.interceptors.response.use(
  function (response) {
    return response;
  },
  function (er) {
    if (axios.isAxiosError(er)) {
      if (er.response) {
        if (er.response.status == 401) {

          // Won't work
          useNavigate()("/login");

        }
      }
    }

    return Promise.reject(er);
  }
);

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 :

import { useCallback, useEffect, useState } from "react"

export default function useAsync(callback, dependencies = []) {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState()
  const [value, setValue] = useState()

  // Simply manage 3 different states and update them as per the results of a Promise's resolution
  // Here, we define a callback
  const callbackMemoized = useCallback(() => {
    setLoading(true)
    setError(undefined)
    setValue(undefined)
    callback()
      // ON SUCCESS -> Set the data from promise as "value"  
      .then(setValue)
      // ON FAILURE -> Set the err from promise as "error"  
      .catch((error)=> {
          setError(error)
          useNavigate()('/login')
       })
      // Irresp of fail or success, loading must stop after promise has ran
      .finally(() => setLoading(false))
      // This function runs everytime some dependency changes
  }, dependencies)

  // To run the callback function each time it itself changes i.e. when its dependencies change
  useEffect(() => {
    callbackMemoized()
  }, [callbackMemoized])

  return { loading, error, value }
}

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

Command: git
Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
Directory: /home/runner/work/stackstream-fe/stackstream-fe
Output:
fatal: remote error: 
  The unauthenticated git protocol on port 9418 is no longer supported.

Upon investigation, it appears that below section in my yml file is causing the issue.

    - name: Installing modules
      run: yarn install

I have looked into this change log but can't seem to comprehend the issue.

Additional Details: Server: EC2 Instance Github actions steps:

  steps:
  - name: Checkout
    uses: actions/checkout@v2

  - id: vars
    run: |
      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

  - uses: pCYSl5EDgo/cat@master
    id: slack
    with:
      path: .github/workflows/slack.txt

  - name: Slack Start Notification
    uses: 8398a7/action-slack@v3
    env:
      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
      COLOR: good
      STATUS: '`Started`'
    with:
      status: custom
      fields: workflow,job,commit,repo,ref,author,took
      custom_payload: |
        ${{ steps.slack.outputs.text }}

  - name: Installing modules
    env:
      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
    run: yarn install

  - name: Create Frontend Build
    env:
      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
    run: yarn build

  - name: Deploy to Frontend Server DEV
    if: ${{ contains(github.ref, 'dev') }}
    uses: easingthemes/ssh-deploy@v2.1.5
    env:
      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
      ARGS: '-rltgoDzvO --delete'
      SOURCE: 'deploy/'
      REMOTE_HOST: ${{ secrets.DEV_HOST }}
      REMOTE_USER: plyfolio-dev
      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'

package.json file

   {
  "name": "stackstream-fe",
  "version": "1.0.0",
  "authors": [
    "fayyaznofal@gmail.com"
  ],
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34",
    "@fortawesome/free-solid-svg-icons": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@fullcalendar/bootstrap": "^5.5.0",
    "@fullcalendar/core": "^5.5.0",
    "@fullcalendar/daygrid": "^5.5.0",
    "@fullcalendar/interaction": "^5.5.0",
    "@fullcalendar/react": "^5.5.0",
    "@lourenci/react-kanban": "^2.1.0",
    "@redux-saga/simple-saga-monitor": "^1.1.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@toast-ui/react-chart": "^1.0.2",
    "@types/jest": "^26.0.14",
    "@types/node": "^14.10.3",
    "@types/react": "^16.9.49",
    "@types/react-dom": "^16.9.8",
    "@vtaits/react-color-picker": "^0.1.1",
    "apexcharts": "^3.23.1",
    "availity-reactstrap-validation": "^2.7.0",
    "axios": "^0.21.1",
    "axios-mock-adapter": "^1.19.0",
    "axios-progress-bar": "^1.2.0",
    "bootstrap": "^5.0.0-beta2",
    "chart.js": "^2.9.4",
    "chartist": "^0.11.4",
    "classnames": "^2.2.6",
    "components": "^0.1.0",
    "dotenv": "^8.2.0",
    "draft-js": "^0.11.7",
    "echarts": "^4.9.0",
    "echarts-for-react": "^2.0.16",
    "firebase": "^8.2.3",
    "google-maps-react": "^2.0.6",
    "history": "^4.10.1",
    "i": "^0.3.6",
    "i18next": "^19.8.4",
    "i18next-browser-languagedetector": "^6.0.1",
    "jsonwebtoken": "^8.5.1",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "lodash.get": "^4.4.2",
    "metismenujs": "^1.2.1",
    "mkdirp": "^1.0.4",
    "moment": "2.29.1",
    "moment-timezone": "^0.5.32",
    "nouislider-react": "^3.3.9",
    "npm": "^7.6.3",
    "prop-types": "^15.7.2",
    "query-string": "^6.14.0",
    "react": "^16.13.1",
    "react-apexcharts": "^1.3.7",
    "react-auth-code-input": "^1.0.0",
    "react-avatar": "^3.10.0",
    "react-bootstrap": "^1.5.0",
    "react-bootstrap-editable": "^0.8.2",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-bootstrap-table-next": "^4.0.3",
    "react-bootstrap-table2-editor": "^1.4.0",
    "react-bootstrap-table2-paginator": "^2.1.2",
    "react-bootstrap-table2-toolkit": "^2.1.3",
    "react-chartist": "^0.14.3",
    "react-chartjs-2": "^2.11.1",
    "react-color": "^2.19.3",
    "react-confirm-alert": "^2.7.0",
    "react-content-loader": "^6.0.1",
    "react-countdown": "^2.3.1",
    "react-countup": "^4.3.3",
    "react-cropper": "^2.1.4",
    "react-data-table-component": "^6.11.8",
    "react-date-picker": "^8.0.6",
    "react-datepicker": "^3.4.1",
    "react-dom": "^16.13.1",
    "react-draft-wysiwyg": "^1.14.5",
    "react-drag-listview": "^0.1.8",
    "react-drawer": "^1.3.4",
    "react-dropzone": "^11.2.4",
    "react-dual-listbox": "^2.0.0",
    "react-facebook-login": "^4.1.1",
    "react-flatpickr": "^3.10.6",
    "react-google-login": "^5.2.2",
    "react-hook-form": "^7.15.2",
    "react-i18next": "^11.8.5",
    "react-icons": "^4.2.0",
    "react-image-lightbox": "^5.1.1",
    "react-input-mask": "^2.0.4",
    "react-jvectormap": "^0.0.16",
    "react-leaflet": "^3.0.5",
    "react-meta-tags": "^1.0.1",
    "react-modal-video": "^1.2.6",
    "react-notifications": "^1.7.2",
    "react-number-format": "^4.7.3",
    "react-perfect-scrollbar": "^1.5.8",
    "react-rangeslider": "^2.2.0",
    "react-rating": "^2.0.5",
    "react-rating-tooltip": "^1.1.6",
    "react-redux": "^7.2.1",
    "react-responsive-carousel": "^3.2.11",
    "react-router-dom": "^5.2.0",
    "react-script": "^2.0.5",
    "react-scripts": "3.4.3",
    "react-select": "^4.3.1",
    "react-sparklines": "^1.7.0",
    "react-star-ratings": "^2.3.0",
    "react-super-responsive-table": "^5.2.0",
    "react-switch": "^6.0.0",
    "react-table": "^7.6.3",
    "react-toastify": "^7.0.3",
    "react-toastr": "^3.0.0",
    "react-twitter-auth": "0.0.13",
    "reactstrap": "^8.8.1",
    "recharts": "^2.0.8",
    "redux": "^4.0.5",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "sass": "^1.37.5",
    "simplebar-react": "^2.3.0",
    "styled": "^1.0.0",
    "styled-components": "^5.2.1",
    "toastr": "^2.1.4",
    "typescript": "^4.0.2",
    "universal-cookie": "^4.0.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.27.0",
    "@typescript-eslint/parser": "^2.27.0",
    "@typescript-eslint/typescript-estree": "^4.15.2",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-prettier": "^3.1.2",
    "husky": "^4.2.5",
    "lint-staged": "^10.1.3",
    "prettier": "^1.19.1",
    "react-test-renderer": "^16.13.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && mv build ./deploy/build",
    "build-local": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "eslint --fix"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

package-lock.json

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:

    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig

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

For local projects

For all your repositories, you can set:

git config --global url."https://github.com/".insteadOf git://github.com/

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:

git config --global url."git@github.com:".insteadOf git://github.com/

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

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

QUESTION

Vue

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:


  
    Test button
      
        
          Name
          Description
        
        
          
            {{ item.name }}
            {{ item.description }}

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:

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

{
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false,
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "impliedStrict": true,
      "jsx": true
    }
  },
  "plugins": ["react", "prettier", "@babel"],
  "rules": {
    // "prettier/prettier": [
    //   "warn",
    //   {
    //     "endOfLine": "auto",
    //   }
    // ],
    "no-console": 1,
    "indent": [
      2,
      2,
      {
        "SwitchCase": 1
      }
    ],
    "linebreak-style": 0,
    "quotes": [2, "single"],
    "semi": 0,
    "curly": [2, "all"],
    "camelcase": "off",
    "react/display-name": "off",
    "eqeqeq": [2, "smart"],
    "one-var-declaration-per-line": [2, "always"],
    "new-cap": 2,
    "no-case-declarations": 0
  },
  "globals": {
    "axios": true,
    "PropTypes": true
  },
  "settings": {
    "import/resolver": {
      "alias": [["./src/"]]
    }
  }
}

This error was occurred:

Error

npm ERR! code Z_DATA_ERROR
npm ERR! errno -3
npm ERR! zlib: incorrect data check

Log

5147 silly saveTree └── yup@0.32.11
5148 verbose stack ZlibError: zlib: incorrect data check
5148 verbose stack     at Unzip.write (/Users/metalheadcoder/.nvm/versions/node/v14.16.1/lib/node_modules/npm/node_modules/minizlib/index.js:147:22)
5148 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)
5148 verbose stack     at PassThrough.ondata (internal/streams/readable.js:719:22)
5148 verbose stack     at PassThrough.emit (events.js:315:20)
5148 verbose stack     at addChunk (internal/streams/readable.js:309:12)
5148 verbose stack     at readableAddChunk (internal/streams/readable.js:284:9)
5148 verbose stack     at PassThrough.Readable.push (internal/streams/readable.js:223:10)
5148 verbose stack     at PassThrough.Transform.push (internal/streams/transform.js:166:32)
5148 verbose stack     at PassThrough.afterTransform (internal/streams/transform.js:101:10)
5148 verbose stack     at PassThrough._transform (internal/streams/passthrough.js:46:3)
5148 verbose stack     at PassThrough.Transform._read (internal/streams/transform.js:205:10)
5148 verbose stack     at PassThrough.Transform._write (internal/streams/transform.js:193:12)
5148 verbose stack     at writeOrBuffer (internal/streams/writable.js:358:12)
5148 verbose stack     at PassThrough.Writable.write (internal/streams/writable.js:303:10)
5148 verbose stack     at Readable.ondata (internal/streams/readable.js:719:22)
5148 verbose stack     at Readable.emit (events.js:315:20)
5149 verbose cwd /Users/metalheadcoder/Gitlab/warefe
5150 verbose Darwin 21.1.0
5151 verbose argv "/Users/metalheadcoder/.nvm/versions/node/v14.16.1/bin/node" "/Users/metalheadcoder/.nvm/versions/node/v14.16.1/bin/npm" "install"
5152 verbose node v14.16.1
5153 verbose npm  v6.14.12
5154 error code Z_DATA_ERROR
5155 error errno -3
5156 error zlib: incorrect data check
5157 verbose exit [ -3, true ]

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

    E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
        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)
            at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
            at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
            at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
            at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
            at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
            at java.lang.Thread.run(Thread.java:923)

gradle-wrapper.properties

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
  ext {
      buildToolsVersion = "30.0.2"
      minSdkVersion = 21
      compileSdkVersion = 30
      targetSdkVersion = 30
      ndkVersion = "21.4.7075529"
  }
  repositories {
      google()
      mavenCentral()
      jcenter()
      // maven {
      //    url 'https://maven.fabric.io/public'
      // }
      maven { url "https://www.jitpack.io" }
  }
  dependencies {
      classpath("com.android.tools.build:gradle:4.2.2")
      classpath 'com.google.gms:google-services:4.2.0'  // Google Services plugin
      // Add the Fabric Crashlytics plugin.
      // classpath 'io.fabric.tools:gradle:1.31.2'
      // firebase performance sdk
      classpath 'com.google.firebase:perf-plugin:1.4.0'
      classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'


      // NOTE: Do not place your application dependencies here; they belong
      // in the individual module build.gradle files
  }
}

allprojects {
  repositories {
      mavenCentral()
      mavenLocal()
      maven {
          // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
          url("$rootDir/../node_modules/react-native/android")
      }
      maven {
          // Android JSC is installed from npm
          url("$rootDir/../node_modules/jsc-android/dist")
      }

      google()
      jcenter()
      maven { url 'https://www.jitpack.io' }
  }
}


subprojects {
  afterEvaluate {project ->
      if (project.hasProperty("android")) {
          android {
              buildToolsVersion "28.0.3"
              compileSdkVersion 28
          }
      }
  }
}

subprojects {
  afterEvaluate {project ->
      if (project.hasProperty("android")) {
          android {
              compileSdkVersion 29
              buildToolsVersion '29.0.3'
          }
      }
  }
}

packages

"dependencies": {
  "@eva-design/eva": "^2.1.0",
  "@react-native-async-storage/async-storage": "^1.15.14",
  "@react-native-community/blur": "^3.6.0",
  "@react-native-community/checkbox": "^0.5.0",
  "@react-native-community/netinfo": "^6.0.1",
  "@react-native-community/toolbar-android": "^0.1.0-rc.2",
  "@react-native-firebase/analytics": "^10.3.1",
  "@react-native-firebase/app": "^10.3.0",
  "@react-native-firebase/auth": "^10.3.1",
  "@react-native-firebase/crashlytics": "^10.3.1",
  "@react-native-firebase/dynamic-links": "^10.3.1",
  "@react-native-firebase/firestore": "^10.3.1",
  "@react-native-firebase/iid": "^10.3.1",
  "@react-native-firebase/in-app-messaging": "^10.3.1",
  "@react-native-firebase/messaging": "^10.3.1",
  "@react-native-firebase/perf": "^10.3.1",
  "@react-native-firebase/remote-config": "^10.3.1",
  "@react-native-firebase/storage": "^10.3.1",
  "@react-native-picker/picker": "^2.1.0",
  "@react-navigation/bottom-tabs": "^6.0.9",
  "@react-navigation/native": "^6.0.6",
  "@react-navigation/stack": "^6.0.11",
  "@types/react-native": "^0.65.5",
  "@ui-kitten/components": "^5.1.0",
  "axios": "^0.19.0",
  "i18n-js": "^3.5.1",
  "moment": "^2.24.0",
  "native-base": "2.13.8",
  "react": "17.0.2",
  "react-content-loader": "^4.3.4",
  "react-native": "0.66.0",
  "react-native-actions-sheet": "^0.5.6",
  "react-native-adjust": "^4.28.0",
  "react-native-amplitude-analytics": "^0.2.7",
  "react-native-animatable": "^1.3.3",
  "react-native-code-push": "^7.0.4",
  "react-native-config": "^1.3.3",
  "react-native-contacts": "^5.0.7",
  "react-native-dots-pagination": "^0.2.0",
  "react-native-fbsdk-next": "^6.2.0",
  "react-native-fingerprint-scanner": "^6.0.0",
  "react-native-floating-action": "^1.22.0",
  "react-native-geocoding": "^0.4.0",
  "react-native-geolocation-service": "^5.2.0",
  "react-native-gesture-handler": "^1.5.2",
  "react-native-get-random-values": "^1.4.0",
  "react-native-html-to-pdf-lite": "^0.11.0",
  "react-native-image-base64": "^0.1.4",
  "react-native-image-pan-zoom": "^2.1.11",
  "react-native-image-picker": "^4.1.2",
  "react-native-image-resizer": "^1.2.0",
  "react-native-in-app-review": "^2.1.7",
  "react-native-linear-gradient": "^2.5.6",
  "react-native-loading-spinner-overlay": "^1.1.0",
  "react-native-material-menu": "^1.0.0",
  "react-native-material-textfield": "^0.16.1",
  "react-native-modal": "^13.0.0",
  "react-native-phone-call": "^1.0.9",
  "react-native-ratings": "^7.3.0",
  "react-native-reanimated": "^1.13.0",
  "react-native-safe-area-context": "^3.3.2",
  "react-native-screens": "^3.9.0",
  "react-native-share": "^7.2.1",
  "react-native-smooth-pincode-input": "^1.0.9",
  "react-native-sms-retriever": "https://github.com/sarmad1995/react-native-sms-retriever.git",
  "react-native-snap-carousel": "^3.9.1",
  "react-native-splash-screen": "^3.2.0",
  "react-native-svg": "^12.1.1",
  "react-native-version-check": "^3.4.2",
  "react-native-version-number": "^0.3.6",
  "react-native-view-shot": "^3.1.2",
  "react-native-walkthrough-tooltip": "^1.3.0",
  "react-redux": "^7.1.3",
  "redux": "^4.0.4",
  "redux-logger": "^3.0.6",
  "redux-persist": "^6.0.0",
  "redux-thunk": "^2.3.0",
  "rn-fetch-blob": "^0.12.0",
  "urbanairship-react-native": "^12.0.0",
  "uuid": "^8.3.0"
},

ANSWER

Answered 2022-Feb-25 at 23:22

We have fixed the issue by replacing

implementation 'com.facebook.android:facebook-marketing:[4,5)'

implementation 'com.facebook.android:facebook-marketing:latest.release'

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"

import axios from "axios";
const baseURL = "http://localhost:8080";

function AxiosGetData(url, setData) {
  axios
    .get(`${baseURL}${url}`, {
      headers: {
        "Content-type": "application/json",
      },
    })
    .then((response) => {
      setData(response.data);
    })
    .catch((error) => {
      return error;
    });
}

export {
  AxiosGetData
};

import React, { useState, useEffect } from "react";
import { AxiosGetData } from "../AxiosCollection/AxiosCollection";
import Modal from "../Modal/Modal";
import { Link } from "react-router-dom";

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";

import BenefitCard from "../";

//Css file
import "./Slider.css";

// import Swiper core and required modules
import SwiperCore, { Pagination, Navigation } from "swiper";

// install Swiper modules
SwiperCore.use([Pagination, Navigation]);

const Slider = () => {
  //state to populate with featured object from API
  const [featured, setFeatured] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const [featuredById, setFeaturedById] = useState();  
  const onCloseRequest = () => setIsOpen(false);

  // hook to fetch data with Axios,it only runs once, takes an url and a function as params
  
  const handleClick = (item) => {
    AxiosGetData(`/jp-coin/featured/${item.featuredId}`, setFeaturedById);
    setIsOpen(true);
  };
  
  useEffect(() => {
    AxiosGetData("/...", setFeatured);
    
  }, []);

  return (
    
      {featured.map((item) => (
         handleClick(item)}>
          
            
          
        
      ))}
      {featuredById && featuredById.type === "news" && (
        <>
          
            
            {featuredById.title}
            
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic
              blanditiis aperiam fuga ex, ratione recusandae ut harum, nam
              doloremque veniam necessitatibus, fugiat delectus placeat possimus
              totam sequi. Minus, at vitae.
            
          
        
      )}
      ;
    
  );
};

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

  const isMountedRef = useRef();
  
  useEffect(() => {
    isMountedRef.current = true
    // In your async function check is the isMountedRef is true or not
    AxiosGetData("/jp-coin/featured", setFeatured);
    
    return () => { isMountedRef.current = false }
  }, []);

For example, using the regular fetch, you could achieve it like this:

  const isMountedRef = useRef();
  
  useEffect(() => {
    isMountedRef.current = true;

    fetch('someAPIDomain').then(data => {
      isMountedRef.current && setState(data);
    });

    return () => { isMountedRef.current = false }
  }, []);

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:

import ReactMarkdown from "react-markdown";

export default function name({ posts }) {
  return (
    <>
      
        
          {posts.Title}
        
      
      
        
      
    
  );
}

export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  return {
    props: { posts },
  };
}

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

I'm using node v14.17.0 and have tried adding "type": "module".

My package.json:

{
  "name": "passportlegacy",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "babel-plugin-inline-react-svg": "^2.0.1",
    "next": "11.0.1",
    "next-images": "^1.8.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-map-gl": "^6.1.16",
    "react-markdown": "^7.0.1",
  },
  "devDependencies": {
    "@svgr/webpack": "^5.5.0",
    "@types/react": "17.0.16",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }
}

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

{
  "name": "passportlegacy",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    ...
  }
  ...
}

More information: package.json and file extensions - Node.js 14.x LTS documentation

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

QUESTION

Cannot find name 'AbortSignal' during npm run build

Asked 2022-Feb-11 at 21:50

node_modules/axios/index.d.ts:93:12 - error TS2304: Cannot find name 'AbortSignal'.

93   signal?: AbortSignal;
              ~~~~~~~~~~~


Found 1 error.

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:

"lib": [
      "es2018",
      "DOM"
    ],

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

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install axios

You can use Gitpod an online IDE(which is free for Open Source) for contributing or running the examples online.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: