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
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.
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)
@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
}
Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant
logo are trademarks of the
Apache Software Foundation
in the United States and/or other countries.