Repository navigation
Click to Open Editor Feature of Error Overlay Documentation #2406
Description
Can you reproduce the problem with latest npm?
yes
Description
The Feature 'click on the error overlay to open in editor' expects an environment Variable called REACT_EDITOR (https://github.com/facebookincubator/create-react-app/pull/2141/files#diff-e891084243d9d79cbaff6e11eab1a4fdR82). However the documentation states, that any environment variable not starting with REACT_APP_* will get blocked.
Expected behavior
When writing REACT_EDITOR=wstorm (etc) into a .env.local File I expect the click to open editor Feature to work.
Actual behavior
The Feature does not work. When using console.log(process.env.REACT_EDITOR) in the code it logs undefined.
Environment
Run these commands in the project folder and fill in their results:
npm ls react-scripts(if you haven’t ejected): 1.0.7node -v: 7.10.0npm -v: 4.6.1
Then, specify:
- Operating system: Windows 10
- Browser and version: Chrome 58
Reproducible Demo
https://github.com/wirmar/cra-error-overlay-issue
things to note in demo:
.evn.local file
console log
Other
This probably also blocks automatic detection of used Editor on windows via env vars EDITOR and VISUAL.
Activity
gaearon commentedon May 29, 2017
It's not blocked—the environment variable is being taken into account. It's just not available to the front end code (because there's need for it). The development server will still read it.
If there are any issues with opening the process, you should see an error in your terminal after clicking. Do you see anything there?
wirmar commentedon May 29, 2017
Thanks for the reply. On further investigation it seems that the click to open Feature is only available on some specific errors (runtime react errors) and not on build errors like I assumed at first. Is this intentional?
But I still don't know how to make it work with WebStorm (on windows). It isn't detected automatically and REACT_EDITOR=wstorm also doesn't work. Maybe some documentation of this Feature would be helpful (I could try to do that if I knew how to make the Feature work).
Edit: To answer your question: yes when clicking on a runtime error overlay the console prints a line that says
Could not open file.js in the editor. To setup editor integration [...]. When adding REACT_EDITOR=wstorm it also add the lineThe editor process exited with an error: (code 1).(I'm guessingwstormis the wrong value?)[-]Click to OpenEditor Feature of Error Overlay Environment Variable gets blocked[/-][+]Click to Open Editor Feature of Error Overlay Documentation[/+]gaearon commentedon May 29, 2017
It doesn't currently work for build errors although we'd like to make it work in the future.
For runtime errors it should work but I haven't tested with WebStorm specifically. Again, do you see any error message in the Terminal after you click?
wirmar commentedon May 29, 2017
Yeah sorry I just edited my answer after realising I didn't answer your question.
gaearon commentedon May 29, 2017
Does running
wstormdirectly from the terminal work?wirmar commentedon May 29, 2017
No I just naively plucked that from here: https://github.com/facebookincubator/create-react-app/pull/2141/files#diff-e891084243d9d79cbaff6e11eab1a4fdR54
I tried to use
REACT_EDITOR=C:\Program Files (x86)\JetBrains\WebStorm 2016.2.2\bin\webstorm64but the space in the path cuts off the env var.After I added the path to webstorm to the system PATH variable and just used
REACT_EDITOR=webstorm64it opens the correct File in the editor, but not the correct line.Is there interest in documenting the neccesary configuration for this editor integration?
gaearon commentedon May 29, 2017
I think it would make sense if it was more comprehensive (e.g. figure out what's missing for every popular editor), not just focused on WebStorm.
Perhaps you could look into its console arguments? Maybe we're passing the line in a wrong way.
You can probably fix it by wrapping path in quotes. Although the approach with PATH seems closer to how I imagined it working.
gaearon commentedon May 30, 2017
Fixed by #2414.
wirmar commentedon May 30, 2017
Maybe something that mentions the Feature and having to add the editor bin Folder to PATH and the executable name to the .env.local File? However I am not sure how it would work on mac/linux.
Would that documentation be in the README or in the console output from #2150? Also should it only be added after full support of the Feature on all errors?
If you want I can try to write up a PR.
gaearon commentedon May 30, 2017
It's worth adding a section to User Guide and linking to it from the console with a short URL (e.g.
goo.gl/...).gaearon commentedon May 30, 2017
Reopened for docs.
miraage commentedon Jun 26, 2017
Is it possible to hack support for PhpStorm 2017 in
react-scripts@1.0.6?Running
$(ps aux | grep phpstor[m] | awk '{print $NF}') --line 29 /Users/miraage/Projects/..path../file.jsopens file in editor correctly.gaearon commentedon Jun 26, 2017
Maybe! Check out this file and suggest edits:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-dev-utils/launchEditor.js
gaearon commentedon Jun 27, 2017
Fixed via #2445.
For more editor support, please help in #2636!
gaearon commentedon Jun 28, 2017
Fixed in 1.0.8. Please verify.
https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.8
miraage commentedon Jun 28, 2017
Thank you! I have also noticed that it might create
/usr/local/bin/pstormshortcut. I'll open an issue about all Jetbrains IDEs this week with suggestion to unify all their products.