I'm new to ReactJS and I'm trying to follow the tutorial here: https://reactjs.org/tutorial/tutorial.html . Everything seems fine except at this step: https://reactjs.org/tutorial/tutorial.html#picking-a-key where it says
For now, we should see a list of the moves that have occurred in the game and a warning that says:
Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.
I've set up my project using create-react-app (following the instructions here: https://reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment), did not change any settings, yet for some reason at this step (before a key is added to the li element) when I run "npm start", I don't see the said warning.
I've tried googling for the answer, ironically all the results I've found are people asking how to get rid of this warning, whereas I'm trying to see this warning. Does anyone know what could be happening here?
Thanks in advance!
It is a warning coming from React side and you can see it in your browser's developer tool's console as an error. I know it is weird but I think people turn off the warnings and since keys are necessary for React to handle the list items in a stable way, it is shown as an error.
Related
I am launching the create-react-app and if throws me one error, but if I see it on Chrome dev tools it refers to one line in the bundle.js that is generated by webpack by default in create-react-app... So it's not useful for debuging.
Are there any way of that Google Chrome Dev Tools show me the error link line to the original .js file and not to the bundle.js one?
Now I only see this error:
This particular warning will lead you only as far as react-dom.development.js, which is equally useless in my opinion. But if you really want to know what happened, my guess is that you started the production server instead of development.
Either way, the warning is still very revealing and might help you discover the problem even without knowing the exact file. It's telling you that you set the c prop to a boolean on a <div> element (you can know this from the "at div" part of your warning), which is unsupported. This is was most likely a typo or hitting the key accidentally without wanting to type anything, so you might have something like <div c> somewhere.
You can search for this in your project using a regex like \bc\b, or search for a string like c={ in case your mistake was more deliberate.
I've just updated some depencencies in a React project using npm install and the updated project works nicely on all browser except Safari.
On Safari it shows a blanks screen and an error in the console:
SyntaxError: Invalid regular expression: invalid group specifier name
file: 2.f80ba52b.chunk.js
I can exclude breaking changes from updated dependencies, otherwise it would have broken on other browsers too. Despite that, I cannot figure out what is causing it.
Even if similar questions exist, and the root cause has been already recognized as the missing Safari support for lookbehind regex, I would like to provide a general way to handle those situations where, as described in the main question, you can not just fix a line of code - for example when the issue is caused by an external library.
How to handle broken external depencencies
In my case, the bug had been introduced with draft-js-utils 1.4.1, so I solved it downgrading to the first know working version (1.4.0). In order to achieve this, I edited the package.json file changing the dependency line from
"draft-js-utils": "^1.4.0"
to
"draft-js-utils": "1.4.0"
TIP: Avoiding the caret range, you can stick it to a specific version.
How to find broken external depencencies
The only way to find out what dependencies have been affected by this bug is to look for the error message in Github/Gitlab search - currently almost 300 public repositories have a related issue opened.
The hardest thing about this bug is that it could be hidden inside transitive dependencies.
You might not even know you are using that package.
If you are not lucky enough to spot it using a Github/Gitlab search, you could try with a local search using your IDE or grep. You need to look for the lookbehind symbols ?<!:
grep -r "?<\!" node_modules
Being a last resort, this approach could be either very slow or produce a huge-and-hard-to-read output.
A sad note
It looks like Webkit developers are not going to add lookbehind regex support soon - the issue has been created in July 2017 without receiving attention from them. Moreover, even if the Safari's issue has been recognized and tracked, no polyfill exists to fix it at the build level (e.g. using Babel).
I just want to add that I spent a week downgrading Babel and other packages to pre-2018 packages, only to realise that my problem was in a helper function within my own code that was to filter for malicious html code.
#lifeisfoo mentions to grep for the string '?<!' above in node_modules, but i recommend also grepping the entire project.
fyi, my regex that was breaking Safari was '?<=!'. Which is also an unsupported lookbehind
I tested my regex: (?<=![)(.*?)(?=]) in Safaris regex tester https://www.regextester.com/ and the output says 'Lookbehind is not supported in Javascript'
To end, I found Safaris console error message worthless and spread around the 10,000s of lines of the bundle.js, giving the impression that the issue was within the packages/dependancies, which it clearly was not.
I spent ages downgrading the packages only to find the same error message appear on a different line of the bundle.js code.
I've recently started using TypeScript with Expo. I've done all the linter/formatter integrations like typescript-eslint so I can catch most of the errors during coding. To check if the code compiles, I run npx tsc every once in a while and fix accordingly.
One thing that I haven't fully grasped yet is why my app builds successfully even when there are numerous compile errors. I expect (and prefer) to see a red screen error for every compile error rather than the app build successfully and me find it out later. For example,
function square<T>(x: T): T {
console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'.
return x * x;
}
is a typical TypeScript error that (I believe?) can be easily checked at compile time. I want it to result in a big red screen error and the build to fail.
I'm quite new to TypeScript so it's possible that I'm missing something very important. What exactly is causing this leniency and is there a way to enforce stricter checks?
The first thing to understand is that Typescript is a superset of Javascript, and in this case it doesn't actually get type checked during compilation.
Essentially what happens is Babel just strips out the Typescript and converts it to Javascript, which then gets compiled into the js bundles.
You can take a look at the first line of the following Babel docs as well as the caveats:
https://babeljs.io/docs/en/next/babel-plugin-transform-typescript
Since Babel does not type-check, code which is syntactically correct, but would fail the TypeScript type-checking may successfully get transformed, and often in unexpected or invalid ways.
What I would suggest is extending your build command to first include tsc or rather Typescript compilation, with noEmit set to true in your tsconfig.
Update: I found another instance where this applies recently when adding jest and typescript to a project. At the bottom of the Jest docs they actually state the same thing:
https://jestjs.io/docs/en/getting-started#using-typescript
However, there are some caveats to using TypeScript with Babel. Because TypeScript support in Babel is transpilation, Jest will not type-check your tests as they are run. If you want that, you can use ts-jest.
The straight answer to this question is: Babel, strips out all typescript marks before compiling. Therefore you won't see it erroring out in the cli.
I am working through the Angular2 TypeScript Heroes tutorial. At some point we actively create an error. Basically the tutorial asks to write some html that calls an undefined variable. It indicates that my console should show:
EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]
However what I get in Safari and Chromium is about 500 lines of stack dumps (This is one page load and it triggered 17 errors!)
I have run through the tutorial from install exactly so my setup should be correct. How can I get a cleaner error? I can infer the issue for sure but I'd rather not have 500 lines of errors for every typo I do. Could end up crashing my browser :)
I am new to TS so perhaps there is a setting I need to adjust some debug setting?
After upgrading to react native 0.25.1 I get yellow warning messages that don't go away after I make all the changes indicated in the release notes. How can you track down the where the errors are occurring? I've searched and found nothing other than the code called for on this page: https://github.com/facebook/react-native/releases