Fails on SSR

[adam-26]

Hi,

The measureScollbar() utility method uses the document object that is not available on nodejs.
See it here.

This causes the error ReferenceError: document is not defined when rendering is attempted on nodejs.

Adam.

[wayne1203]

Is it the same problem?

[adam-26]

@wayne1203, looks like it is the same problem

[wayne1203]

@adam-26 Are you using RN 0.49 too??

[EtienneLem]

v2.1.2 has been released, let me know if you’re still having issues with SSR.

[iksent]

document is not defined
ReferenceError: document is not defined
    at _convertStyleToCSS (...\node_modules\emoji-mart\dist\components\emoji\nimble-emoji.js:94:13)

Using it with Next.js:

import { getEmojiDataFromNative } from 'emoji-mart/dist/utils'
import NimbleEmoji from 'emoji-mart/dist/components/emoji/nimble-emoji'
import appleEmojis from 'emoji-mart/data/apple.json'
import emojiRegexp from 'emoji-regex'

export const unicodeEmojiRegexp = emojiRegexp()

const prepareText = (content: string): string => {
  return content
    ? content
        .replace(unicodeEmojiRegexp, (emoji: string) => {
          const emojiData = getEmojiDataFromNative(emoji, 'apple', appleEmojis)
          return !emojiData
            ? ''
            : NimbleEmoji({
                data: appleEmojis,
                html: true,
                emoji: emojiData,
                skin: emojiData.skin || 1,
                set: 'apple',
                size: 18,
                sheetSize: 32,
              })
        })
        .replace('<a href', '<a target="_blank" href')
    : '-'
}

const EditorPostViewer = (props) => {
  const { text } = props

  return (
    <div dangerouslySetInnerHTML={{ __html: prepareText(text) }} />
  )
}