How to get the exact error message of JsDoc in reactjs? - reactjs

We are using JsDoc to create our document of reactjs pages. All comment
we wrote as per the jsDoc rule but still it showing below message for some page:
ERROR: Unable to parse D:\Example\src\reducers\example.js:Unexpected token
I am not getting the error in other pages, we wrote the comment same way but
for some pages it is throwing above error. How can I get the exact error
message and line number where it is failing?

How can I get the exact error message and line number where it is failing?
Command-line arguments to JSDoc provide --verbose option which should provide with log detailed information as JSDoc runs. Unfortunately this will not give you exact line number.
What you ask is available as the open request on GitHub: Option to print error stack. As you may guess this is not implemented yet. You may use work around, which posted by iPherian in the same thread. This work around will give you line number and column of the error occur.
EDIT:
As of jsdoc version "3.5.0-dev" (current development master) the feature to print line and column number of error occur is implemented and available. After installation of the current development version ...
npm install git+https://github.com/jsdoc3/jsdoc.git
and running jsdoc against JS source
>"C:\folder\node_modules\.bin\jsdoc.cmd" AppScripts -d bin/Reference --verbose
the error along with line and column numbers are printed out into the output ...

Related

React application on Safari throws SyntaxError: Invalid regular expression: invalid group specifier name

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.

prevent react from logging specific errors

Working on a login system in react, if the email/user is invalid, the api return 401 status code, as expected.
I added a span that notify the user with the problem, but react still log this "scary" errors in the console, how can I prevent the log of error with specific "reasons" / status codes?
Don't know if that's what you are looking for, but the "ESLint" NPM package can be used to ignore warnings in react files and it can be used to ignore just one line as well.
To ignore all warnings in the file use:
/* eslint-disable */
On the top of the file and it won't console the warnings from this file anymore, I, unfortunately, don't know more about it but here is the documentation to get started.

error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro"

We are trying to upgrade our react project to latest packages including relay (7.0.0). Our application builds and works but we are getting this error message in the console (during build) on every file where we import graphql from 'babel-plugin-relay/macro'. We are doing exactly like documented here adding relay
The error is "There was an error trying to load the config "relay" for the macro imported from "babel-plugin-relay/macro. Please see the error thrown for more information." It is coming from \node_modules\babel-plugin-macros\dist\index.js in getConfig( ).
To understand how other projects were configured, I downloaded another sample relay project / installed it and it had the same problem. Interesting enough there was this recent post in that app's issues list error loading config
The solution noted worked for me (adding that noted .babel-plugin-macrosrc.yml file with empty relay plugin?) but I am not understanding why this is needed or what was causing this seemingly benign error message?

React Router + Webpack 4 + webpack-dev-server - Failed to compile: no such file or directory

I am getting a "Failed to compile" error while trying to set up React with Webpack 4 and webpack-dev-server. The exact error showing is:
Failed to compile
./node_modules/history/es/index.js
Module build failed: Error: ENOENT: no such file or directory, open '/vagrant/node_modules/history/es/index.js'
This error occurred during the build time and cannot be dismissed.
In the node_modules directory, the file in question indeed exists. However, I checked the files being sent over, and that file (and its siblings) is being sent as /vagrant/node_modules/history/index.js with the es director missing.
I am not exactly sure what is causing this. Some research suggested things like mismatched casing on imports, but I checked quite a few times and do not see anything like that going on. I am a bit of a noob when it comes to this, though, so I might be missing something obvious.
EDIT
Upon further investigation (with the help of Boy With Silver Wings' comment), the error is actually coming from the depths of React Router. This issue demonstrates something close to my issue, but in their version there is duplication of the history modules while mine seems to "move" them.

Getting useful errors from Typescript/Angular2

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?

Resources