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

[Snapu]

Any news on this?

[github-actions[bot]]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 30 days.

[roni-castro-db]

I solved this by using moduleNameMapper, where @fta/components-token is the name of a package of my workspace and <rootDir>../token/src is the path to its index:

moduleNameMapper: {
    '@fta/components-token': '<rootDir>../token/src',
},

or '@fta/components-(.*)$': '<rootDir>../$1/src', in case the package sufix name is the same of the folder.

[github-actions[bot]]

This issue is stale because it has been open for 1 year with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 30 days with no activity. Please open a new issue if the issue is still relevant, linking to this one.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.