Support of es6 module in test

VikasAgarwal1984 commented 2 years ago

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 https://github.com/facebook/create-react-app/issues/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:)

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

craigmcc commented 2 years ago

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 commented 2 years ago

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: https://github.com/hustcc/echarts-for-react/issues/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 commented 2 years ago

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 https://github.com/hustcc/echarts-for-react/issues/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 https://github.com/facebook/create-react-app/issues/12063#issuecomment-1215476850, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA7ZLVNZCC74YS7BISDZWLVZJ6MNANCNFSM5ONVQZCQ . You are receiving this because you were mentioned.Message ID: @.***>

hugo4711 commented 2 years ago

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 commented 2 weeks ago

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

facebook / create-react-app