Build issue during Jest tests when importing react-children-utilities

[deleemillie]

Describe the bug
Importing any file from react-children-utilities results in a build error when running the jest test suite.

    D:\new-create-react-app\node_modules\react-children-utilities\react-children-utilities.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Children } from 'react';
                                                                                                    ^

    SyntaxError: Unexpected token {

      3 | import './App.css';
      4 |
    > 5 | import { deepMap } from 'react-children-utilities';
        | ^
      6 |
      7 | function App() {
      8 |   return (

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/App.js:5:1)

I am unclear whether this issue exists in react-children-utilities or whatever it is a configuration problem with jest, but a default installation of create-react-app also results in this issue. Builds etc are fine, only the jest test is broken.

There are various tickets jestjs/jest#6229 discussing this problem, however none of the suggestions work for this particular library.

To Reproduce
Steps to reproduce the behavior:

1. Install a new project from https://github.com/facebook/create-react-app (npx create-react-app my-app)
2. Eject the application (yarn eject)
3. At this point running yarn run test should pass all tests
4. yarn add react-children-utilities
5. Update /src/App.js to import anything from react-children-utilities, for example: import { deepMap } from 'react-children-utilities';
6. At this point running yarn run test will fail with the above error.

[Fernando Pasik]

This issue would happen to any library you include that is published with ES Modules.
Did you try to what's described in jestjs/jest#6229 (comment) ?

In your jest.config.js try

"transformIgnorePatterns": [
  "/node_modules/(?!react-children-utilities)"
]

[Fernando Pasik]

The other suggestion was to rename .babelrc in your project to babel.config.js

[Fernando Pasik]

You should try to do both things.

[deleemillie]

The other suggestion was to rename .babelrc in your project to babel.config.js

I have tried all of the suggestions in jestjs/jest#6229, none of them work for this particular library. Further, my original project actually uses a babel.config.js and has never used a .babelrc and still does not work for this particular library.

[Fernando Pasik]

I reproduced the behavior you mentioned but after using babel.config.js and at the same time adding the transformIgnorePatterns option in jest.config.js it worked.

Do you have babel-jest in your devDependencies ?

[Fernando Pasik]

Yes, after doing the yarn eject it will be there.

OK, I tried again with create-react-app

I did two things.

1 - Added the ignore in package.json jest config

"transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\](?!react-children-utilities).+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
],

2 - Created a babel.config.js in the root folder with the content

module.exports = {
  presets: ["react-app"]
};

Those two steps made the tests pass

[Fernando Pasik]

If this issue persists let me know

[Deepak Jha]

This issues still persist, i have run into this problem and spent couple of days already in search of the answer. I have i guess tried all the possible options given on this page and other github pages, no luck :(.

[Matt Fletcher]

I'm also having this problem. My jest and babel configs are in the package.json file.

I've recently made a module that uses rollup and the settings from here:
https://github.com/rollup/rollup-starter-lib/blob/babel/rollup.config.js
and here
https://github.com/rollup/rollup-starter-lib/blob/babel/package.json

Is the issue that this module isn't doing all three of cjs, esm and umd?

[Deepak Jha]

@MaffooBristol I finally stumbled upon writing the transformIgnorePatterns in the package.json file. Surprisingly I was unable to run the same flag inside my jest.config.json however when i defined it inside my package.json it worked. Be mindful of your regex pattern,

[Matthew Dean]

This issue persists with PNPM. It's important to know for library authors that ESM modules are still marked as experimentally supported in VM modules, which is required for Jest. I think there's a conception that Node.js can do ESM now and it's actually not there yet.

[Michael Windell]

Using pnpm I had to change the transformIgnorePatterns to the correct path node_modules/.pnpm:

transformIgnorePatterns: ['/node_modules/.pnpm/(?!react-children-utilities)']

https://stackoverflow.com/a/76555395/3684315