React-i18next: Updating to webpack 2 and webpack-dev-server: Cannot find module

[nicolechung]

Hi,

I tried out the example, but updating to webpack 2 (we're trying to update on a project). But we're getting a series of errors:

app.js:12781 Uncaught Error: Cannot find module "react-i18next"
    at webpackMissingModule (app.js:12781)
    at Object.<anonymous> (app.js:12781)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:31928)
    at __webpack_require__ (app.js:20)
    at validateFormat (app.js:66)
    at app.js:69
app.js:12847 [WDS] Errors while compiling. Reload prevented.
app.js:12925 ./app/main.js
Module not found: Error: Can't resolve 'react-i18next' in '/Users/me/react-i18next/example/app'
 @ ./app/main.js 11:20-44
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js
errors @ app.js:12925
app.js:12925 ./app/components/View.js
Module not found: Error: Can't resolve 'react-i18next' in '/Users/me/react-i18next/example/app/components'
 @ ./app/components/View.js 15:20-44
 @ ./app/components/App.js
 @ ./app/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js
errors @ app.js:12925
app.js:12925 ./app/components/AnotherComponent.js
Module not found: Error: Can't resolve 'react-i18next' in '/Users/me/react-i18next/example/app/components'
 @ ./app/components/AnotherComponent.js 11:20-44
 @ ./app/components/View.js
 @ ./app/components/App.js
 @ ./app/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js
errors @ app.js:12925
app.js:12925 ./app/components/YetAnotherComponent.js
Module not found: Error: Can't resolve 'react-i18next' in '/Users/me/react-i18next/example/app/components'
 @ ./app/components/YetAnotherComponent.js 11:20-44
 @ ./app/components/View.js
 @ ./app/components/App.js
 @ ./app/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js

