Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sourcemap misreports the locations of string literals which are JSX children #10869

Open
TomasHubelbauer opened this issue Dec 16, 2019 · 1 comment

Comments

@TomasHubelbauer
Copy link

@TomasHubelbauer TomasHubelbauer commented Dec 16, 2019

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"

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.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

@babel-bot babel-bot commented Dec 16, 2019

Hey @TomasHubelbauer! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.