Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[with-react-intl] - FormattedMessage HTML

See original GitHub issue

Examples bug report

[EDIT: 18/03/2020] - Although the API is changing, it still persists on FormattedMessage & formatMessage()

Example name

with-react-intl

Describe the bug

Handling formatting of messages for html.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Download the example and install
Change value to something containing basic html (like the example below)
Implement FormattedMessage (with rich text)
Start the server ad refresh
See error

Expected behavior

To be able to handle the key - value like this:

<FormattedHTMLMessage id="main.title" defaultMessage="Home" />

{
  "main.title": "I want this amazing<strong>deal</strong>",
}

Screenshots

[React Intl] Error formatting message: "nav.home" for locale: "en", using default message as fallback.
Error: Cannot format XML message without DOMParser
    at new FormatError (/Users/bramdecuypere/git/with-react-intl-app/node_modules/intl-messageformat/dist/formatters.js:27:28)
    at Object.formatHTMLMessage (/Users/bramdecuypere/git/with-react-intl-app/node_modules/intl-messageformat/dist/formatters.js:283:15)
    at IntlMessageFormat.formatHTMLMessage (/Users/bramdecuypere/git/with-react-intl-app/node_modules/intl-messageformat/dist/core.js:70:33)
    at formatMessage (/Users/bramdecuypere/git/with-react-intl-app/node_modules/react-intl/dist/formatters/message.js:67:47)
    at formatHTMLMessage (/Users/bramdecuypere/git/with-react-intl-app/node_modules/react-intl/dist/formatters/message.js:119:12)
    at Object.children (/Users/bramdecuypere/git/with-react-intl-app/node_modules/react-intl/dist/components/html-message.js:55:40)
    at ReactDOMServerRenderer.render (/Users/bramdecuypere/git/with-react-intl-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3855:55)
    at ReactDOMServerRenderer.read (/Users/bramdecuypere/git/with-react-intl-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3536:29)
    at renderToString (/Users/bramdecuypere/git/with-react-intl-app/node_modules/react-dom/cjs/react-dom-server.node.development.js:4245:27)
    at render (/Users/bramdecuypere/git/with-react-intl-app/node_modules/next/dist/next-server/server/render.js:80:16)
    at Object.renderPage (/Users/bramdecuypere/git/with-react-intl-app/node_modules/next/dist/next-server/server/render.js:291:16)
    at Function.getInitialProps (/Users/bramdecuypere/git/with-react-intl-app/.next/server/static/development/pages/_document.js:485:19)
    at Function.getInitialProps (/Users/bramdecuypere/git/with-react-intl-app/.next/server/static/development/pages/_document.js:1084:31)
    at Object.loadGetInitialProps (/Users/bramdecuypere/git/with-react-intl-app/node_modules/next/dist/next-server/lib/utils.js:59:29)
    at Object.renderToHTML (/Users/bramdecuypere/git/with-react-intl-app/node_modules/next/dist/next-server/server/render.js:295:36)
    at processTicksAndRejections (internal/process/task_queues.js:86:5)

System information

OS: macOS, Windows
Node: v11.13.0
Version of Next.js: latest / 9.2.1

Additional context

Any suggestion to fix this would be great. I’ve checked myself (implementing jsdom), but haven’t really got an idea on how to implement it in next.js.

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:12 (5 by maintainers)

Top GitHub Comments

1reaction

fabianisherecommented, Feb 18, 2020

I see your point, but DOMParser is a heavy dependency if you are not using the functionality. Maybe a better idea is to document this behavior in the example, with instructions on how to apply the polyfill.

0reactions

balazsorban44commented, Jan 27, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Top Results From Across the Web

Upgrade Guide (v3 -> v4) | Format.JS

formatHTMLMessage were originally created when React was fairly new. These components helped ease migration over from raw HTML to JSX. Given that current ......

How to translate your React app with react-intl / FormatJS

Tutorial with a complete example on react translations. Covers: react-intl, FormattedMessage, IntlProvider and babel-plugin-react-intl.

How to use FormattedMessage inside an option tag in React ...

With react-intl v4.0.0 you can do this: <select className=" ...

React internationalization with react-intl - Localizely

A React Intl example - How to set up a multilingual React project and how to manage translations in the localization process.

Internationalize your React App with React Intl - bene : studio

import { FormattedMessage } from 'react-intl'. function App() {. return ( ... Instead, you have to define HTML tags like values. messages.js ...