Unable to resolve module react-dom/server from `/...[path to your user folder]/...[project]/node_modules/react-localize-redux/lib/Translate.js

[juanjoslopezv]

When using this library in a React Native app its not able to compile due to the fact that React-Dom is not available for a React Native App.

Commenting out these lines in:
lib/Translate.js

14 // var _server = require('react-dom/server');
15
16 // var _server2 = _interopRequireDefault(_server);
.
.
.
118 // var translation = _server2.default.renderToStaticMarkup(children);
119 // var defaultLanguage = locale.options.defaultLanguage || locale.languages[0].code;
120 // store.dispatch((0, _locale.addTranslationForLanguage)(_defineProperty({}, id, translation), defaultLanguage));

Allows you to compile and use it properly

[ryandrewjohnson]

I will have to look into this as react-dom is a required dependency as the renderToStaticMarkup method is required in order to handle HTML markup passed to Translate as children.

I would need to investigate whether there is a third-party library that accomplishes the same as renderToStaticMarkup, but without adding significant size to the library.

[husni1992]

Any solution for this issue? The version of localize library has not changed, but after running a npm install I got this issue. It's very bad that there's a breaking change without a version change. Very disappointing.

[ryandrewjohnson]

@husni1992 while I understand your frustration I myself have never done any development in React Native, or claimed this library would work out of the box with it. Unfortunately the latest changes in v2.17.0 had an unforeseen impact on React Native as it doesn't support react-dom.

Unfortunately I don't have much bandwidth to look into this issue right now. For now I suggest downgrade to v2.16.0 or if you're able to recommend a valid solution that replaces react-dom's renderToStaticMarkup that works in React Native I could potentially swap that in.

[ryandrewjohnson]

@husni1992 @juanjoslopezv I have developed a work around for this issue that will be available in the next major release, which you can read about here (Moving to v3 #67).

Unfortunately I could not find a viable option to replace react-dom's renderToStaticMarkup. Instead I have added a new required option for initialize named renderToStaticMarkup, which will work differently depending on whether you're using React in browser or React Native.

• If using React in browser you'd simply pass in renderToStaticMarkup from react-dom.
• If using React Native you'd set this value to false. This also leaves things open for if someone does eventually find a third party solution that can be swapped in for renderToStaticMarkup.

import { renderToStaticMarkup } from 'react-dom/server';

// for react in browser
this.props.initialize({
    languages: [
      { name: 'English', code: 'en' }, 
      { name: 'French', code: 'fr' }, 
    ],
    options: { renderToStaticMarkup }
});

// for react native
this.props.initialize({
    languages: [
      { name: 'English', code: 'en' }, 
      { name: 'French', code: 'fr' }, 
    ],
    options: { renderToStaticMarkup: false }
});

The one caveat being is that React Native users would not be able to include inline default translations that contain HTML to Translate. This is where the renderToStaticMarkup was used, and without it I'm unable to Translate's children into an HTML string that would then be stored in your translations. I will be outlining this in more detail in the docs before the release.

// this won't work for React Native
<Translate>
  <p>Here is a <strong>default</strong> translation with some HTML</p>
</Translate>

[Medardas]

although this did cost me several hours of frustration, great work man, appreciate you still maintaining the project!
2.16 will work for now. Tho do you any idea when next release should be ready?

[ryandrewjohnson]

@Medardas it should be ready soon. I'm just working on creating the migration guide, and ironing out a few things with the type definitions.

If you like I've just published the latest release candidate that contains the fix discussed in my previous comment. I have also updated the v3 doc with this info as well.

To install:

npm install react-localize-redux@beta --save

Updated docs:

https://ryandrewjohnson.github.io/react-localize-redux-docs/#initialize
https://ryandrewjohnson.github.io/react-localize-redux-docs/#why-do-i-need-to-pass-rendertostaticmarkup-to-initialize

[ryandrewjohnson]

Issue has been fixed in v3.0.0 release.

See Can I use React Native? for details.