Click to Open Editor Feature of Error Overlay Documentation

[wirmar]

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:

1. npm ls react-scripts (if you haven’t ejected): 1.0.7
2. node -v: 7.10.0
3. npm -v: 4.6.1

Then, specify:

1. Operating system: Windows 10
2. 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.

[gaearon]

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]

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 line The editor process exited with an error: (code 1). (I'm guessing wstorm is the wrong value?)

[gaearon]

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]

Yeah sorry I just edited my answer after realising I didn't answer your question.

[gaearon]

Does running wstorm directly from the terminal work?

[wirmar]

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\webstorm64 but 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=webstorm64 it 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]

Is there interest in documenting the neccesary configuration for this editor integration?

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.

it opens the correct File in the editor, but not the correct line.

Perhaps you could look into its console arguments? Maybe we're passing the line in a wrong way.

I tried to use REACT_EDITOR=C:\Program Files (x86)\JetBrains\WebStorm 2016.2.2\bin\webstorm64 but the space in the path cuts off the env var.

You can probably fix it by wrapping path in quotes. Although the approach with PATH seems closer to how I imagined it working.

[gaearon]

Fixed by #2414.

[wirmar]

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.

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]

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]

Reopened for docs.

[miraage]

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.js opens file in editor correctly.

[gaearon]

Maybe! Check out this file and suggest edits:

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-dev-utils/launchEditor.js

[gaearon]

Fixed via #2445.
For more editor support, please help in #2636!

[gaearon]

Fixed in 1.0.8. Please verify.
https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.8

[miraage]

Thank you! I have also noticed that it might create /usr/local/bin/pstorm shortcut. I'll open an issue about all Jetbrains IDEs this week with suggestion to unify all their products.