-
-
Notifications
You must be signed in to change notification settings - Fork 215
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React npm packages using rollup not working with srr or nextjs? #438
Comments
@siamahnaf I have found a solution. In the library: // src/style-inject.js
export default function styleInject(css, id, { insertAt } = {}) {
if (!css) return
if (typeof document === 'undefined') {
globalThis.ssrCss = globalThis.ssrCss || []
globalThis.ssrCss.push({ css, id })
return
}
if (document.getElementById(id)) return
const head = document.head || document.getElementsByTagName('head')[0]
const style = document.createElement('style')
style.id = id
style.type = 'text/css'
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild)
} else {
head.appendChild(style)
}
} else {
head.appendChild(style)
}
if (style.styleSheet) {
style.styleSheet.cssText = css
} else {
style.appendChild(document.createTextNode(css))
}
} // rollup.config.js
import { randomUUID } from 'crypto';
import path from 'path';
const styleInjectPath = path
.resolve('./src/style-inject.js')
.replace(/[\\/]+/g, '/')
const ids = new Map()
const getUniqueId = (id) => {
if (ids.has(id)) return ids.get(id)
const uid = randomUUID()
ids.set(id, uid)
return uid
}
...
postcss({
inject(cssVariableName, id) {
return `
import styleInject from '${styleInjectPath}';
styleInject(${cssVariableName}, 'style-${getUniqueId(id)}');
`
},
}),
... In the Next js project // next pages/_document.js
import React from 'react'
type SSRCssModule = {
css: string
id: string
}
interface GlobalThis {
ssrCss?: SSRCssModule[]
}
declare const globalThis: GlobalThis
const SSRInjectStyles: React.FC = () => {
if (!globalThis.ssrCss) return null
return (
<>
{globalThis.ssrCss.map((module: { css: string; id: string }) => (
<style
dangerouslySetInnerHTML={{
__html: module.css,
}}
id={module.id}
key={module.id}></style>
))}
</>
)
}
export default Document(props) {
return (
...
<Head>
...
<SSRInjectStyles />
</Head>
...
)
} |
where is globalThis coming from @alfredosalzillo in the first file it is not defined |
your solution works @alfredosalzillo. I put the and I found that the styles were inserted multiple times. I had to change a little bit your
|
@adarsh-drishya wich bundler are you using? |
@cristiannietodev91 the bundler and the import cache of modules should have prevented the duplication when a component is used multiple time during the SSR, but nice catch :) |
I create a simple react packages for personal uses (private package). But when I want to use it into nextjs project it's css not working with ssr. Actually, working but not ssr friendly. Here after component loading then css will be loaded. But I want it with ssr. I mean css also work with ssr.
rollup.config.mjs-
Can anyone help me.
The text was updated successfully, but these errors were encountered: