Cannot compile after update

[geniuz]

Failed to compile.

./node_modules/react-i18next/src/withTranslation.js
SyntaxError: ./node_modules/react-i18next/src/withTranslation.js: Unexpected token (28:39)

26 | I18nextWithTranslation.WrappedComponent = WrappedComponent;
27 |

28 | const forwardRef = (props, ref) => <I18nextWithTranslation {...props} forwardedRef={ref} />;
| ^
29 |
30 | return options.withRef ? React.forwardRef(forwardRef) : I18nextWithTranslation;
31 | };

[jamuhl]

Why and how are you transpiling?

[jamuhl]

Did you clone the repo? npm i? npm run build?

[geniuz]

No. I run command npm update.
install latest version of react (16.11.0), i18next, react-i18next (11.0.0) and other pkgs.

[jamuhl]

Failed to compile.

./node_modules/react-i18next/src/withTranslation.js <---- that is the source files

your app should use the compiled files

do you import like: import { withTranslation } from 'react-i18next'

[jamuhl]

https://github.com/i18next/react-i18next/tree/master/example/react is an example...with react (16.11.0), i18next, react-i18next (11.0.0)

[geniuz]

Can I use new version, if my project not used babel?

[jamuhl]

I would say yes - when you know what you're doing...there are builds for commonjs, esm, umd in build folder

[koverg70]

We have a create-react-app project which uses Typescript, created 10 months ago, and yarn upgraded to the latest nmp packages. (Do not know if Typescript is relevant here.)

The problem is that our app tries to compile withTranslation.js as a Javascript but since the above mentioned commit it contains some JSX language constrcuctions. So our build system (which is create-react-app based, not we configured) can not compile it.

Since this is the only .js file with JSX in our whole node_modules directory (which enumerates more than 50 thousand files) I kindly ask if it is possible to go back to plain Javascript in this only one withTranslation.js file? Only one programmable JSX instantiation is needed here...

Thanks in advance.

[mcmxc]

I've got here because of the same issue, and in my case the problem was in VSCode automatic import. The translation hook was imported by VSC like so:

import { useTranslation } from '~/../node_modules/react-i18next/src/index';

Changing the line above to import { useTranslation } 'react-i18next'; solved this for me, hopefully it will be helpful to someone.

[jamuhl]

@koverg70 PR welcome

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

If you liked my support / work - I would enjoy a coffee sponsored using the “:purple_heart:Sponsor Button”.

There are many ways to help this project 🙏