__source makes component stack less useful

[billyjanitsch]

Do you want to request a feature or report a bug?

Somewhere in between.

What is the current behavior?

When I enable babel-plugin-transform-react-jsx-source to automatically add a __source prop to every component in development, the component stack displayed for certain React warnings changes from displaying the (inferred) name of the rendering component to displaying the filename and line number of the occurrence.

React also has access to the file path, but it is stripped and only the filename is included. This seems to be based on the assumption that the name of a file always maps exactly to the name of the component it exports. In practice, many people place components in ComponentName/index.js, so __source currently makes the stack less useful.

For example, compare:

    in DownloadDropdown (created by Foo)
    in Foo (created by Bar)
    in div (created by Bar)
    in div (created by Bar)
    in div (created by Section)
    in section (created by Section)
    in Section (created by Bar)
    in div (created by App)
    in main (created by App)
    ...

to:

    in DownloadDropdown (at index.js:53)
    in Foo (at index.js:183)
    in div (at index.js:182)
    in div (at index.js:175)
    in div (at index.js:29)
    in section (at index.js:28)
    in Section (at index.js:173)
    in div (at index.js:26)
    in main (at index.js:24)
    ...

What is the expected behavior?

I would like the stack to include the full file path, or at least to include the inferred component name alongside the filename.

Would you accept a PR for either option?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.2.0. This was introduced in #6771 for 15.2.0.

[gaearon]

There is a PR that improves this: #11523.

I'm not sure we'll want to take that particular approach. However maybe we can just add a special case for index.js specifically? I'd feel safer merging that.

[gaearon]

i.e. I am proposing that if the filename is index.js, we also include the closest directory name. Seems like this would be sufficient for most practical purposes.

[billyjanitsch]

Sorry for missing #11523! I searched for issues rather than PRs.

What do you think of the approach of removing the common head in #11523? I like that even better that either option I proposed.

Including the closest directory name works too, if not.

Happy to rebase that PR either way.

[gaearon]

I’m not sure really. I’m worried this might make the warnings way too long on projects with a lot of folder nesting.

I would prefer that we do the smaller fix first and then maybe look at it again.

[billyjanitsch]

Ok, I will submit a PR for the smaller fix. Thanks for the discussion!

Incidentally, while looking into whether I should enable babel-plugin-transform-react-jsx-self, I couldn't find any uses of __self in the codebase. Maybe it was only used pre-Fiber? Am I mistaken? It gets attached here but is never used.

[gaearon]

It’s not used yet. The plan was to use it to see where callback ref owner would be different from a string ref owner. That would be useful if we deprecated string refs. We have a different plan for that now though.