I use react-script start, and in chrome console I see warnings point not to the jsx file but bundle.js. Debugging works proper however using the original files, so it looks that sourcemap works (or not?). Is it possible to see points to the original files.
Example of the warning:
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
at input
at li
at ul
at TodosList (http://localhost:3000/static/js/bundle.js:430:5)
at section
at Main (http://localhost:3000/static/js/bundle.js:340:5)
at section
at App (http://localhost:3000/static/js/bundle.js:35:76)
Related
I am working on MUI template and when I make changes i have seen it is showing errors that usually does not matter. e.g if I import a component in a file but i decide not to use it , react will show me error saying something like this
Line 12:3: 'Story' is defined but never used no-unused-vars
in one of my file I decided not to use this (story) component and react showed me this error. its annoying when u have a lot of changes to make and you keep getting these kinda errors. how can I get rid of these kind of errors permanently
First solution is to remove any unused imports, and declarations of variables/methods/components.
The second solution is to paste this link above your line
//eslint-disable-next-line
I use quill editor. After i add this using react-html-parser. But this give me warning. How to fix it?
Warning: A component is contentEditable and contains children
managed by React. It is now your responsibility to guarantee that none
of those nodes are unexpectedly modified or duplicated. This is
probably not intentional.
I have a huge number of console errors like this appearing in my app:
Warning: React does not recognize the textStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase textstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Ideally I would fix the errors but sadly that's not possible as I'm using Styled System with Styled Components:
https://github.com/styled-system/styled-system/issues/1044
As a less than ideal workaround Id like to disable certain errors from the console for the development version of React. Can this be done?
Not sure if it matters but I'm using React Native Web.
You can override the console.warn method with your own function that filters out the warnings you want to ignore:
const consoleWarn = console.warn;
const SUPPRESSED_WARNINGS = ['arning text - I will n'];
console.warn = function filterWarnings(msg, ...args) {
if (!SUPPRESSED_WARNINGS.some((entry) => msg.includes(entry))) {
consoleWarn(msg, ...args);
}
};
console.warn('I\'ll appear as a warning');
console.warn('warning text - I will not');
I'm not sure which console method react is using internally, so you may need to do the same for console.info, console.log and console.error.
You can also just use the production version of react, which suppresses all warnings by default, but of course you can't pick and choose, you loose all warnings in that case.
I'm trying to write Jest tests for a React component which contains a DashJS media player. I'm using Enzyme's mount method to try and test the component, but it seems that the DashJS media player fails to mount properly.
In my componentDidMount method, I have the following code:
this.videoManager = dashjs.MediaPlayer().create();
this.videoManager.initialize(this.videoPlayer, videoUrl, true);
// Where this.videoPlayer is a reference to an HTML <video> element
this.videoManager.preload();
The last line (this.videoManager.preload();) produces the following error:
You must first call attachSource() with a valid source before calling this method thrown
When I run the component it works normally - it's only the testing I'm having issues with. I haven't been able to find any related issues/solutions online.
I'm using the following versions of each relevant package:
react: "16.2.0"
dashjs: "2.6.7"
jest: "22.3.0"
enzyme: "3.3.0"
enzyme-adapter-react-16: "1.1.1"
Any help will be appreciated!
That error implies that there was some issue with videoUrl, which caused the value passed in initialize not to be set. When preload checks that a valid source has been set, the error is thrown.
At a guess, is videoUrl an empty string in your test but non-zero length when the component is used normally?
Looking at this again, the problem is probably that you are (presumably) using JSDOM to provide the DOM for your tests, and JSDOM does not provide MediaSource or WebKitMediaSource in window. This causes dash.js to fail to initialise. dash.js should throw a capability error which can be caught using player.on('error', () => {}).
As a side note, you are providing a video object to initialize, as well as setting autoplay to true. Doing the first will cause preload do nothing since it will just load segments in to the SourceBuffer instead, which probably isn't what you wanted.
I am using react v15.1 and it's got this small change where null value props throws the following error:
The console log isn't very helpful, what's a better way to find out in which component this null value props is located?
Thank you
Future versions of React will treat as a request to clear the input. However, React 0.14 has been ignoring value={null}. React 15 warns you on a null input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass undefined to make the input uncontrolled.
https://facebook.github.io/react/blog/2016/04/07/react-v15.html
Details is here https://github.com/facebook/react/pull/5048/commits
You can either use breakpoint or manually check all components that have input, select or textarea within the page