ReferenceError: Can't find variable: Intl

for now I just changed webpack.config.js
'DEVTOOLS': process.env.DEVTOOLS === 'true' ? true : true
and then 'npm start' shows devtools

Solved, please remove.

Hi,
would be great if you upgrade your example to react, react-dom 0.14.0, since it was recently released.

Regards.

Hi,
You need update one reference on your README file
You're using React Transform (react-transform-her - https://github.com/gaearon/react-transform-hmr)
and not React Hot Loader, in fact it is already deprecated.

Regards.

From DevTools:

Uncaught Error: locals[0] does not appear to be a `module` object with Hot Module
replacement API enabled. You should disable react-transform-hmr in production by
using `env` section in Babel configuration.

Accessing the login page from a link / bookmark / external site currently fails because location.state is only defined when triggering requireAuth from a protected route. If the login page is accessed directly, location.state is undefined and therefore location.state.nextPathname throws a TypeError.

Please add a licens file for this repository.

ReferenceError: Can't find variable: Intl

Maybe use http://formatjs.io instead of babel intl?

I'm developing a react app using https://github.com/davezuko/react-redux-starter-kit.

I'm studing your code for the localization.
However I can't load json language files as you do (import * is awesome for this).
I can see it works in your project but not in mine:
http://stackoverflow.com/questions/34453020/import-doesnt-load-the-object-in-es6

Is it due to some webpack loader issue or some kind of extra configuration?

This isn't really an issue with your work here. What you've done looks fantastic :) I'm still trying to understand it all, but I was hoping you could help me understand where the React Router API could be better for you to work with.

At React Europe, @gaearon demonstrated how redux lets you really easily do things like record/replay. However, in the 1.0 router API we don't exactly have a clean place for you to record location changes so you can replay them later. Is this a problem for you? If so, what would an ideal API look like for that use case?

I appreciate any knowledge you can share. Thanks!

amazing work !
it's there a way to remove the i18n support ? it's �just not necessary for some case .

Just a note, when upgrading to [email protected] the requireAuth() method for onEnter needs to be updated: https://github.com/emmenko/redux-react-router-async-example/blob/master/lib/Root.js#L100

function requireAuth(nextState, replaceState) {
  const state = store.getState();
  const isLoggedIn = Boolean(state.application.credentials);
  if (!isLoggedIn) {
    replaceState({}, '/login', {
      nextPathname: nextState.location.pathname,
    });
  }
}

I'm not really sure how to use replaceState. Should we be passing in an empty object, or nextState?

Subj

Why is it called "redux-react-router-async-example"?

So it appears the translation steps go like this:

(per-view files from babel-transform-react-intl) => 
    (individual .json files) =>
    (per-locale XLIFF)

This automatically creates the en locale and updates the <source> entries in other locales, if they exist, while preserving <target>.

I'm just curious, how do you complete the circle? I assume you upload the XLIFF to a supplier like Transifex, but then do you merge the XLIFF back down into JSON to be loaded by the app?

as title asks :)

When you change something in the locales, you get the following error:

<Provider> does not support changing `store` on the fly.
It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. 
See https://github.com/rackt/react-redux/releases/tag/v2.0.0 for the migration instructions.

Although looking at the code in configure-store.js, it seems that you followed the changes correctly.

Hi,
I see on the redux examples (real-world) that it is using
there are some especial reason that you're not using it?

There are an error Uncaught TypeError: reducer is not a function if you running a project with devtools (npm run start:devtools) and making changes in reducer. I guess it's HotModuleReplacementPlugin bug, but I've never encountered such bug before.

There no such bug in hot replacing another project files.

There is a lot of value in this repo and I really appreciate the time you took to help the community with sharing this codebase. Kudos for that.

I think though, this is an opinionated project, not a minimal example in the likes of the redux docs, that are very minimal and try to be less opinionated. The Readme already explains some decisions, which I think is very nice. But I would suggest a bit more explanation.

This is outputting a very large bundle of about 100k compressed Javascript, and I dig a bit to analyze it. It's easier for people already familiar with all this technologies to reason and learn from this repo, but beginners would probably have a hard time understanding all of it. A bit of documentation might be the only thing it needs, or maybe extracting a minimal example on a different repo might be a good idea too.

Once more, please don't take this negatively. I really appreciate the project and it was very valuable to me. It is just some things to think about if you intend to work a bit more on this repo.

For reference, this is some of the things I did to analyze the bundle size:

