Search UI styles are not read in production build of Gatsby

[sarrame]

Hi Team,

As i am actively building a Site Search with SearchUI and did a production build of Gatsby, interestingly Paging is the only component i used directly with built-in styles.
I could see default pagination in development code like
<1 2 >

. but in Gatsby production build there are no styles applied and i see unordered list like below

• 1
• 2

Implementation ways :
import { Paging } from '@elastic/react-search-ui';
import '@elastic/react-search-ui-views/lib/styles/styles.css';

And simply imported in the render component.

Am not sure did i miss anything in implementation ., could any one help me on this.

[Vadim_Yakhin]

Hey @sarrame,

Although it's a little hard to say what exactly causes the issue in your case, I have one idea.

You're importing stylesheets from the react component. But Gatsby docs say that you should import global stylesheets from gatsby-browser.js:

Standard Styling with Global CSS Files

I hope this will help you, but if it won't, could you create a minimal example in a public repo? (don't forget to remove your credentials).

[sarrame]

Thanks Vadim , this hint saved me

import '@elastic/react-search-ui-views/lib/styles/styles.css'; didn't worked even in gatsby-browser.js, so i added the css styles in node js import way ( require ) and only by then i could see styles adding to the build version of files.

Interestingly Boostrap , which is also a global styles is referred directly in the initial component and it added to build version why is this special case for certain external css.

[sarrame]

I have seen this kind of error when importing react-search-ui files is that the reason i am unable to find the file using import ?

Could not find a declaration file for module '@elastic/react-search-ui'. '/Users/..../node_modules/@elastic/react-search-ui/lib/index.js' implicitly has an 'any' type.
Try npm install @types/elastic__react-search-ui if it exists or add a new declaration (.d.ts) file containing declare module '@elastic/react-search-ui';ts(7016)

[Vadim_Yakhin]

Thanks for telling about this. That's an interesting issue and we'll need to investigate. I created an issue in the repo: https://github.com/elastic/search-ui/issues/435

Just a thought: maybe the reason is that we are asking users to import styles using a direct link to the styles file. Bootstrap, on the other hand, has shortcuts: https://github.com/twbs/bootstrap/blob/master/package.json#L73-L75. But that's only a guess.

[sarrame]

Thank you for taking step ahead, i am still wondering around the difference between

require('@elastic/react-search-ui-views/lib/styles/styles.css');

and

import '@elastic/react-search-ui-views/lib/styles/styles.css';

[JasonStoltz (Jason Stoltzfus)]

@sarrame I don't know why this is not working. I've entered an issue on the Gatsby project, trying to find answers. https://github.com/gatsbyjs/gatsby/issues/19446

[sarrame]

@JasonStoltz , Appreciate the steps taken

[JasonStoltz (Jason Stoltzfus)]

@sarrame It appears to be an issue in Gatsby. They provided a workaround which worked for me and should work for you.

Change your import to the following:

import styles from "@elastic/react-search-ui-views/lib/styles/styles.css"

// IMPORTANT: Keep this line, it is a workaround to make imported styles work in
// Gatsby: https://github.com/gatsbyjs/gatsby/issues/19446
if (!styles) {
  console.log("Failed to include styles")   // This should never run
}

[sarrame]

@JasonStoltz Yes seen the thread, sure will try and let you know

[JasonStoltz (Jason Stoltzfus)]

Noting it here, that the root cause is an issue in our package: https://github.com/gatsbyjs/gatsby/issues/19446#issuecomment-553019807. Hopefully the workaround is sufficient for now.