Vulnerabilities in the latest react-localize-redux

[johnwen84]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
npm i react-localize-redux@latest

5 high severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
Just run,
npm i react-localize-redux@latest
npm will report 5 high severity vulnerabilities

What is the expected behavior?
We expect that no vulnerability should be reported
We can run "npm audit fix --force" to get rid of the vulnerabilities, but that will bring the version to 2.17.5, which causes package conflicts and maybe more other problems.

Which versions of react and react-localize-redux are you using?
"react": "^16.8.4",
"react-cookie": "^4.0.3",
"react-dom": "^16.8.4",
"react-localize-redux": "^3.5.3",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",

[cristianoccazinsp]

It's a shame, but the library doesn't seem maintained anymore.

[johnwen84]

@cristianoccazinsp yea it sucks. I guess I'll have to find an alternative.

[cristianoccazinsp]

Let me know if you find any!

[jimmailcamp]

@ryandrewjohnson Any change you can update the package to fix these? Using this heavily in production

[cristianoccazinsp]

Bump!

[jimmailcamp]

Just switched to i18nreact. Def recommend it. You can opt out for the route prefixes easily.
Basicly just wrap the t function in i18n with your own component. And change every import statement where you used to use this package.
Worth the hassle, as it's very maintained unlike this shitshow.

[gerhardcit]

@jimmailcamp , any change you have some kind of sample that would help a non-react guy that have to fix a react system (get it running with vite)?

[jimmailcamp]

I've set it up for next.js and Cra.
Not much experience with vite. Tho I definitly recommend the switch to Next. The community is big, documentation is clear and out of the box compiling just works without any config whatsoever.

Even in CRA I used 'i18next'. Just follow the documentation and u should be good to go. Heres a start:
Works in CRA* & Next.js

App.js

Initialize initI18n() in a useEffect with empty deps array;

InitI18n.js

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

return i18n
// learn more: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// pass the i18n instance to react-i18next.
.use(initReactI18next)
// init i18next
// for all options read: https://www.i18next.com/overview/configuration-options
.init({
react:{
transSupportBasicHtmlNodes: true,
transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p', 'b', 'span']
},
debug:false,
fallbackLng: 'en',
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},

        resources: {
            en: {
                ...
             
            },
            nl: {
             ...
            }
        }
    });

My own translation component that wraps i18n t method:

import React from 'react';
import {useTranslation} from 'react-i18next';

export const Translation = ({id, ...props}) => {
const {t} = useTranslation();
if (props.ns) return <>{t(id, {...props})}</>
return <>{t( id.replace(${id.split('.')[0]}., ''), {...props, ns : id.split('.')[0]})}</>
}

Hope this helps