$NODE_ENV=production webpack --json --config webpack.config.production.js | analyze-bundle-size
react: 609.67 kB (56.1%)
  fbjs: 32.87 kB (5.39%)
    <self>: 32.87 kB (100%)
  <self>: 576.8 kB (94.6%)
react-intl: 121.01 kB (11.1%)
  intl-messageformat: 53.26 kB (44.0%)
    intl-messageformat-parser: 36.08 kB (67.7%)
      <self>: 36.08 kB (100%)
    <self>: 17.18 kB (32.3%)
  intl-relativeformat: 14.66 kB (12.1%)
    <self>: 14.66 kB (100%)
  intl-format-cache: 2.86 kB (2.36%)
    <self>: 2.86 kB (100%)
  intl-relativeformat .: 15 B (0.0121%)
    <self>: 15 B (100%)
  intl-messageformat .: 15 B (0.0121%)
    <self>: 15 B (100%)
  <self>: 50.2 kB (41.5%)
react-router: 79.71 kB (7.33%)
  warning: 1.76 kB (2.21%)
    <self>: 1.76 kB (100%)
  invariant: 1.5 kB (1.89%)
    <self>: 1.5 kB (100%)
  <self>: 76.44 kB (95.9%)
history: 57.55 kB (5.29%)
  qs: 12.58 kB (21.9%)
    <self>: 12.58 kB (100%)
  deep-equal: 3.8 kB (6.61%)
    <self>: 3.8 kB (100%)
  warning: 1.76 kB (3.07%)
    <self>: 1.76 kB (100%)
  invariant: 1.5 kB (2.61%)
    <self>: 1.5 kB (100%)
  <self>: 37.91 kB (65.9%)
webpack: 45.85 kB (4.22%)
  <self>: 251 B (0.535%)
redux-router: 23.67 kB (2.18%)
  deep-equal: 3.8 kB (16.1%)
    <self>: 3.8 kB (100%)
  <self>: 19.86 kB (83.9%)
redux: 18.54 kB (1.71%)
  <self>: 18.54 kB (100%)
react-redux: 17 kB (1.56%)
  invariant: 1.5 kB (8.85%)
    <self>: 1.5 kB (100%)
  hoist-non-react-statics: 854 B (4.91%)
    <self>: 854 B (100%)
  <self>: 14.66 kB (86.2%)
babel-runtime: 12.52 kB (1.15%)
  core-js: 7.87 kB (62.8%)
    <self>: 7.87 kB (100%)
  <self>: 4.65 kB (37.2%)
whatwg-fetch: 9.69 kB (0.891%)
  <self>: 9.69 kB (100%)
parse-link-header: 1.38 kB (0.127%)
  xtend: 384 B (27.2%)
    <self>: 384 B (100%)
  <self>: 1 kB (72.8%)
classnames: 1.08 kB (0.0994%)
  <self>: 1.08 kB (100%)
redux-thunk: 375 B (0.0337%)
  <self>: 375 B (100%)
react-dom: 63 B (0.00566%)
  <self>: 63 B (100%)
<self>: 89.41 kB (8.22%)

You can also save the JSON output and upload to the visual analyzer here: http://webpack.github.io/analyse/ It might be a bit overwhelming tho.

hi @emmenko
this example seems not work on all version of IE 。
i checked here and here , these issue may cause the dev version(with hot-loader) not work on IE.

but the dist version(without hot-loader) is not work either 。

React itself support IE8+ , is the Redux issue ?

There's a breaking change to the compose() function in Redux 2. I was playing with your boilerplate and updated. However, it breaks the Root store creator.

I applied the fix. Here it is if you like.

Something strange has started happening in my solution, which is based off this one. In the logger I'm beginning to get nested logs. Any idea why this might be happening?

can you explain the usage and the reasone why you create a fetchOnUpdate decorator?

Thanks in advice

How can i make this project isomorphic ?

Hi, it would be nice to include some tests and coverage as well.
I've started with actions/application, I will add more!

First thanks for such a great example.
I have one problem when reading and learning your code that really confused me, so I look to you for help.

In /persistence/store, the return of the function is

return Object.assign({}, store, {
      dispatch (action) {
        store.dispatch(action)
        ...
      }
    })

And I have no idea about the last params in Object.assign(), why there is function inside the object? where is dispatch comes from?

It may be a basic question of JS feature, if so, could you tell me where to find the document, I can check myself.
Thanks a lot

