Treeshaking: Named export of objects includes whole file into the bundle instead of only used exports. (with sideEffects: false in package.json)

[Huuums]

Bug report

What is the current behavior?

Creating a bunch of objects in a single file while directly exporting them from there with named exports will cause the whole file to be included in the bundle instead of treeshaking the unused exports.

Using a barreling approach where every object gets created and exported from its own file will treeshake correctly.

If the current behavior is a bug, please provide the steps to reproduce.
This repo let's you reproduce this behavior.
https://github.com/Huuums/repro-webpack-treeshaking-object-issue

What is the expected behavior?
Only include used exports into the bundle when defining multiple exports in a single file.

Other relevant information:
webpack version: 4.41.5
Node.js version: 13.6
Operating System: Mac OS (Catalina) and Windows behaved the same.
Additional tools: Create React App

mode: 'production' is set (Create react apps build script).

[sokra]

JSX is considered as side-effecty code, so you need to put it into a function to allow it to be removed.

[sokra]

babel/babel#11126

[sokra]

babel fix was merged