Cannot find module 'gatsby-page-utils/apply-trailing-slash-option' from 'node_modules/gatsby-link/rewrite-link-path.js'

[m99coder]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

By following this guide to setup tests, I recently get this error:

 FAIL  src/components/__tests__/Component.test.js
  ● Test suite failed to run

    Cannot find module 'gatsby-page-utils/apply-trailing-slash-option' from 'node_modules/gatsby-link/rewrite-link-path.js'

    Require stack:
      node_modules/gatsby-link/rewrite-link-path.js
      node_modules/gatsby-link/index.js
      node_modules/gatsby/cache-dir/commonjs/gatsby-browser-entry.js
      __mocks__/gatsby.js
      src/components/Component.js
      src/components/__tests__/Component.test.js

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (node_modules/gatsby-link/rewrite-link-path.js:8:33)

The reason is that the dependency offers the method only in a dist subfolder. So the import would have to be rewritten to:

var _applyTrailingSlashOption = require("gatsby-page-utils/dist/apply-trailing-slash-option");

Versions are:

• gatsby-link: 4.7.1
• gatsby-page-utils: 2.7.0

Both published 3 days ago according to npm.

Reproduction Link

https://example.com

Steps to Reproduce

1. Follow the guide https://www.gatsbyjs.com/docs/how-to/testing/unit-testing/
2. Write a component test
3. See the test failing with the mentioned error

Expected Result

The test passes

Actual Result

The test fails

Environment

System:
    OS: macOS 12.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Chrome: 98.0.4758.80
    Firefox: 96.0.3
    Safari: 15.3
  npmPackages:
    gatsby: ^4.7.1 => 4.7.1 
    gatsby-plugin-gdpr-cookies: ^2.0.8 => 2.0.8 
    gatsby-plugin-image: ^2.7.0 => 2.7.0 
    gatsby-plugin-local-search: ^2.0.1 => 2.0.1 
    gatsby-plugin-netlify: ^4.1.0 => 4.1.0 
    gatsby-plugin-purgecss: ^6.1.0 => 6.1.0 
    gatsby-plugin-react-helmet: ^5.7.0 => 5.7.0 
    gatsby-plugin-sass: ^5.7.0 => 5.7.0 
    gatsby-plugin-sharp: ^4.7.0 => 4.7.0 
    gatsby-plugin-sitemap: ^5.7.0 => 5.7.0 
    gatsby-plugin-use-query-params: ^1.0.1 => 1.0.1 
    gatsby-source-contentful: ^7.5.0 => 7.5.0 
    gatsby-source-shopify: ^6.7.0 => 6.7.0 
    gatsby-transformer-sharp: ^4.7.0 => 4.7.0 
  npmGlobalPackages:
    gatsby: 4.7.1

Config Flags

No response

[LekoArts]

In step 2 (https://www.gatsbyjs.com/docs/how-to/testing/unit-testing/#2-creating-a-configuration-file-for-jest) you need to make sure to set the moduleNameMapper correctly and include:

    "^gatsby-core-utils/(.*)$": `gatsby-core-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771
    "^gatsby-plugin-utils/(.*)$": [
      `gatsby-plugin-utils/dist/$1`,
      `gatsby-plugin-utils/$1`,
    ], // Workaround for https://github.com/facebook/jest/issues/9771

[james-greenwood]

This was correct, but I needed to add another line that is in the docs but not quoted here:

"^gatsby-page-utils/(.*)$": `gatsby-page-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771

[saikojosh]

The accepted answer didn't work for me, but @jagreenwood1's refinement worked fine on its own.

[YeminsonSanchez]

@james-greenwood and @LekoArts Thank booths answer we can resolver the problem!

[vripoche]

Hi,

It also happens when we use gatsby-node with ESM since Gatsby 4.7.
I have tried with babel-plugin-module-name-mapper with workaround above, no effect.

[vripoche]

It crashes if components use Gasby Link in ./src are directly imported from gatsby-node.esm.js.
The only workaround I found is to copy file from dist to gatsby-page-utils root before build/develop:

cp ./node_modules/gatsby-page-utils/dist/apply-trailing-slash-option.js ./node_modules/gatsby-page-utils

[christopherpbosserman]

With jest@28 I was receiving the error again, I fixed it by changing the map to

moduleNameMapper: {
'^gatsby-page-utils/(.*)$': 'gatsby-page-utils/$1', // Workaround for jestjs/jest#9771
},

No longer needed per Jest@28, Gatsby docs have also been updated

Note: If you’re using Jest 28 or above, you can skip adding the moduleNameMapper options for gatsby-page-utils, gatsby-core-utils, and gatsby-plugin-utils. The mentioned bug was fixed in Jest 28.

[sverrehu]

I don't know anything about moduleNameMapper, but that looks like a NOOP to me. Wouldn't it have the same effect to just remove the line?

[jpgoelz]

Removing the lines worked for me. 🎉

[DWboutin]

I resolved the issue on my side by modifying this in jest.config.js

'^gatsby-page-utils/(.*)$': `gatsby-page-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771
'^gatsby-core-utils/(.*)$': `gatsby-core-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771

To this

'^gatsby-page-utils/(.*)$': `gatsby-page-utils/$1`, // Workaround for https://github.com/facebook/jest/issues/9771
'^gatsby-core-utils/(.*)$': `gatsby-core-utils/$1`, // Workaround for https://github.com/facebook/jest/issues/9771

[jpgoelz]

As @sverrehu noted (see #34803 (reply in thread)), try removing these lines alltogether. For me it worked. How about you?

In general I was now able to remove all of the workarounds mentioned here: #34803 (comment)