Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: This module cannot be imported from a Client Component module. It should only be used from a Server Component. #13967

Closed
felipedeboni opened this issue Feb 28, 2023 · 16 comments

Comments

@felipedeboni
Copy link

Version

29.4.3

Steps to reproduce

Create any component and add the import "server-only" (https://www.npmjs.com/package/server-only) to mark it as server only code.

Try to run any test against it and they are going to fail and log the following message:

This module cannot be imported from a Client Component module. It should only be used from a Server Component.

Expected behavior

The test(s) should be able to run without any issues.

Actual behavior

Test fail and log

This module cannot be imported from a Client Component module. It should only be used from a Server Component.

Additional context

I've already tried the following:

  1. New project on jest.config with testEnvironment: 'node'
  2. Environment comment on test file
/**
 * @jest-environment node
 */

Environment

System:
    OS: macOS 12.5.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  npmPackages:
    jest: ^29.4.3 => 29.4.3
@timfee
Copy link

timfee commented Mar 14, 2023

+1

@timfee
Copy link

timfee commented Mar 14, 2023

I was able to work around this with just mocking server-only:

// __mocks__/server-only.js
module.exports = {};

@TxHawks
Copy link

TxHawks commented Apr 1, 2023

Hitting this too. mocking server-only didn't work either

@mrazauskas
Copy link
Contributor

Could someone provide minimal reproduction repo?

@TxHawks
Copy link

TxHawks commented Apr 2, 2023

This is almost minimal: TxHawks/deadliner.

There's a single module with tests there (src/utils/getDeadline.ts, and it imports server-only. run the test task to reproduce.

If this isn't minimal enough, let me know and I'll make something even more minimal

@mrazauskas
Copy link
Contributor

mrazauskas commented Apr 2, 2023

Thanks. Look at the "exports" field of package.json in the 'server-only' package:

"exports": {
  ".": {
    "react-server": "./empty.js",
    "default": "./index.js"
  }
}

index.js file throws the error you see and empty.js is simply an empty file.

To point Jest resolver to the "react-server" export, you should pass customExportConditions to test environment. For example, this could be done via JSDoc pragma:

/**
 * @jest-environment node
 * @jest-environment-options {"customExportConditions": ["react-server"]}
 */

The test will pass. (There is some error from Next.js, but that is not Jest specific.)


Unfortunately I can’t find any usage documentation of the 'server-only' package. Is it coming from React or is that Next.js specific? Would be good if they could document this. It does not make sense adding notes on each custom export condition into Jest docs.

@TxHawks
Copy link

TxHawks commented Apr 2, 2023

Thanks! As far as I know, server-only comes from React

@mrazauskas
Copy link
Contributor

mrazauskas commented Apr 2, 2023

Hm.. It might make sense to add "node" export condition to the 'server-only' package. Then all would work on Jest without extra pragmas.

UPDATE This can't work on React side. See: reactjs/rfcs#227 (comment)

@TxHawks
Copy link

TxHawks commented Apr 2, 2023

The exports field is a mess to support across different environments, especially when it comes to types... I admit having looked into it several times and managed to really understand how it all works.

I still get the same error even with:

/**
 * @jest-environment node
 * @jest-environment-options {"customExportConditions": ["react-server"]}
 */

Or putting this in jest.config.js:

  testEnvironmentOptions: {
    customExportConditions: ['react-server', 'node', 'node-addons'],
  },

@mrazauskas
Copy link
Contributor

mrazauskas commented Apr 2, 2023

Try removing all Jest config magic coming from 'next/jest'. Simply change the export of jest.config.js (EDIT also follow Getting Started to add Babel for code transformation):

module.exports = {};

Run the test without and with the suggested pragma. In first case you will see the error, adding the pragma fixes it. All is solved here.

'next/jest' is maintained in Next.js repo and issue with it should be reported there. (Actually getDeadline() is just a simple JS function. I think you don’t need to involve Next to unit test it.)

@TxHawks
Copy link

TxHawks commented Apr 2, 2023

Yeah, I'm not really sure how to do that in a Next project. Have a different config for different files in the project

@mrazauskas
Copy link
Contributor

Seems like this is a bug in Next.js. See vercel/next.js#47448

By the way, using the pragma and babel-jest transformer works as expected (see Next.js docs for setup details). Only the Rust compiler throws an error (this is the case if 'next/jest' is used in Jest config).

@github-actions
Copy link

github-actions bot commented May 4, 2023

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

@github-actions github-actions bot added the Stale label May 4, 2023
@github-actions
Copy link

github-actions bot commented Jun 3, 2023

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 github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Jun 3, 2023
@github-actions
Copy link

github-actions bot commented Jun 3, 2023

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
Copy link

github-actions bot commented Jul 4, 2023

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 4, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants