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