Tag Archives: ReactJS

The current operating system is not capable of running this task. That typically means the task was written for Windows only. For example, written for Windows Desktop PowerShell. – AzureFileCopy@4

Hi everyone,

I am currently setting up an azure pipeline to deploy a ReactApp to a Blob storage container. I was a bit surprised when I hit the following error with an Ubuntu pool:

Task         : Azure file copy
Description  : Copy files to Azure Blob Storage or virtual machines
Version      : 4.184.1
Author       : Microsoft Corporation
Help         : https://docs.microsoft.com/azure/devops/pipelines/tasks/deploy/azure-file-copy
==============================================================================
##[error]The current operating system is not capable of running this task. That typically means the task was written for Windows only. For example, written for Windows Desktop PowerShell.
##[debug]System.InvalidOperationException: The current operating system is not capable of running this task. That typically means the task was written for Windows only. For example, written for Windows Desktop PowerShell.
   at Microsoft.VisualStudio.Services.Agent.Worker.TaskRunner.RunAsync()
   at Microsoft.VisualStudio.Services.Agent.Worker.StepsRunner.RunStepAsync(IStep step, CancellationToken jobCancellationToken)

I did a quick search in the task lists and couldn’t find anything specifically for Linux. A bit of Googling brought up an open Github thread stating that there currently isn’t a built in task to address this issue.

The next best alternative is to use the AzureCli task and invoke it that way:

- task: AzureCLI@1
    displayName: Deploy the UI
    inputs:
      azureSubscription: $(azureSubscription)
      scriptLocation: inlineScript
      inlineScript: |
        az storage blob upload-batch \
          --destination \$web \
          --account-name "$(storageAccountName)" \
          --source "$(Agent.BuildDirectory)/$(outputDir)"

I’ve linked the GitHub issue below. It has a few alternatives to this task as well so worth reading if you’re having issues: https://github.com/microsoft/azure-pipelines-tasks/issues/8920#issuecomment-640596461

Fallback image if src doesn’t exist for image tag – ReactJS

Hey everyone,

I have a small list component that I wanted to populate with a custom image based on the entity’s id. Unfortunately, not all entities have an image so some were appearing broken.

In order to get around this I used the img tag’s onError attribute in ReactJS. If the image can’t be found it the callback is invoked. In the callback I set the src of the image tag to a known placeholder.

<img
   src={`/img/widgets/${widgetId}.jpg`}
   style={{
      height: 50,
      width: 50,
   }}
   onError={(e: any) => e.target.src = '/img/widgets/no-image.jpg'}
/>

Using this attribute allows me to use a known convention to automatically populate images and then fallback to a suitable default if it’s not available.

I found the following links pretty handy when looking for a solution: https://stackoverflow.com/a/64326984/522859

Overwrite Selected Tree View Item Styles – Material UI ReactJS

Hi everyone,

Just a quick post on how to overwrite the styles of a selected tree item using material ui and ReactJS:

treeItem: {
paddingTop: theme.spacing(1),
‘&[aria-selected=”true”][aria-expanded=”true”] > div:nth-of-type(1)’: {
backgroundColor: ‘red’,
}
},

This will make the background color red for ONLY the selected item:
material-ui-tree-view

Cheers,
Chris

Missing .tsconfig when converting existing ReactJS project

Hi everyone,

I’ve finally decided to start learning typescript while working on a side project. The plan was to convert the existing project over using the following command:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

After restarting the web server I had expected to see a tsconfig.json file that would allow me to setup my preferred configuration. Unfortunately, mine was missing.

A bit of Googling revealed that the tsconfig file isn’t actually generated until you add a .ts or .tsx file to the project. In my case, I simply renamed an existing component and the configuration file was generated during the next startup. Note that you will also have to remove your jsconfig.json file (if you haven’t already).

Thanks to this blog for the detailed info: https://blog.bitsrc.io/why-and-how-use-typescript-in-your-react-app-60e8987be8de

Simple React-Leaflet Location Picker Setup

Hi everyone,

Just thought I’d share a very simple react-leaflet setup in case it’s able to help anyone.

screencast-localhost_3889-2019.08.24-14_01_41.gif

Add the css and javascript for leaflet to public > index.html:

  
https://unpkg.com/leaflet@1.5.1/dist/leaflet.js">https://unpkg.com/leaflet@1.5.1/dist/leaflet.js

Install react-leaflet via npm or yarn, also add the dependencies:

npm install react-leaflet # npm
npm install leaflet react react-dom # npm

yarn add react-leaflet # Yarn
yarn add leaflet react react-dom # Yarn

Create the map component:

import React, { useState } from 'react'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'


const MapSimple = () => {

    const [location, setLocation] = useState({
        lat: 51.505,
        lng: -0.09,
        zoom: 13,
    });
    const position = [location.lat, location.lng];
    
    const setMarkerPosition = e => {
        setLocation({ ...e.latlng, zoom: 19 });
        console.log(`My location is: ${JSON.stringify(e.latlng, null, 3)}`)
    };

    return (
        
            <TileLayer
                attribution='© OpenStreetMap contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            
                
                   A sample popup.
                
            
        
    )
}

export default MapSimple;

Request Denied – react-geocode

Hi everyone,

I’m currently testing react-geocode but hit a “request denied” error after providing my API key.

Error: Server returned status code REQUEST_DENIED

The solution was pretty simple thankfully – enable the Geocoding API for your project: https://developers.google.com/maps/documentation/geocoding/get-api-key

In my case I was re-using a Google maps key from another project where I’d enabled all of the map apis but not the GeoCoding one.

Module not found: Can’t resolve ‘leaflet’ in – react-leaflet error

Hey everyone,

I ran into the following error after installing react-leaflet and attempting to run an example:

Module not found: Can’t resolve ‘leaflet’ in ‘…\node_modules\react-leaflet\es’

It turned out I’d simply rushed things and skipped the second step in the documentation:

npm install leaflet react react-dom # npm
yarn add leaflet react react-dom # Yarn

Doco: https://react-leaflet.js.org/docs/en/installation.html

Typography Component without a Line Break – Material-UI

Hey everyone,

UPDATE:
In new versions you now need to add a display attribute: display=”inline”

I’ve been working with Material-UI and ReactJS and had a bit of an issue with a Typography component generating an unwanted link break:

download (1)

To fix it, all I needed was the inline attribute. Once added the text appeared next to the form element instead of below:
Capture
download (3)