docsearch icon indicating copy to clipboard operation
docsearch copied to clipboard

Published 20 hours ago • verified publisher icon algolia

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

Open trevorpfiz opened this issue 2 years ago • 3 comments

Description

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

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

Expected behavior

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

Environment

  • OS: Windows
  • Browser: Chrome
  • DocSearch version: 3.3.0

trevorpfiz avatar Dec 07 '22 18:12 trevorpfiz

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

trevorpfiz avatar Dec 08 '22 08:12 trevorpfiz

Hi @trevorpfiz are you still seeing this issue by chance?

8bittitan avatar Sep 22 '23 15:09 8bittitan

This may help. npm install @docsearch/js @docsearch/css

807573212 avatar May 17 '24 16:05 807573212

Closing -- a fresh install of Next.js and Docsearch shows this working as expected. Feel free to open a new issue if this persists.

levimichael avatar Aug 14 '24 16:08 levimichael