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

@babel/plugin-transform-react-constant-elements generates non-tree-shakeable output #11037

Open
wereHamster opened this issue Jan 21, 2020 · 1 comment · May be fixed by #11126
Open

@babel/plugin-transform-react-constant-elements generates non-tree-shakeable output #11037

wereHamster opened this issue Jan 21, 2020 · 1 comment · May be fixed by #11126
Assignees
Labels

Comments

@wereHamster
Copy link

@wereHamster wereHamster commented Jan 21, 2020

Bug Report

In #7372 the plugin started marking the hoisted values as pure. However the way it does it has no effect if the original React tree is more than one level deep. Let me illustrate…

Consider the following input:

export function ReactComponent() {
  return <svg><path /></svg>
}

Will get transformed to this (you can test it on the babel repl):

var _ref =
/*#__PURE__*/
React.createElement("svg", null, React.createElement("path", null));

export function ReactComponent() {
  return _ref;
}

However such an annotation has no effect and the _ref is retained by all bundlers (rollup, webpack/terser). This is expected, that's how the /*#__PURE__*/ annotation works.

Here is an example how rollup does (or rather does not) tree-shake such a module

One solution would be to wrap the value in an IIFE, as suggested by the above linked comment:

var _ref =
/*#__PURE__*/ (() => 
React.createElement("svg", null, React.createElement("path", null)))();
  • Babel version(s): 7.x
@babel-bot

This comment has been minimized.

Copy link
Collaborator

@babel-bot babel-bot commented Jan 21, 2020

Hey @wereHamster! 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
You can’t perform that action at this time.