Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Unhandled Rejection (TypeError): _nbind.externalList[num].dereference is not a function
See original GitHub issueHi Guys, I’m newry in the use of this component. I’m receiving the message from the title, when I try refresh the document with data in a json object that I upgrade when I push a Find (Buscar) button.
The error message is:
× Unhandled Rejection (TypeError): _nbind.externalList[num].dereference is not a function ▶ 8 stack frames were collapsed. View.cleanup C:/Repos/src/elements/Node.js:144 141 | 142 | cleanup() { 143 | this.children.forEach(c => c.cleanup());
144 | this.layout.unsetMeasureFunc(); 145 | Yoga.Node.destroy(this.layout); 146 | } 147 | View compiled (anonymous function) C:/Repos/src/elements/Node.js:143 140 | onAppendDynamically() {} 141 | 142 | cleanup() { 143 | this.children.forEach(c => c.cleanup()); 144 | this.layout.unsetMeasureFunc(); 145 | Yoga.Node.destroy(this.layout); 146 | } View compiled View.cleanup C:/Repos/src/elements/Node.js:143 140 | onAppendDynamically() {} 141 | 142 | cleanup() { 143 | this.children.forEach(c => c.cleanup()); 144 | this.layout.unsetMeasureFunc(); 145 | Yoga.Node.destroy(this.layout); 146 | } View compiled (anonymous function) C:/Repos/src/elements/Node.js:143 140 | onAppendDynamically() {} 141 | 142 | cleanup() { 143 | this.children.forEach(c => c.cleanup()); 144 | this.layout.unsetMeasureFunc(); 145 | Yoga.Node.destroy(this.layout); 146 | } View compiled View.cleanup C:/Repos/src/elements/Node.js:143 140 | onAppendDynamically() {} 141 | 142 | cleanup() { 143 | this.children.forEach(c => c.cleanup()); 144 | this.layout.unsetMeasureFunc(); 145 | Yoga.Node.destroy(this.layout); 146 | } View compiled (anonymous function) C:/Repos/src/elements/Node.js:143 140 | onAppendDynamically() {} 141 | 142 | cleanup() { 143 | this.children.forEach(c => c.cleanup()); 144 | this.layout.unsetMeasureFunc(); 145 | Yoga.Node.destroy(this.layout); 146 | } View compiled Page.cleanup C:/Repos/src/elements/Node.js:143 140 | onAppendDynamically() {} 141 | 142 | cleanup() { 143 | this.children.forEach(c => c.cleanup()); 144 | this.layout.unsetMeasureFunc(); 145 | Yoga.Node.destroy(this.layout); 146 | } View compiled (anonymous function) C:/Repos/src/elements/Document.js:131 128 | } 129 | 130 | cleanup() { 131 | this.subpages.forEach(p => p.cleanup()); 132 | } 133 | 134 | finish() { View compiled Document.cleanup C:/Repos/src/elements/Document.js:131 128 | } 129 | 130 | cleanup() { 131 | this.subpages.forEach(p => p.cleanup()); 132 | } 133 | 134 | finish() { View compiled Root.cleanup C:/Repos/src/elements/Root.js:28 25 | } 26 | 27 | cleanup() { 28 | this.document.cleanup(); 29 | } 30 | 31 | finish() { View compiled Root._callee$ C:/Repos/src/elements/Root.js:38 35 | async render() { 36 | this.instance = new PDFDocument({ autoFirstPage: false }); 37 | await this.document.render(); 38 | this.cleanup(); 39 | this.isDirty = false; 40 | } 41 | } View compiled ▼ 5 stack frames were expanded. tryCatch C:/Repos/react-liquidacion-transportistas-ui/node_modules/regenerator-runtime/runtime.js:45 Generator.invoke [as _invoke] C:/Repos/react-liquidacion-transportistas-ui/node_modules/regenerator-runtime/runtime.js:271 Generator.prototype.<computed> [as next] C:/Repos/react-liquidacion-transportistas-ui/node_modules/regenerator-runtime/runtime.js:97 asyncGeneratorStep C:/Repos/react-liquidacion-transportistas-ui/node_modules/@react-pdf/renderer/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3 _next C:/Repos/react-liquidacion-transportistas-ui/node_modules/@react-pdf/renderer/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25 ▲ 5 stack frames were expanded. This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.
Then I paste the code I am using.
import React, { useState } from “react”;
import { emphasize, makeStyles } from ‘@material-ui/core/styles’; import MenuItem from ‘@material-ui/core/MenuItem’; import FormControl from ‘@material-ui/core/FormControl’; import TextField from ‘@material-ui/core/TextField’; import Button from ‘@material-ui/core/Button’; import DateFnsUtils from “@date-io/date-fns”; import { MuiPickersUtilsProvider } from “@material-ui/pickers”; import esLocale from “date-fns/locale/es”; import Grid from ‘@material-ui/core/Grid’; import Paper from ‘@material-ui/core/Paper’; import PropTypes from ‘prop-types’; import Downshift from ‘downshift’; import deburr from ‘lodash/deburr’; import { compareAsc, compareDesc } from “date-fns/esm”; import { addDays } from “date-fns”; import calendarIcon from ‘…/images/calendaricon.svg’; import { createMuiTheme, Tooltip } from “@material-ui/core”; import { ThemeProvider } from “@material-ui/styles”; import Fade from ‘@material-ui/core/Fade’; import CircularProgress from ‘@material-ui/core/CircularProgress’; import ExpansionPanel from ‘@material-ui/core/ExpansionPanel’; import ExpansionPanelDetails from ‘@material-ui/core/ExpansionPanelDetails’; import ExpansionPanelSummary from ‘@material-ui/core/ExpansionPanelSummary’; import Typography from ‘@material-ui/core/Typography’; import ExpandMoreIcon from ‘@material-ui/icons/ExpandMore’; import { KeyboardDatePicker } from “@material-ui/pickers”; import logo from ‘…/images/logo.png’; import { PDFViewer, Page, Text, View, Document, Image, StyleSheet } from ‘@react-pdf/renderer’; import DetalleLiquidacion from “./DetalleLiquidacion”;
const materialTheme = createMuiTheme({ palette: { primary: { main: ‘#d43f3a’ }, secondary: { main: ‘#a52f2b’ }, }, overrides: { MuiPickersToolbar: { toolbar: { backgroundColor: ‘#d43f3a’, }, }, MuiPickersCalendarHeader: { switchHeader: { }, },
MuiPickersDay: {
day: {
color: '#d43f3a',
},
daySelected: {
backgroundColor:'#d43f3a' ,
'&:hover': {
backgroundColor: '#a52f2b',
},
},
dayDisabled: {
color: 'rgba(212,63,58,0.5)',
},
current: {
color: '#d43f3a',
},
},
}, });
const useStyles = makeStyles(theme => ({ root: { display: ‘flex’, flexWrap: ‘wrap’, flexGrow: 1 }, formControl: { marginTop: theme.spacing(2), marginLeft: theme.spacing(0), marginRight: theme.spacing(0), width: “100%”, textAlign: “left”, }, servicio: { marginTop: theme.spacing(2), paddingLeft: theme.spacing(0), marginLeft: ‘10px’, marginRight: ‘8px’,
width: "100%",
textAlign: "left",
}, calendarclase: { width: ‘23px’, float: ‘left’, paddingTop: ‘27px’, marginLeft: ‘0px’, marginRight: ‘5px’ },
calendar2clase: { width: ‘23px’, float: ‘left’, paddingTop: ‘27px’, marginLeft: ‘15px’, marginRight: ‘5px’ },
inputSituacion: { paddingLeft: ‘20px’ }, codigocontable: { paddingLeft: ‘0px’, paddingTop: ‘25px’
},
situacion: {
marginTop: theme.spacing(2),
marginLeft: ‘7px’,
width: “100%”,
textAlign: “left”,
paddingLeft:‘15px’
},
repartidor: {
marginTop: theme.spacing(2),
marginLeft: theme.spacing(0),
marginRight: theme.spacing(0),
width: “100%”,
textAlign: “left”,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
container: {
display: ‘flex’,
flexWrap: ‘wrap’,
},
textField: {
marginLeft: theme.spacing(0),
marginRight: theme.spacing(0),
width: “100%”,
textAlign: “center”,
},
arrastre: {
marginTop: theme.spacing(2),
paddingRight: theme.spacing(0),
width: “100%”,
textAlign: “left”,
},
destinoClass: {
marginLeft: theme.spacing(0),
marginRight: theme.spacing(0),
width: “100%”,
textAlign: “center”,
paddingRight: theme.spacing(1),
},
dateField: {
width: “100%”,
textAlign: “right”,
paddingLeft: ‘5px’,
color: ‘#d43f3a’,
float: ‘left’,
},
dense: {
marginTop: 19,
},
menu: {
width: 200,
},
button: {
backgroundColor: '#d43f3a',
'&:hover': {
backgroundColor: '#a52f2b',
},
paddingLeft: '10px',
paddingRight: '10px',
color: 'white',
margin: theme.spacing(3),
marginRight: theme.spacing(0),
marginLeft: theme.spacing(0),
float: 'left'
},
input: {
display: ‘none’,
},
picker: {
display: ‘flex’
},
valueContainer: {
display: ‘flex’,
flexWrap: ‘wrap’,
flex: 1,
alignItems: ‘center’,
overflow: ‘hidden’,
backgroundColor: ‘d43f3a’,
},
chip: {
margin: theme.spacing(0.5, 0.25),
},
chipFocused: {
backgroundColor: emphasize(
theme.palette.type === ‘light’ ? theme.palette.grey[300] : theme.palette.grey[700],
0.08,
),
},
noOptionsMessage: {
padding: theme.spacing(1, 2),
},
singleValue: {
fontSize: 16,
},
placeholder: {
position: ‘absolute’,
left: 2,
bottom: 6,
fontSize: 16,
},
paper: {
position: ‘absolute’,
zIndex: 20,
marginTop: theme.spacing(6),
left: 0,
right: 0,
},
input2: {
display: ‘flex’,
padding: 0,
height: ‘auto’,
},
inputRoot: {
flexWrap: ‘wrap’,
},
inputInput: {
width: ‘auto’,
flexGrow: 1,
},
dropdownStyle: {
marginTop: theme.spacing(6),
},
fade: {
zIndex: 1000,
position: “absolute”,
color: ‘#d43f3a’,
},
table: {
display: ‘table’,
width: “auto”,
margin: 20,
borderWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
borderStyle: ‘dotted’,
borderColor: ‘grey’,
flexDirection: ‘column’,
flexShrink: 1
},
tableRow: {
width: ‘100%’,
border: 3,
// alignItems: ‘justify’,
margin: “auto”,
flexDirection: “row”,
// flexGrow: 1,
// flexAlign: ‘strech’
},
tableColHeader: {
borderBottomColor: ‘#000’,
borderWidth: 1,
borderLeftWidth: 0,
borderTopWidth: 0,
width:“17%”
},
tableCellHeader: {
margin: 5,
fontSize: 12,
fontWeight: 500,
textAlign: ‘center’
},
tableCol: {
flexGrow: 1,
borderWidth: 1,
borderLeftWidth: 0,
borderTopWidth: 0
},
tableCell: {
margin: 5,
fontSize: 10
}
}));
const tableStyles = StyleSheet.create({ container: { flexDirection: ‘row’, ‘@media max-width: 400’: { flexDirection: ‘column’, }, }, leftColumn: { flexDirection: ‘column’, width: 170, marginLeft: 30, marginRight: 15, marginTop: 20, ‘@media max-width: 400’: { width: 290, marginRight: 30, }, ‘@media orientation: landscape’: { width: 200, marginRight: 50, }, }, rightColumn: { flexDirection: ‘column’, flexGrow: 1, flexShrink: 1, marginLeft: 15, marginRight: 30, marginTop: 20, borderStyle: ‘dashed solid double’,
border: 1,
borderWidth:1,
'@media max-width: 400': {
marginTop: 10,
marginLeft: 30,
},
}, table: { display: ‘table’, width: “auto”, margin: 5, borderWidth: 1, borderRightWidth: 1, borderBottomWidth: 1, borderStyle: ‘dotted’, borderColor: ‘grey’, flexDirection: ‘column’, flexShrink: 1 },
tableRow: {
width: '100%',
border: 1,
// alignItems: 'justify',
margin: "auto",
flexDirection: "row",
// flexGrow: 1,
// flexAlign: 'strech'
},
tableColHeader: { borderBottomColor: ‘#000’, borderWidth: 1, borderLeftWidth: 0, borderTopWidth: 0, width:“20%”, alignContent: “center” },
tableCellHeader: {
margin: 5,
fontSize: 12,
fontWeight: 500,
textAlign: 'center'
},
tableCol: {
flexGrow: 1,
borderWidth: 1,
borderLeftWidth: 0,
borderTopWidth: 0
},
tableCell: {
margin: 5,
fontSize: 10,
}
});
function Reports(props) { const classes = useStyles(); const [filtersDisabled, setDisabled] = useState(false); const [inputValueProveedor, setInputValueProveedor] = useState(‘’); const [selectedItemProveedor, setSelectedItemProveedor] = useState([]); const [tooltipProveedor, setTooltipProveedor] = useState(‘’); const [reporteLiquidacion, setReporteLiquidacion] = useState([]);
const [loading, setLoading] = React.useState(false); const [query, setQuery] = React.useState(‘idle’); const [expanded, setExpanded] = React.useState(‘panel1’); const timerRef = React.useRef();
const handleChange = panel => (event, isExpanded) => { setExpanded(isExpanded ? panel : false); };
React.useEffect( () => () => { clearTimeout(timerRef.current); }, [], );
let proveedores = []; props.proveedores.forEach(element => { proveedores.push({ label: element.codigoProveedor + " - " + element.nombreProveedor }); });
const [fechaDesde, setFechaDesde] = useState(new Date(“01/01/2020”)); const [fechaHasta, setFechaHasta] = useState(new Date()); const fechaMinimaPermitida = new Date(“01/01/2010”);
function handleChangeDesde(item){ const compFechas = compareAsc(item, fechaHasta); const compFechasInterval = compareAsc(addDays(item, 45), fechaHasta); if(compFechas === 1) { setFechaHasta(item); } else if(compFechasInterval === -1) { setFechaHasta(addDays(item, 30)); } setFechaDesde(item); }
function handleChangeHasta(item){ const compFechas = compareDesc(item, fechaDesde); const compFechasInterval = compareDesc(addDays(item, -45), fechaDesde); if(compFechas === 1) { setFechaDesde(item); } else if(compFechasInterval === -1) { setFechaDesde(addDays(item, -30)); } setFechaHasta(item); }
function handleChangeProveedor(item) { if (item !== null && item !== undefined) { setInputValueProveedor(item.substring(0, 6)); setSelectedItemProveedor(item.substring(0, 6)); } setTooltipProveedor(item === null ? ‘’ : item); }
function handleKeyDownProveedor(event) { if (event.key === ‘Escape’) { event.nativeEvent.preventDownshiftDefault = true; } else if (selectedItemProveedor.length && !inputValueProveedor.length && event.key === ‘Backspace’) { setSelectedItemProveedor(selectedItemProveedor.slice(0, selectedItemProveedor.length - 1)); } else if (event.key === ‘Enter’) { //Metodo de Calculo } }
function renderInputProveedor(inputProps) { const { InputProps, classes, ref, …other } = inputProps;
return (
<TextField
InputProps={{
inputRef: ref,
classes: {
root: classes.inputRoot,
input: classes.inputInput,
},
...InputProps,
}}
{...other}
type="search"
/>
);
}
function handleInputChangeProveedor(event) { setInputValueProveedor(event.target.value); }
function getSuggestionsProveedor(value, { showEmpty = false } = {}) { const inputValue = deburr(value.trim()).toLowerCase(); const inputLength = inputValue.length; let count = 0;
return inputLength === 0 && !showEmpty
? []
: proveedores.filter(suggestion => {
const keep = count < 5 && suggestion.label.toLowerCase().includes(inputValue);
if (keep) {
count += 1;
}
return keep;
});
}
function renderSuggestionProveedor(suggestionProps) { const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps; const isHighlighted = highlightedIndex === index; const isSelected = (selectedItem || ‘’).indexOf(suggestion.label) > -1;
return (
<MenuItem
{...itemProps}
key={suggestion.label}
selected={isHighlighted}
component="div"
style={{
fontWeight: isSelected ? 500 : 400,
}}
>
{suggestion.label}
</MenuItem>
);
} renderSuggestionProveedor.propTypes = { highlightedIndex: PropTypes.number, index: PropTypes.number, itemProps: PropTypes.object, selectedItem: PropTypes.string, suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired, };
function inputComponent({ inputRef, …props }) { return <div ref={inputRef} {…props} />; }
inputComponent.propTypes = { inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), };
function getReporteLiquidacion()
{
var ourHeader = new Headers();
ourHeader.append(‘Accept’, ‘application/json’);
ourHeader.append(‘Content-Type’, ‘application/json’);
ourHeader.append(‘Access-Control-Allow-Origin’, ‘*’);
ourHeader.append(‘Access-Control-Allow-Methods’, ‘POST, GET, OPTIONS, PUT’);
ourHeader.append(‘Access-Control-Allow-Headers’, ‘X-Requested-With’);
setLoading(true);
var filtrosBusqueda = "?CodigoProveedor=" + inputValueProveedor +
"&FechaDesde=" + fechaDesde.toLocaleDateString('es-ES') +
"&FechaHasta=" + fechaHasta.toLocaleDateString('es-ES');
fetch(`${process.env.REACT_APP_API_URL}/api/proveedores/reporteliquidaciones${filtrosBusqueda}`, {
method: 'GET',
headers: ourHeader
})
.then(resp => resp.json())
.catch(error => console.error('Error:', error))
.then(json => {
setReporteLiquidacion(json);
setLoading(false);
})
}
const newReporteLiquidacion = (
<Document>
<Page size="A4" orientation="landscape" >
<View style={tableStyles.container}>
<View style={tableStyles.leftColumn}>
<Image src={logo} style={{border: 1}} />
</View>
<View style={tableStyles.rightColumn}>
<Text></Text>
</View>
</View>
<View style={tableStyles.table}>
<View style={tableStyles.tableRow}>
<View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Fecha</Text></View>
<View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Suma Base</Text></View>
<View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>KMs</Text></View>
<View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>$ KMs</Text></View>
<View style={tableStyles.tableColHeader}><Text style={tableStyles.tableCell}>Total</Text></View>
</View>
{
reporteLiquidacion.map((registro, key) =>
<View style={tableStyles.tableRow}>
<View style={tableStyles.tableColHeader}>
<Text style={tableStyles.tableCell}>{registro.fecha}</Text>
</View>
<View style={tableStyles.tableColHeader}>
<Text style={tableStyles.tableCell}>{registro.codigoChofer}</Text>
</View>
<View style={tableStyles.tableColHeader}>
<Text style={tableStyles.tableCell}></Text>
</View>
<View style={tableStyles.tableColHeader}>
<Text style={tableStyles.tableCell}></Text>
</View>
<View style={tableStyles.tableColHeader}>
<Text style={tableStyles.tableCell}></Text>
</View>
</View>
)
}
</View>
</Page>
</Document>
);
return (
<form className={classes.root} autoComplete="off">
<Grid container item xs={12} justify="center">
<div style={{ width: “95%”, marginBottom: ‘30px’ }}>
<ExpansionPanel expanded={expanded === ‘panel1’} onChange={handleChange(‘panel1’)} >
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls=“panel1bh-content”
id=“panel1bh-header”>
<Typography>Filtros reporte</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container item sm={12} direction="row" justify="center" alignItems="center">
<div style={{ width: “95%” }}>
<Grid item lg={12} md={12} sm={12} xs={12} spacing={1} container direction="row" justify="flex-start" >
<Grid item lg={5} md={6} sm={6} xs={12} >
<Tooltip title={tooltipProveedor}>
<FormControl className={classes.repartidor}>
<Downshift
id="downshift-proveedores"
onChange={handleChangeProveedor}
>
{({
clearSelection,
getInputProps,
getItemProps,
getLabelProps,
getMenuProps,
highlightedIndex,
inputValue,
isOpen,
openMenu,
selectedItem
}) => {
const { onBlur, onChange, onFocus, …inputProps } = getInputProps({
onChange: event => {
if (event.target.value === ‘’) {
clearSelection();
}
handleInputChangeProveedor(event);
},
onFocus: openMenu,
placeholder: ‘Seleccionar proveedor’,
});
return (
<div className={classes.container}>
{renderInputProveedor({
fullWidth: true,
classes,
label: 'Proveedor',
InputLabelProps: getLabelProps({ shrink: true }),
InputProps: { onBlur, onChange, onFocus },
inputProps,
})}
<div {...getMenuProps()}>
{isOpen ? (
<Paper className={classes.paper} square>
{getSuggestionsProveedor(inputValue).map((suggestion, index) =>
renderSuggestionProveedor({
suggestion,
index,
itemProps: getItemProps({ item: suggestion.label }),
highlightedIndex,
selectedItem,
}),
)}
</Paper>
) : null}
</div>
</div>
);
}}
</Downshift>
</FormControl>
</Tooltip>
</Grid>
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={esLocale}>
<Grid item lg={3} md={6} sm={6} xs={12}>
<ThemeProvider theme={materialTheme}>
<KeyboardDatePicker
label="Fecha desde"
value={fechaDesde}
onChange={handleChangeDesde}
onKeyDown= {event =>
{
if (event.key === 'Enter') {
//Metodo de calculo;
}
}
}
format="dd/MM/yyyy"
className={classes.dateField}
disableFuture
margin="normal"
label="Fecha desde"
cancelLabel="CANCELAR"
todayLabel="HOY"
disabled={filtersDisabled}
keyboardIcon={<img src={calendarIcon} style={{width: '24px', height: '24px'}} />}
showTodayButton={true}
minDate={fechaMinimaPermitida}
maxDateMessage="La fecha no puede ser mayor a hoy"
minDateMessage={`La fecha no puede ser menor a la permitida (${fechaMinimaPermitida.toLocaleDateString('es-ES')})`}
invalidDateMessage="Forma de fecha inválido"
/>
</ThemeProvider>
</Grid>
<Grid item lg={3} md={6} sm={6} xs={12}>
<ThemeProvider theme={materialTheme}>
<KeyboardDatePicker
value={fechaHasta}
onChange={handleChangeHasta}
onKeyDown= {event =>
{
if (event.key === 'Enter') {
//Metodo de calculo;
}
}
}
format="dd/MM/yyyy"
className={classes.dateField}
disableFuture
margin="normal"
label="Fecha hasta"
cancelLabel="CANCELAR"
todayLabel="HOY"
disabled={filtersDisabled}
keyboardIcon={<img src={calendarIcon} style={{width: '24px', height: '24px'}} />}
showTodayButton={true}
minDate={fechaMinimaPermitida}
maxDateMessage="La fecha no puede ser mayor a hoy"
minDateMessage={`La fecha no puede ser menor a la permitida (${fechaMinimaPermitida.toLocaleDateString('es-ES')})`}
invalidDateMessage="Forma de fecha inválido"
/>
</ThemeProvider>
</Grid>
</MuiPickersUtilsProvider>
<Grid item lg={1} md={6} sm={6} xs={12}>
<Button variant="contained"
//color="primary"
className={classes.button}
onClick={getReporteLiquidacion}
disabled={filtersDisabled}>
Buscar
</Button>
</Grid>
</Grid>
</div>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
</Grid>
<Grid container item xs={12} justify="center">
<div style={{ width: "95%" }}>
<Fade in={loading} className={classes.fade}
style={{transitionDelay: query === 'progress' ? '800ms' : '0ms', }}
unmountOnExit>
<CircularProgress color="inherit" size={75} />
</Fade>
</div>
**<PDFViewer width="100%" height="200px" filename="documento.pdf">
{newReporteLiquidacion}
</PDFViewer>**
</Grid>
</form>
); }
export default Reports;
Thank you so much for any help.
Regards.
Javier.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:5
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@jochercoles to fix this issue upgrade to version 2.0.0-beta.4
yarn add @react-pdf/renderer@betaThank ISWANU. It’s working to me.
Thanks to the whole community.
Regards.
Javier.