SyntaxError: Unexpected token export when running tests for library that imports lodash-es

[martaGalveSwipejobs]

Current Behavior

On a newly generated Nx project (React), after generating a library and importing lodash-es in its component, when trying to run the tests I get the error:

 Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /lodash-problem/node_modules/lodash-es/lodash.js:10
    export { default as add } from './add.js';
    ^^^^^^

    SyntaxError: Unexpected token export

      1 | /* eslint-disable-next-line */
      2 | import React from "react";
    > 3 | import { times } from 'lodash-es';
        | ^
      4 |
      5 | export function UiTest() {
      6 |   const test = () => {

      at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/lib/UiTest.tsx:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.769 s
Ran all test suites.

———————————————————————————————————————————————

>  NX   ERROR  Running target "test" failed

Expected Behavior

The tests should pass.

Steps to Reproduce

1. Generate new workspace via npx create-nx-workspace@latest lodash-problem and select React
2. Generate a library via nx generate @nrwl/react:library --name=test --directory=ui --style=none --linter=eslint --unitTestRunner=jest --tags=type:ui --publishable --buildable --importPath=@lodash-problem/ui-test --component --strict --pascalCaseFiles --no-interactive
3. Modify the library component to import lodash:
   //UiTest.tsx

/* eslint-disable-next-line */
import React from "react";
import { times } from 'lodash-es';

export function UiTest() {
  const test = () => {
    return times(4, (index: number) => (
      <>Times{index}</>
    ))
  };

  return (
    <div>
      {test()}
    </div>
  );
}

export default UiTest;

5. Install lodash via npm i lodash-es --save
6. Run tests via nx affected:test

Environment

Node : 16.4.2
OS : darwin x64
npm : 7.18.1

nx : Not Found
@nrwl/angular : Not Found
@nrwl/cli : 12.5.7
@nrwl/cypress : 12.5.7
@nrwl/devkit : 12.5.7
@nrwl/eslint-plugin-nx : 12.5.7
@nrwl/express : Not Found
@nrwl/jest : 12.5.7
@nrwl/linter : 12.5.7
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : 12.5.7
@nrwl/schematics : Not Found
@nrwl/tao : 12.5.7
@nrwl/web : 12.5.7
@nrwl/workspace : 12.5.7
@nrwl/storybook : 12.5.7
@nrwl/gatsby : Not Found
typescript : 4.2.4

I've tried all the solutions mentioned here #812 and none have worked.

[puku0x]

#812 (comment) worked for me.

moduleNameMapper: {
  "^lodash-es$": "lodash"
}

By the way, underscore, lodash and lodash-es can be replaced with native JavaScript.
https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_times

[martaGalveSwipejobs]

Unfortunately I've tried that and it's still not working. Any idea why this could be?

Thanks for the info, at this point I can't remove lodash as I'm migrating and it's used in too many places but good to know.

[leosvelperez]

Thanks for reporting this!

Unfortunately, this is not an issue with Nx and it's not actionable for us. Please note the best place for this would be StackOverflow or the Nrwl Community Slack or the Jest repo if you think it is an actual bug on their side.

As mentioned in this thread, this same issue has been widely discussed in #812, where a lot of information can be found and recommended solutions. You can also check this issue on the ts-jest repo.

[mattfysh]

hi @leosvelperez - thanks for the helpful links!

In terms of actions that Nx could take to rectify this common pitfall, could the required config be added to the template generated by @nrwl/jest?

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.