import '@docsearch/css' not working in Next.js 13 appDir

[trevorpfiz]

Verify canary release

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

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Home Binaries: Node: 18.12.1 npm: N/A Yarn: N/A pnpm: 7.18.0 Relevant packages: next: 13.0.7-canary.1 eslint-config-next: 13.0.7-canary.1 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

\/

To Reproduce

Steps to reproduce

1. npm i @docsearch/react
2. import '@docsearch/css' in layout.tsx
3. import { DocSearch } from '@docsearch/react' in page.tsx
4. See error

Describe the Bug

I am importing @docsearch/css in a layout.tsx file in the /app directory. The CSS is not being loaded.

Expected Behavior

I would expect it to work the same as in _app.tsx in the /pages directory.

Which browser are you using? (if relevant)

Chrome 108.0.5359.99

How are you deploying your application? (if relevant)

Vercel

[trevorpfiz]

My temporary fix is to duplicate the style.css file from @docsearch/css and import '#/styles/style.css' in layout.tsx.

[shuding]

Could you try adding @docsearch/css to transpilePackages? Related docs: https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages