krasevych/react-redux-styled-hot-universal

react boilerplate used best practices and focus on performance

react-redux-styled-hot-universal's Issues

Need to click back button multiple times in order to go back

Hi first of all thanks for this example, it has helped me out immensely as I try to fully grasp the concepts of universal rendering with React.

When entering a random route in the browser, the Not Found Page renders as it is suppose to, but when attempting to go back, I have to click the back button twice in order for the page to render the previous page. When it does finally travel backward, the forward button remains disabled. Any ideas on why this might be occurring? Thanks

npm-run-all and babel-node missing

Add npm-run-all to dev dependencies and make mention of installing babel cli so babel-node works, otherwise it blows up out of the gate.

CSS stylesheet not applied when running on server

Hello,

I imported CSS in components/App/index.js
`import React, {
PropTypes,
PureComponent
} from 'react';
import 'app/styles/global';

import '../../assets/css/theme-default/bootstrap.css';
import '../../assets/css/theme-default/materialadmin.css';
import '../../assets/css/theme-default/font-awesome.min.css'
import '../../assets/css/theme-default/material-design-iconic-font.min.css';

import Navigation from '../../containers/Navigation/NavigationContainer';

export default class App extends PureComponent {
static propTypes = {
children: PropTypes.element.isRequired
};

render() {
const { children } = this.props;

return (
  <div>
    <Navigation />
    {children}
  </div>
);

}
}`

When I run the application in development (npm start), everything is in place

However, when I run prod:start, CSS is not applied to the page.

Can you help?

Thank you

is there a plan to upgrade to react router v4?

Question: Why run with npm instead of yarn?

Maybe not self explanatory, the README specifics installing with yarn, but running with npm? Just wondering why?

Using CSS modules for server side rendering

Hi there,

I am trying to use react-toolbox with the boilerplate you propose and am struggling a lot. I am not very proficient with all these new web technologies but am starting to grab the concepts.

My issue is that server-side rendering seems to crash when I have in a file:

.appBar {
  background-color: #800080;
}
.appBar svg {
  width: 3.4rem;
  height: 3.4rem;
  margin-right: 1rem;
  fill: #fff;
}

and then in a javascript file I try to import this theme and insert it in react-toolbox component

import theme from './style.css';

const PurpleAppBar = ({ children, ...other }) => (
  <AppBar {...other} theme={theme}>
    <Logo /> App Example
    {children}
  </AppBar>
);

What is very strange is that webpack dev server manage to bundle it, because if I remove the theming the page gets displayed, and if then I put it back the styling is correctly applied. But if I try to reload the page the server crashes

(node:9710) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Invariant Violation: You are merging a string "" with an Object,Make sure you are passing the proper theme descriptors.
(node:9710) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

As you can see from the above error, it seems that the style required via webpack import function is read as a string instead of an object, which is strange because it is what css-loader is supposed to do...

I used css-modules-require-hook in app/server/start.babel.js because I thought the error came from babel not correctly loading the CSS files. What is strange is that it seems to be able to read the styles required by react-toolbox but not the style of my small file. In react-toolbox, require is used to get the CSS file while I use the import function of webpack.

Do you see anything that could explain my error? Do you know what library generated the issue?
I have been struggling so long, it would be so nice if you could help me on this...

Thank you for your time,
Lucas

PS:
I provide below some modifications that I did to the webpack.config.js file:

{
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader" // has separate config, see postcss.config.js nearby
        ]
      }

And the postcss.config.js that defines the plugins to use:

module.exports = {
  plugins: {
    'postcss-import': {
      root: __dirname,
    },
    'postcss-mixins': {},
    'postcss-each': {},
    'postcss-cssnext': {}
  },
};

In start.babel.js:

require('babel-register')({
  ignore: /\/(build|node_modules\/(?!(react-toolbox)\/).*)\//
});
require('babel-polyfill');


const hook = require('css-modules-require-hook');
const cssnext = require('postcss-cssnext');
const csseach = require('postcss-each');
const cssmixins = require('postcss-mixins');

hook({
  generateScopedName: '[name]--[local]--[hash:base64:8]',
  prepend: [
    // adding CSS Next plugin
    cssmixins(),
    csseach(),
    cssnext(),
  ],
});