RSC: client components from node_modules doesn't work

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.1.0: Wed Oct 13 17:33:24 PDT 2021; root:xnu-8019.41.5~1/RELEASE_ARM64_T8101
    Binaries:
      Node: 14.17.0
      npm: 8.5.5
      Yarn: 1.22.15
      pnpm: 6.11.0
    Relevant packages:
      next: 12.1.1-canary.14
      react: 18.0.0-rc.2
      react-dom: 18.0.0-rc.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Reproduction

// pages/index.server.js
import Fooding from 'fooding'

export default () => <Fooding />

Create a package in node_modules called fooding:

// package.json
{ "name": "fooding", "exports": "./index.js" }

// index.js
export { default } from './fooding.client.js'

// fooding.client.js
import { useState } from 'react'
export default () => {
   const [text] = useState('Who is')
   return text + ' fooding?'
}

When you try visiting the built / page it shows error Module not found: Package path ./?__sc_server__ is not exported from package test-app/node_modules/fooding (see exports field in test-app/node_modules/fooding/package.json) in console

Expected Behavior

Shared and client components should behave like the ones in source folders

• Visit the / page
• Display Who is fooding? and hydrate without error

To Reproduce

• Use the reproduction above
• run next dev
• visit localhost:3000

[huozhi]

hey @hamlim there’re few changes we need to tweak on next.js side which we’re still investigating what’s the proper way now, not only the loader might need to change. will keep posted here once we have ant further findings. thanks

[huozhi]

Hi, with the next 13.x, you can make it work with app directory and server components. You can checkout the new server and client components convention in the beta docs here. I did some tests it works locally for me.

Sample code

// app/page.js
import React from 'react';
import ClientFoo from 'client-foo';

export default function Page() {
  return <ClientFoo />
}

// node_modules/client-foo/index.js
'use client'

import { useState } from 'react'

export default function Foo() {
  const [count] = useState(0)
  return count
}

I’ll close this issue as resolved. If you still have any issue with the it, please file a new issue with the reproduction. Thanks!