Symlinked client side components throwing webpack errors

[joshdegouveia]

Verify canary release

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

Provide environment information

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.3.0: Wed Jan 5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T6000
Binaries:
Node: 16.14.2
npm: 8.5.0
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.1.2-canary.0
eslint-config-next: 13.1.2-canary.0
react: 18.2.0
react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://codesandbox.io/p/github/joshdegouveia/nextjs-symlink-bug/draft/solitary-meadow?file=%2FREADME.md&workspace=%257B%2522activeFileId%2522%253A%2522clcilo0bk000d7oflf45o0zzr%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clcilo28b001d3b6lebutr2aw%2522%253A%257B%2522key%2522%253A%2522clcilo28b001d3b6lebutr2aw%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522key%2522%253A%2522clcilogbi00bg3b6ld3msc2rb%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522clcilofer008j3b6l4wq5l1pq%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clcilo28b001d3b6lebutr2aw%2522%252C%2522spacesOrder%2522%253A%255B%2522clcilo28b001d3b6lebutr2aw%2522%255D%257D

To Reproduce

• Create an NextJS app and enable the app directory feature
• Create an empty folder in the app folder
• Create a client side ('use client') component (page.tsx) outside of the app directory
• Symlink the client side component into your empty folder by navigating to the folder and running the following command: ln -s ..[path_to_component]/page.tsx .
• Start the dev server and navigate to the route with the symlinked component

Describe the Bug

IMPORTANT: This bug is was introduced between these two tags v13.0.7-canary.1...v13.0.7-canary.3 - it's not reproducible in v13.0.7-canary.1 and below.

When navigating to a route with a symlinked client side component a webpack error is thrown

NOTE: This error is only thrown when symlinking client side components, removing use client resolves the issue.

Expected Behavior

The symlinked client side component should render

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response