Jest: Jest unable to resolve node_modules at the root in Yarn workspace

[wan54]

Jest v22.1.1

To enhance lerna in my project I have enabled yarn workspaces. Since then transformIgnorePatterns does not seem to be able to resolve node_modules at the root.

The same jest config used before switching to yarn workspace:

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
      ],
    "setupTestFrameworkScriptFile": "./jest-setup.js",
    "transformIgnorePatterns": [
      "node_modules/(?!lodash-es|react-virtualized|redux-form)"
    ],
    "testPathIgnorePatterns": [
      "/node_modules",
      "/lib/",
      "/es/"
    ],
    "testRegex": "src/.*\\.spec\\.js$",
    "testEnvironment": "jsdom"
  }

This causes Unexpected token import error.

/path/to/project/node_modules/redux-form/es/Field.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import createField from './createField';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      1 | import React from 'react';
      2 | import PropTypes from 'prop-types';
    > 3 | import ReduxFormField from 'redux-form/es/Field';
      4 | import isEmpty from 'lodash/isEmpty';
      5 | import reduce from 'lodash/reduce';
      6 | import keys from 'lodash/keys';

Is there workaround or proper configuration for allowing jest to play nice in yarn workspaces?

Thanks.

[SimenB]

Can you provide a reproduction repo?

[wan54]

Possibly, but not immediately.

[wan54]

After looking at the error again. Jest seemed like able to resolve it but didn't transform the module.

[wan54]

Related to #5108. The difference in my case is they are 3rd party packages - redux-form, lodash-es, etc. And they're not symlinked. They're hoisted up by yarn workspaces.

Just to test it out I manually symlinked .babelrc from my package folder to each of these 3rd party module and it worked.

[wan54]

My workaround:

const { exec } = require('child_process');

module.exports = () => {
    const modules = [
        'lodash-es',
        'redux-form',
        'react-virtualized'
    ];
    modules.forEach((module) => {
        exec(`ln -vsf ../../src/my-package/.babelrc ../../node_modules/${module}`);
    });
};

And run it once via globalSetup

[egid]

I'm not convinced that symlinking everything is the right solution to what is definitely a real issue. It might be worth reopening this.

[SimenB]

I agree, that shouldn't be necessary

[SimenB]

We will need a reproduction repo, though

[kcjonson]

Full reproduction and steps here: https://github.com/kcjonson/jest-hoisting-bug-demo
thats the most simple case I could whip up, I'd love to hear that I missed some simple config.

[bvellacott]

Webpack isn't running babel on your packages. You need to add your packages path to the babel step in your webpack config.

[hfter789]

Here is a workaround that i found.
If you know which libraries will be hoisted, you can change the transformIgnorePatterns path to point at the different node_modules

"transformIgnorePatterns": [
      "../node_modules/(?!redux-form)",
      "node_modules/(?!lodash-es|react-virtualized)"
    ],

in my case, the package folders are right under the root workspace. If you put the packages under the package folder, you might need to change to "../../node_modules/(?!redux-form)",.

[ematipico]

I have the same issue and I can't find a workaround

[rjhilgefort]

Having this issue as well

[leoyli]

none of the above mentioned fix this... and I still can not find a workaround :'(

[leoyli]

Okay, I somehow find my way to work around this, there are server tiny caveats:

https://github.com/formatjs/react-intl/issues/1371#issuecomment-511621530

[SimenB]

Can anyone out together a reproduction? The repo from @kcjonson should be fixed in RN 0.59 due to https://github.com/facebook/react-native/pull/22972

You _shouldn't_ need to do .. etc in your config, so I'd love to get this fixed

[benderrrr]

change import from
import ReduxFormField from 'redux-form/es/Field';
to
import {Field} from 'redux-form';
Use Field instead ReduxFormField

[tamazlykar]

Can anyone out together a reproduction?

@SimenB I did a reproduction repo. You can find it here jest-resolve-issue