I'd like to apply all '_translations' file that I translated to apply to original json such as 'lib/i18n/de.js'. Is there any good way to apply translations xml file to original json? I couldn't find automatic ways. Do I have to copy and paste per each changed sentence.

Hey

I'm playing with this nice boilerplate but i'm a little confused on how to force a child component to wait for some data to be loaded.

In my case, fetchOnUpdate doesnt wait for the result before rendering the child.

Should i manually wrap every component into a HoC that toggle the child based on the existence of a desired prop ?

ex :

render() {
   if (this.props.data) {
        return <ChildComponent {...this.props.data}/>
   } else {
        return <div>Loading...</div>;
   }
}

maybe there's any existinsting decorator/HoC that can handle this for me ?

Thanks

First off, thank you so much for publishing this, relatively new to React and need to implement React-Intl in ES6, this repo is a lifesaver.

Particularly helpful is the fact that this example combines React Router with React-Intl, something sorely missing from the React-Intl "examples" section (read all of this: remix-run/react-router#484 and then realized this was for ES5 + React-Intl 1.x).

Second, one question that I still have when looking through your app, why did you store the current "locale" in LocalStorage instead of a traditional "store"?

Perhaps I'm missing something Redux-related.

It would be really interesting if you can tell about the decision of using Redux Router over React Router Redux.

I saw that you had an issue for using React Router Redux, and finally you chose the Redux Router.

Can you share your knowledge about this?
10x!

Redux 1.0 RC is out with breaking changes. No further API changes are expected in 1.0 so it may be a good time to port the example to 1.0 RC (in a branch). We will release 1.0 when the docs are ready.

You can find the comprehensive list of the changes in 1.0 RC against 1.0 alpha in the Redux 1.0 RC release notes. If you haven't ported to alpha yet, you'll need to apply changes from 0.12 to alpha first.

Thank you!
Please make sure to report any issues so we can release a stable 1.0.

https://github.com/FormidableLabs/radium

in Login.js

handleInputChange (evt) {
    this.setState({
      [evt.target.name]: evt.target.value
    })
  }

evt.target.name gets nothing

> evt.target.name 
< ""

should be evt.target.type or use refs instead.

const createHistory = process.env.NODE_ENV === 'production' ? createHashHistory : createBrowserHistory

on the localhost everything is fine but when getting a build then "#/?_t"

how can I fix this?

Thanks!

First of all, I know this is a WIP and thanks for creating this amazing starter/example.

I am curious if you plan or would be able to provide an example for deploying to Heroku. As it currently stands, the production build fails when deploying to Heroku.

Thanks again!

It would be great to add https://www.npmjs.com/package/redux-react-router in this project.
That way the current route is also stored in the state, which makes a lot of sense.

Just starting with Redux, without flux knowledge.
I can't get the meaning of actionHandlers, where is it from?
No action creators?

Anyway... What's the meaning of the underscore parameter _?

const actionHandlers = {
  [constants.LOGGED_IN]: (_, action) => action.payload,
  [constants.LOG_OUT]: () => ({ token: null }),
  [constants.LOCALE_SWITCHED]: (_, action) => ({ locale: action.payload })
....

Thank you very much for your hard work.

i checked the demo and i don't see why you mentioned it is Async because its loading all components with app only.

I was changing components to use Material UI awesome ones when I tried implement a Selectable List (see: http://www.material-ui.com/#/components/list) and I got this very funny error:

0 info it worked if it ends with ok
1 verbose cli [ 'c:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'c:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
7 info lifecycle [email protected]~start: [email protected]
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
9 c:\Users\Aleff\Desktop\github\redux-react-router-async-example
11 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'npm run build && node server.js' ]
12 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `npm run build && node server.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (c:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232:16)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at EventEmitter.emit (events.js:172:7)
14 verbose stack     at ChildProcess.<anonymous> (c:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:87:13)
14 verbose stack     at ChildProcess.emit (events.js:172:7)
14 verbose stack     at maybeClose (internal/child_process.js:818:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd c:\Users\Aleff\Desktop\github\redux-react-router-async-example
17 error Windows_NT 10.0.10586
18 error argv "c:\\Program Files\\nodejs\\node.exe" "c:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v5.3.0
20 error npm  v3.3.12
21 error code ELIFECYCLE
22 error [email protected] start: `npm run build && node server.js`
22 error Exit status 1
23 error Failed at the [email protected] start script 'npm run build && node server.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the redux-react-router-async-example package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     npm run build && node server.js
23 error You can get their info via:
23 error     npm owner ls redux-react-router-async-example
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Any idea about what did happen?