Bug Report

Current Behavior & Input Code

https://github.com/TomasHubelbauer/babel-sourcemap

import React from 'react';

export default function App() {
  return (
    <div className="App">
      <h1>Welcome to my application!</h1>
      This is my app!
      <strong>MINE.</strong>
    </div>
  )
}

In the output:

"div"
  source: src/App.jsx:5:5
  target: lib/App.js:13:39
"App"
  source: src/App.jsx:5:19
  target: lib/App.js:14:15
"h1"
  source: src/App.jsx:6:7
  target: lib/App.js:15:35
"Welcome to my application!"
  source: src/App.jsx:6:7
  target: lib/App.js:15:46
"This is my app!"
  source: src/App.jsx:5:5
  target: lib/App.js:15:77
"strong"
  source: src/App.jsx:8:7
  target: lib/App.js:15:126
"MINE."
  source: src/App.jsx:8:7
  target: lib/App.js:15:141

• div is mapped correctly
• App is mapped correctly
• h1 is mapped correctly
• Welcome to my application! is mapped to the h1
• This is my app! is mapped to the div
• strong is mapped correctly
• MINE. is mapped to the strong

So, it appears that string literals which are used as JSX children are not getting
mapped to their correct respective source locations, instead, they are mapped to the
JSX element's tag name.

Expected behavior/code

The string literals which are JSX children should be mapped to their respective
correct locations in the original source code.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: false
    },
  ],
  "@babel/react"
];

module.exports = { presets };

Ran using npx babel src -s true --out-dir lib.

Environment

• Babel version(s):

    "@babel/cli": "^7.7.5",
    "@babel/core": "^7.7.5",
    "@babel/polyfill": "^7.7.0",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4"

• Node/npm version: Node 11 NPM 6.7
• OS: Windows 10
• Monorepo: ya
• How you are using Babel: through CRA which means through WebPack:
  • Sourcemap misreports the locations of string literals which are JSX children webpack/webpack#10125
  • Source map locations for React string literal children are incorrect react/create-react-app#8127

Possible Solution

🤷‍♂ IDK, probably some heuristic to tell from the source context we're in JSX children
needs to be added. I understand why this happens, it is just a string being passed to a
parameter of a function which is the JSX element as a whole, so I see why it gets mapped
to the JSX syntax start location. I think the way to fix this would be to add extra logic for
realizing this in the source map generation and keep track of the string literals which are
the arguments to the function and use their original locations for the string literals which
are the output arguments instead of defaulting any non-JSX child to the element's start.