Fix jsxDEV for generated elements

[Timer]

Q	A
Fixed Issues?	N/A
Patch: Bug Fix?	Yes
Major: Breaking Change?	No
Minor: New Feature?	No
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?	No
License	MIT

---

The new JSX transform does not support generated JSX in development mode, it errors with the following:

Property expression of JSXExpressionContainer expected node to be of a type ["Expression","JSXEmptyExpression"] but instead got undefined
    at Object.validate (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/types/lib/definitions/utils.js:132:11)
    at validateField (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/types/lib/validators/validate.js:24:9)
    at validate (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/types/lib/validators/validate.js:17:3)
    at builder (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/types/lib/builders/builder.js:38:27)
    at Object.jsxExpressionContainer (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/types/lib/builders/generated/index.js:848:31)
    at PluginPass.JSXOpeningElement (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/helper-builder-react-jsx-experimental/lib/index.js:53:68)
    at NodePath._call (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Users/joe/Documents/Development/Work/zeit/next.js/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:112:16)

This is caused by the makeSource function returning undefined when location information is absent, instead of skipping the property like the old transform.

This PR mimics the old behavior and omits the __source property when location information is not available. We'll need to check with the React team if this is the desired behavior.

cc @lunaruan

---

x-ref #11154

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 94720de:

Sandbox	Source
babel-repl-custom-plugin	Configuration
babel-plugin-multi-config	Configuration

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/28157/

[hzoo]

glad the exec test works!

[lunaruan]

Is it OK if we cut a patch for this PR? We're planning on releasing React 17 in a couple of weeks which includes the React entrypoints for the new JSX transform changes. Thanks!

[JLHwung]

I am hesitate on throwing an error when loc is not defined. It is likely that some plugins are not compatible here. But throwing an error in this case blocks compiling JSX. I don't think we should throw here: If we could be tolerant about such issues, the worst outcome is developers don't get correct JSX source locations. It does not worth throwing since the error is not vital.

[Timer]

I am hesitate on throwing an error when loc is not defined. It is likely that some plugins are not compatible here.

The plugin currently throws an error when loc is not defined, which as you said, is not compatible with other plugins which is why Next.js cannot upgrade to the new transform.

This PR fixes the transform's compatibility with other plugins!

But throwing an error in this case blocks compiling JSX. I don't think we should throw here: If we could be tolerant about such issues, the worst outcome is developers don't get correct JSX source locations. It does not worth throwing since the error is not vital.

Correct! This PR changes the plugin to not throw an error when source information is missing. You might be referring to the invariant that's present for if the plugin itself improperly uses the makeSource function, which is not exposed as part of the plugin's API.

[JLHwung]

Thanks.

[Timer]

Do you have an ETA of when this will be released? If not today, we can fork this package temporarily. Thank you!

[JLHwung]

@Timer I will do a release later today.

[JLHwung]

Fixed in @babel/helper-builder-react-jsx-experimental@7.11.5.

[Timer]

Great, thanks!