When I dig through the webpack transpiled code I see a bunch of other modules (i.e. I18nextProvider but not react-i18next.

You can see my fork here:
https://github.com/nicolechung/react-i18next/commit/9a2e90a551875ebe2772d4408483e1d0bfbff875

It would be great if you can have a webpack 1 sample AND a webpack 2 sample.

[nicolechung]

Update, I don't know if this is helpful but I tried running:

webpack --progress --color --watch --display-error-details and I got:

ERROR in ./app/main.js
Module not found: Error: Can't resolve 'react-i18next' in 'me/react-i18next/example/app'
resolve 'react-i18next' in 'me/react-i18next/example/app'
  Parsed request is a module
  using description file: me/react-i18next/example/package.json (relative path: ./app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: me/react-i18next/example/package.json (relative path: ./app)

[jamuhl]

did you change https://github.com/i18next/react-i18next/blob/master/example/package.json#L29 to not using the build file but the version published on npm? "react-i18next": "^2.0.0"

the sample will be updated to webpack2 when i find the time - webpack1 got deprecated the last days - so no sense in keeping a sample for webpack1.

[nicolechung]

Yes, that works! (and thanks)

But - for our work project I'm still getting this error:

Uncaught TypeError: Cannot read property 'off' of undefined
    at http://localhost:3333/bundle-f7c4cb7ffca1.js:115285:41
    at Array.forEach (native)
    at Translate.componentWillUnmount (http://localhost:3333/bundle-f7c4cb7ffca1.js:115284:18)
    at http://localhost:3333/bundle-f7c4cb7ffca1.js:107218:25
    at measureLifeCyclePerf (http://localhost:3333/bundle-f7c4cb7ffca1.js:106884:12)
    at ReactCompositeComponentWrapper.unmountComponent (http://localhost:3333/bundle-f7c4cb7ffca1.js:107217:11)
    at Object.unmountComponent (http://localhost:3333/bundle-f7c4cb7ffca1.js:31065:22)
    at Object.updateChildren (http://localhost:3333/bundle-f7c4cb7ffca1.js:106728:27)
    at ReactDOMComponent._reconcilerUpdateChildren (http://localhost:3333/bundle-f7c4cb7ffca1.js:111506:32)
    at ReactDOMComponent._updateChildren (http://localhost:3333/bundle-f7c4cb7ffca1.js:111610:31)
(anonymous) @   translate.js:126

Any ideas? We're on a Typescript project, is it possible that the @types/react-i18next needs to be updated? The existing project was working when we were in Webpack 1, all we did was switch it to Webpack 2.

It looks like that branch was running "react-i18next": "2.2.0" with "@types/react-i18next": "1.7.7",

[jamuhl]

no idea honestly...have to find time to migrate the sample here to webpack2 to test. sorry...please update if you find something.

try setting some breakpoints to find out more.

[nicolechung]

My branch is working so I can probably submit a PR for it (for webpack 2). That being said, I'm not sure people on really big projects are all going to switch to webpack 2 right away, so maybe having samples for both webpack 1 and webpack 2 might not hurt?

Let me know and I will change the PR to include both.

As for my project where it's not working...we have {wait:true}. When we set it to false the component does not render at all and I tracked it down to this block of code in translate.js:

if (!ready && wait) return null;

        return React.createElement(
          WrappedComponent,
          { ...this.props, ...extraProps }
        );

The breakpoints I set seem to indicate that return React.createElement ... does run, so I'm not sure why I'm getting an empty component instead.

We're running the library with React Router (v3) so I don't know if wrapping the component twice has anything to do with it.

const withRouterHOC = withRouter(OurComponent)
const connectHOC = connect(stateStuff, propsStuff)(withRouterHOC)
const translateHOC = translate(['namespace'], {wait: true})(connectHOC)
export default translateHOC

Any suggestions would be greatly appreciated. I might try updating to React Router v4 but since that's a pretty major change I'd like to avoid it right now if possible (i.e. update in stages)

[jamuhl]

Agree...sample in webpack2 and keeping the old in webpack1 for awhile wouldn't hurt.

strange...if React.createElement gets called i'm not sure why it does not work...update to react v4 while new and hot i wouldn't do this effort myself neither...

[nicolechung]

Yeah unfortunately there is not JS error or console error message to let me know why null is still being passed, but the children of the Translate component is definitely empty

[jamuhl]

@nicolechung thanks again for doing the webpack2 sample...really awesome and happy to have that - should have done that earlier.

Is there some repo to checkout...really want to get that issue solved - will save some time on the weekend to dig into it.

[nicolechung]

I think I might know what the problem might be...if you set a backEnd
loadPath, do the api calls need to expressly return status 200 (instead of
204?)

I got a minimal example working with react router 3 so I know wrapping the
component and using react router v3 is not the problem.

On 17 March 2017 at 05:27, Jan Mühlemann [e-mail] wrote:

@nicolechung https://github.com/nicolechung thanks again for doing the
webpack2 sample...really awesome and happy to have that - should have done
that earlier.

Is there some repo to checkout...really want to get that issue solved -
will save some time on the weekend to dig into it.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/i18next/react-i18next/issues/235#issuecomment-287306506,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAvEYgxDwCQVzQXH46PnmK_OXyEt1kg2ks5rmlHogaJpZM4MaV6Y
.

[jamuhl]

no logic in xhr backend is like this: https://github.com/i18next/i18next-xhr-backend/blob/master/src/index.js#L51 accepting all 200 to 399

[nicolechung]

Yes, a bad guess with the 200 code.

I sorta got it working.

We have two components before, nested

<Translate>
  <AnotherComponent>
    <Translate> ....

When I took out the outer component it starts working as expected. I'm not
quite sure why it worked before.

I also set the backend to crossDomain since I'm on localhost or staging and
the api comes from somewhere else for now.

On 17 March 2017 at 09:21, Jan Mühlemann [e-mail] wrote:

no logic in xhr backend is like this: https://github.com/i18next/
i18next-xhr-backend/blob/master/src/index.js#L51 accepting all 200 to 399

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/i18next/react-i18next/issues/235#issuecomment-287351883,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAvEYqKGv1u4FQlCYb3c_0VvgMCduS5Pks5rmojegaJpZM4MaV6Y
.

[jamuhl]

hm...wondering, think we got such constellations in our own apps too, where Translate HOCs are nested...strange.

yes, in that case backend needs to be set for CORS.

If you still try to figure out a solution for backend and translation management...you might have a look at http://locize.com it's our localization tier - and as a plus beside being built on i18next it enables you to do incontext translations and other stuff like versioning for the development, staging, production process.

If you like we could grant you an extended trial on there

[nicolechung]

So I got it somewhat working (at least rendering) but when I switch routes it kind of fails:

If you have any ideas let me know...(looks like you have some issues piling up so...more of a "nice if you can help but it's obviously a Friday" kind of thing)

[nicolechung]

[jamuhl]

hm...wondering...is this caused by a component inside a translated hoc not having wait: true set? Just as once i18next got initialized the store is set - so the only time this can/should happen is if a component (un)binds before i18next was initialized...here it seems like a unmount happens before ready....

[nicolechung]

Okay, good to know.

1. I just did a search of the whole project and {wait: true} is set (I know I flipped it to false to test, but that just made the render of the child components not happen, so I guess I set it back).

2. I'm using Typescript, does that mean anything? I have a minimal example with React Router totally working, but my project (React-Router + Redux + Typescript), does not work.

Here is a screenshot of my working example:

Here is a screenshot of my project:

Will try to get a minimal example with Typescript up in a bit

[nicolechung]

Here's my i18n settings (changed a bit from the example because the Typescript linter was complaining):

import * as i18n from 'i18next'
import * as XHR from 'i18next-xhr-backend'
import * as LanguageDetector from 'i18next-browser-languagedetector'
import config from '../src/config/config'

i18n
  .use(XHR)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en',
    ns: ['translation'],
    defaultNS: 'translation',
    debug: true,
    interpolation: {
      escapeValue: false, // not needed for react!!
    },
    backend: {
      loadPath: [config.api, 'queryparamsstuff'].join('/'),
      crossDomain: true
    }
  })

export default i18n

[jamuhl]

Not sure but shouldn't it be:

import i18n from 'i18next'
import XHR from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

or change your export to:

export default i18n.default;

As the exports that should be used are on default (we export the functions too - but that won't work on export i18n again).

[jamuhl]

or

import * as i18n from 'i18next'
import * as XHR from 'i18next-xhr-backend'
import * as LanguageDetector from 'i18next-browser-languagedetector'
import config from '../src/config/config'

const instance = i18n
  .use(XHR)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en',
    ns: ['translation'],
    defaultNS: 'translation',
    debug: true,
    interpolation: {
      escapeValue: false, // not needed for react!!
    },
    backend: {
      loadPath: [config.api, 'queryparamsstuff'].join('/'),
      crossDomain: true
    }
  })

export default instance;

so you export the i18n instance not some exports

[nicolechung]

Yeah I have to write import * as <Class> that's a Typescript thing (you have to cast otherwise the tslinter complains)

Let me try that.

[nicolechung]

Yes! That totally works!

Do you have a lot of Typescript users, should I file a PR to update the docs for Typescript people?

[jamuhl]

Not knowing if there are a lot of typescript users ... but for sure there are some ... even more with growing popularity of angular2....

so a PR would be absolutely welcome...making stuff more clear helps all. thank you.