I am using PrimeNg v11.x element. Application is working fine with scrollHeight value set from a variable but the jasmine test is failing with error:
TypeError: Cannot set property scrollHeight of [object Element] which has only a getter
<p-tree
#tree
[value]="nodes"
selectionMode="checkbox"
[scrollHeight]="scrollHeight"
virtualScroll="true"
virtualNodeHeight="33"
></p-tree>
The test succeeds if i hard code the height value.
Can anyone help how to fix this issue?
Thanks
Try this it may help you. import the module that you are using like TreeModule.
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
imports: [TreeModule],
declarations: [Componentsdeclaration],
schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();
})
);
Related
Getting a weird error on ng serve
styles.css - Error: styles.css from Css Minimizer
TypeError: Cannot read property 'toLowerCase' of undefined
at /Users/pavlos-mac/projects/internal_portal/internal_portal/styles.css:73837:1
node.value is undefined in canMerge.js which is part of the css loading.
const hasInherit = node => node.value.toLowerCase() === 'inherit';
Any ideas?
Using Emotion for a React project I'm styling a particular div element with padding-bottom as the following:
export const StyledItem = styled('div')(() => ({
'&:nth-child(1) > div:nth-child(1)': {
paddingBottom: '1px'
}
}))
And getting the following error message in Chrome's console:
The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".
See the screenshot from the console:
The following change resolves the issue and removes the error message from the console:
export const StyledItem = styled('div')(() => ({
'&:nth-of-type(1) > div:nth-of-type(1)': {
paddingBottom: '1px'
}
}))
See the dependencies from package.json:
"dependencies": {
"#emotion/core": "^10.0.28",
"#emotion/styled": "^10.0.27",
"react": "^16.13.1",
"#storybook/react": "^5.3.13",
/* other dependencies */
}
Question:
So the suggested change for the error message resolved the issue. Also checked this question and this GitHub issue already which are not giving me a clear explanation.
The question is why is that error message has shown if the things are happening on client side and not on server side as the message states? Thank you!
When SSR renders the components, it also renders style elements along with it. The first child of the component may be a style element and using n-th-child could potentially be unsafe as it would be unintended behaviour.
EmotionJS GitHub Issue
I want to display Flags icons inside a React Bootstrap selection Option. I have tried both CSS based and React based libraries to do so and in each case I get only [object object]
I have tried with the https://github.com/lipis/flag-icon-css CSS library
<Form.Control as="select">
<option><span className="flag-icon flag-icon-gr"></span></option>
</Form.Control>
Which gives me a warning and the same [Object object]
Warning: Only strings and numbers are supported as <option> children.
I have also attempted with the React wrapper for the same library https://www.npmjs.com/package/react-flag-icon-css
<Form.Control as="select">
<option><FlagIcon className="countryIcon" code="us" size="lg"/></option>
</Form.Control>
Which does not generate a warning but no results either
Does anyone know how I can get something else than string or number in the Option, or another way to include an icon ?
Option HTML tag accepts text only, it can't accept any other HTML, it will strip it. You can check this React issue [bug][16.5.0] option returns [object Object] instead of string and read the comment by Dan Abramov:
I don't think it was strictly a regression. This is kind of a thorny
area. It was never intentionally supported. It accidentally worked on
initial mount but then crashed on updates (#13261). Fixing the crash
was more important, so we fixed it to be treated as text content
(which it should be). Unfortunately this means putting custom
components in the middle is not supported. That's consistent with how
textarea and similar elements work.
I think it's better to show invalid output and warn about something
that breaks on updates, than to let people use it only to discover it
crashes in production. But I can see arguments for why this should be
supported when the custom component returns a string. Unfortunately I
don't know how to fix it in a way that would both solve the update
crashes and support text-only content. I think for now it's reasonable
to say putting custom components into doesn't really work
(and never quite worked correctly), and ask you to manually provide a
string to it.
Alternatively, you can use Bootstrap Dropdowns to create a dropdown button with a list of countries using the code below:
App.js:
...
import Dropdown from 'react-bootstrap/Dropdown';
import FlagIcon from './FlagIcon.js'
function App() {
const [countries] = useState([
{ code: 'gr', title: 'Greece'},
{ code: 'gb', title: 'United Kingdom'},
{ code: 'us', title: 'United States'}
]);
const [toggleContents, setToggleContents] = useState("Select a country");
const [selectedCountry, setSelectedCountry] = useState();
return (
<div className="App">
<Form>
<Dropdown
onSelect={eventKey => {
const { code, title } = countries.find(({ code }) => eventKey === code);
setSelectedCountry(eventKey);
setToggleContents(<><FlagIcon code={code}/> {title}</>);
}}
>
<Dropdown.Toggle variant="secondary" id="dropdown-flags" className="text-left" style={{ width: 300 }}>
{toggleContents}
</Dropdown.Toggle>
<Dropdown.Menu>
{countries.map(({ code, title }) => (
<Dropdown.Item key={code} eventKey={code}><FlagIcon code={code}/> {title}</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</Form>
</div>
);
}
FlagIcon.js:
import React from 'react';
import FlagIconFactory from 'react-flag-icon-css';
// const FlagIcon = FlagIconFactory(React);
// If you are not using css modules, write the following:
const FlagIcon = FlagIconFactory(React, { useCssModules: false })
export default FlagIcon;
You'll get a dropdown button like this:
You can also check this working Stackblitz: https://stackblitz.com/edit/react-bootstrap-flags-dropdown-menu
Are you closing the tag
<Form.Control as="select">
[object Object] is displayed e.g when you are concatenating a string with an object, for example:
console.log(""+{})
I'm using the following components:
react v.16.5
react-redux v.6.0
ag-grid v.18.1
I'm using cellRendererFramework to display a custom component in one cell of ag-grid. However as soon as i make this custom component a connected component,
Error:
Could not find "store" in the context of "Connect(TestComponent)". Either wrap the root component in a , or pass a custom React
context provider to and the corresponding React context
consumer to Connect(TestComponent) in connect options.
the colDef in the ag-grid is as follows:
{
field: "TestField",
headerName: "Test Field",
rowGroup: false,
cellRendererFramework: TestComponent
}
// TestComponent.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
class TestComponent extends Component {
render() {
return(<div>Hello</div>);
}
}
export default connect()(TestComponent);
I've created the store and defined the provider at the Index.js level.
Is it that cellrendererFrameworks cannot be connected?
I came across this issue in another stack overflow post but there they'd said this issue has been resolved in react vers. 13?
https://github.com/ag-grid/ag-grid-react/issues/88
Please note this is not for writing a testcase- i need the TestComponent to actually be connected.
Please could someone help with this as it seems a pretty fundamental bug that nested components are getting blocked from being connected.
From the docs and lilbumbleber's response:
With React 16 Portals were introduced and these are the preferred way to create React components dynamically. If you wish to try use this feature you'll need to enable it as follows:
// Grid Definition
<AgGridReact
reactNext={true}
...other bindings
If you use connect to use Redux, or if you're using a Higher Order Component to wrap the React component at all, you'll also need to ensure the grid can get access to the newly created component. To do this you need to ensure forwardRef is set:
export default connect(
(state) => {
return {
currencySymbol: state.currencySymbol,
exchangeRate: state.exchangeRate
}
},
null,
null,
{ forwardRef: true } // must be supplied for react/redux when using GridOptions.reactNext
)(PriceRenderer);
So, you could try adding those two:
Add reactNext={true} to <AgGridReact/> component
Change
connect()(TestComponent);
to
connect(null, null, null, { forwardRef: true })(TestComponent);
Edit: This bug was fixed in version 20.x
I've installed react-transition-group and am calling it with:
import { CSSTransition, TransitionGroup } from 'react-transition-group'
I am then using it like this:
const PageFade = (props) => (
<CSSTransition
{...props}
classNames="fadeTranslate"
timeout={1000}
mountOnEnter={true}
unmountOnExit={true} />
)
But on mounting the app I'm getting an error when calling the component:
I've tried installing react-transition-group on both an existing project and a new one, and exactly the same thing happens.
Are you sure that all of props.children are not undefined? If you passed some undefined childern for the componet you'll get this error. Component must be string, class/function or null.