Next 13: Import breaking in app dir

[smitbarmase]

Verify canary release

• [X] 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 22.1.0: Sun Oct 9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000 Binaries: Node: 16.17.1 npm: 8.15.0 Yarn: 1.22.19 pnpm: 7.14.0 Relevant packages: next: 13.0.2-canary.0 eslint-config-next: 13.0.1 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Getting this error on next dev:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from sensitive_details_here
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

event - compiled client and server successfully in 840 ms (200 modules)
wait  - compiling /page (client and server)...
warn  - ./components/Carousel.tsx
Attempted import error: '@glidejs/glide' does not contain a default export (imported as 'Glide').
wait  - compiling...
warn  - ./components/Carousel.tsx
Attempted import error: '@glidejs/glide' does not contain a default export (imported as 'Glide').
warn  - ./components/Carousel.tsx
Attempted import error: '@glidejs/glide' does not contain a default export (imported as 'Glide').
wait  - compiling /social/page (client and server)...
error - TypeError: Cannot use 'in' operator to search for 'getStore' in undefined
    at handleRequestStoreRun (sensitive_details_here/node_modules/next/dist/server/app-render.js:1078:24)
    at Object.renderToHTMLOrFlight (sensitive_details_here/node_modules/next/dist/server/app-render.js:1103:12)
    at DevServer.renderHTML (sensitive_details_here/node_modules/next/dist/server/next-server.js:489:36)
    at doRender (sensitive_details_here/node_modules/next/dist/server/base-server.js:698:45)
    at cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (sensitive_details_here/node_modules/next/dist/server/base-server.js:803:34)
    at sensitive_details_here/node_modules/next/dist/server/response-cache/index.js:80:42
    at ResponseCache.get (sensitive_details_here/node_modules/next/dist/server/response-cache/index.js:128:11)
    at DevServer.renderToResponseWithComponents (sensitive_details_here/node_modules/next/dist/server/base-server.js:728:53)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  page: '/'
}
wait  - compiling /_error (client and server)...
warn  - ./components/Carousel.tsx
Attempted import error: '@glidejs/glide' does not contain a default export (imported as 'Glide').
warn  - ./components/Carousel.tsx
Attempted import error: '@glidejs/glide' does not contain a default export (imported as 'Glide').
warn  - ./components/Carousel.tsx
Attempted import error: '@glidejs/glide' does not contain a default export (imported as 'Glide').

I'm using "use client" on this component. This error does not come on pages dir. Any ideas?

Expected Behavior

It should work as it was on pages dir. That is not error should be thrown.

Link to reproduction

https://codesandbox.io/s/flamboyant-varahamihira-gihnqq?file=/app/page.tsx

To Reproduce

1. Use app dir.
2. Set home page as "use client".
3. Add "@glidejs/glide" in your project.
4. Import is using `import Glide from "@glidejs/glide" into home page.
5. Use Glide in home page in useEffect.