Import fails when file contains computed property syntax

[nullromo]

Describe the bug

The react build fails when an inconsequential line containing the computed property syntax is added to a file. Example:

const randomThingy = { ['soda']: 'wizard' };

If this line is present in a file, then exports will not work for that file in the build. However, they work when running the development server.

Did you try recovering your dependencies?

npm version: 6.14.8

Which terms did you search for in User Guide?

"react build"
"fail"
"computed property"
"import"
...

Environment

Environment Info:
  System:
    OS: Linux 4.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 12.18.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    react-scripts: 4.0.0 => 4.0.0
  npmGlobalPackages:
    create-react-app: 3.3.0

Steps to reproduce

1. Create a new app
2. Add the files with the code
3. Run the dev server and see that it appears to work
4. Try the build and see that it fails
5. Comment out the problematic line
6. See that it still works in the dev server
7. Run the build and see that it no longer fails

Expected behavior

I expect the build to not fail when the problematic syntax is used.

Actual behavior

The build fails.

Reproducible demo

I have created a minimal working example repository here. The repo's README explains the import structure and it is very simple.

Repo's README copied here

CRA Shared Module Import Issue

Description

When importing okayExport from src/common/okayExport.js into src/App.js, everything is fine. When importing sketchyExport from src/common/sketchyExport.js into src/App.js, the react build fails with the message: "Attempted import error: 'sketchyExport' is not exported from './common/sketchyExport.js'." If the line declaring randomThingy in src/common/sketchyExport.js is removed, then the build succeeds with no errors.

The issue is that the build somehow breaks when the "computed property" syntax is used in exporting file (i.e. the {['foo']: bar} syntax).

When running the development server, the app does not crash and behaves as expected. It is only during the build process that it fails.

[nullromo]

For now, I have been using a workaround. My code used to look like

((exports) => {
    const objectOne = {
        first: 'stringOne',
        second: 'stringTwo',
    };

-   const objectTwo = {
-       [objectOne.first]: 'stringThree',
-       [objectOne.second]: 'stringFour',
-   };

    exports.objectOne = objectOne;
    exports.objectTwo = objectTwo;
})(typeof exports === 'undefined' ? {} : exports);

But this uses the computed property syntax, so I have changed it to look like

((exports) => {
    const objectOne = {
        first: 'stringOne',
        second: 'stringTwo',
    };

+   const objectTwo = {};
+   objectTwo[objectOne.first] = 'stringThree';
+   objectTwo[objectOne.second] = 'stringFour';

    exports.objectOne = objectOne;
    exports.objectTwo = objectTwo;
})(typeof exports === 'undefined' ? {} : exports);

In other words, I replaced the object constant that had the problematic syntax with just a bunch of property assignments to an empty object literal. This works for now, but the issue at hand is not resolved.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[nullromo]

Think this was stale from lack of triage rather than actual stale-ness.