Support of es6 module in test

[VikasAgarwal1984]

Describe the bug

react-scripts test fails if imported package is esm module only.
Build woks fine and have no issues.
Issue is similar to #5241

Which terms did you search for in User Guide?

https://create-react-app.dev/docs/running-tests

Environment

current version of create-react-app: 5.0.0

System:
OS: Windows 10 10.0.19042
CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
Binaries:
Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.50)
Internet Explorer: 11.0.19041.1202
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 5.0.0 => 5.0.0
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Create a basic package which only produce esm module.
2. Create a new App with create-react-app.
3. Import one of the class in App.tsx
4. Build works fine, Test fails.

[craigmcc]

This happens to me as well, starting when I added Apache ECharts (npm install echarts) to one of my Create React App based apps (which uses webpack and jest). It looks like the cause is that this library ships only an ESM module, which works fine at runtime but not when you try to run tests.

[FibreFoX]

Why is react-scripts test using a different way than react-scripts build and react-scripts start? I came across this issue, even (maybe wrongly) opened a bug at a different project here: hustcc/echarts-for-react#495

After debugging for over more than a week, because I need to shave down my bundle size, this bug is hitting me hard.

 C:\someproject\node_modules\echarts\core.js:20
    export * from './lib/export/core.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

       6 |
       7 | import ReactEChartsCore from "echarts-for-react/lib/core";
    >  8 | import * as echarts from "echarts/core";

The issue does not appear in normal dev-workflow or when building, only when running Jest. What is more frustrating, this is even the proclaimed way of echarts itself: https://echarts.apache.org/handbook/en/basics/import#minimal-option-type-in-typescript

@craigmcc @VikasAgarwal1984 Did you find any workaround for this? Some special "disable it all" tweak? I already tried this https://jestjs.io/docs/ecmascript-modules but no luck

[craigmcc]

My “workaround” was pretty radical, but sufficient for me. I changed my imports of e charts stuff from static to dynamic, and then didn’t load them in test mode. Of course that meant I could not do any tests on my chart producing classes, but at least I could test everything else. Craig

…

On Mon, Aug 15, 2022 at 10:41 AM Danny Althoff ***@***.***> wrote: Why is react-scripts test using a different way than react-scripts build and react-scripts start? I came across this issue, even (maybe wrongly) opened a bug at a different project here: hustcc/echarts-for-react#495 <hustcc/echarts-for-react#495> After debugging for over more than a week, because I need to shave down my bundle size, this bug is hitting me hard. C:\someproject\node_modules\echarts\core.js:20 export * from './lib/export/core.js'; ^^^^^^ SyntaxError: Unexpected token 'export' 6 | 7 | import ReactEChartsCore from "echarts-for-react/lib/core"; > 8 | import * as echarts from "echarts/core"; The issue does not appear in normal dev-workflow or when building, only when running Jest. What is more frustrating, this is even the proclaimed way of echarts itself: https://echarts.apache.org/handbook/en/basics/import#minimal-option-type-in-typescript @craigmcc <https://github.com/craigmcc> @VikasAgarwal1984 <https://github.com/VikasAgarwal1984> Did you find any workaround for this? Some special "disable it all" tweak? I already tried this https://jestjs.io/docs/ecmascript-modules but no luck — Reply to this email directly, view it on GitHub <#12063 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA7ZLVNZCC74YS7BISDZWLVZJ6MNANCNFSM5ONVQZCQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[hugo4711]

We have the same issue with react-movable and is-ip which were recently updated to esm usage.

Importing these libs fails in our create-react-app test environment based test environment.

[Sahil-Maiyani]

Facing same issue with Jest. Does any workaround for it?

node_modules\react-bootstrap\esm\AccordionBody.js:3
    import classNames from 'classnames';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module