Different Markup in Client and Server

[reactgo]

Different Markup in Client and Server

[kkotwal94]

I don't use the hotloader, but yea using just webpack watch just throws that error as well unless I restart the server. As of the serverside rendering @choonkending said he was working on implementing ReactRouter 1.0 beta.

#50

and shouldn't it be like this
.replace("LINK", Header.link);

[choonkending]

@kkotwal94 Thanks for replying! (Still progressing on react-router beta, but it's looking good since this morning on the tram lol).

and shouldn't it be like this
.replace("LINK", Header.link);

This is intended, because we don't actually need it in hotloader. In the hotloader mode, we css gets required by webpack as a module, and we do not use ExtractTextPlugin to extract the css like in production.

@gsccheng Sorry for the late response. Have been working on #50.

1. Does the lack of styling when I am using the Hot Loader have to do with this line in routes.js where it seems like styling is removed? What can I do to fix this?

I do not think it has to do with routes.js, but I haven't used Material-UI extensively, so I actually do not know how the styles are required.

If you replace that line with .replace("LINK", Header.link); as @kkotwal94 said, does it work?

I'd go about trying to solve it this way:

1. Test with replacing with .replace("LINK", Header.link);. If not go to step 2.
2. Run npm run watch and npm run dev (production mode but working locally) and test if the styles are actually included for material ui.
3. Otherwise, you might have to dive into looking how material ui's styles are included. Are they extracted into a different file? Or can they be required into the file?

Hopefully it will also fix the different markup issue.

What can I do to remove this warning and have consistent markup in the front and back ends? Is this more of a Material-UI or Iso package issue, or just a way React components are rendered? Would I manually alter the CSS?

Ideally, you shouldn't need to be running npm run watchHotLoader, because the idea of the hotloader is you don't need to refresh at all! If you want to test whether it works in production I suggest running step 2.

I don't have much context with Material-ui, but if the above doesn't work out, I'll have a look when I have the chance!

[gsccheng]

@kkotwal94 , @choonkending thanks to both of you. So within that block:

    if(process.env.NODE_ENV === 'devhotloader') {
      html = html.replace("LINK", '');
    } else {
      html = html.replace("LINK", Header.link);
    }

I replaced the second line with

.replace("LINK", Header.link);

I still get the same error, which seems to make sense since I'm not even using the hotloader. Is that the line you wanted me to replace?

For suggestions 2 and 3, what do you mean by test if the styles are included? The component (such as the avatar) is displayed as intended on my browser with the style I want. I do see the style specifications of that component in the Material-UI library in the node_modules folder. At least from that file, the whole Avatar component is then module.exports 'd out so I'm assuming some other file should require/import it. I'm importing the entire Material-UI library into my Navigation.jsx.

Thanks for pointing that out about not running npm run watchHotLoader. I thought I would need it to rebuild app.js in the public folder (whereas the devHotLoader would build app.server.js), but from the CLI it looks like the npm run devHotLoader would build it. Right now with npm run devHotLoader running, not only does my page not refresh by itself, my changes are not reflected even when I change my view component. I also don't see the hotLoader messages in the Chrome console. So, looks like whatever problem this is really breaks the functionality. I will need to look more into this later, but I really appreciate your help!

[kkotwal94]

That's strange, it doesn't even refresh? I haven't tried material-ui with this project at all. I actually just got into it because of this post. I don't know if it will help but i started building a personal web page project where I use react hot-loader with material ui and it works fine. Maybe something from this config file can spring a thought, I might just be off the ball completely too haha. Where material-ui exists in node_modules, and I call it as from the docs as let mui = require('material-ui'); Repository: https://github.com/kkotwal94/AboutMe

Webpack.config:

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
var merge = require('webpack-merge');

var TARGET = process.env.TARGET;
var ROOT_PATH = path.resolve(__dirname);

var common = {
    entry: [path.resolve(ROOT_PATH, 'app/main')],
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        path: path.resolve(ROOT_PATH, 'build'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'About Karan Kotwal'
        })
    ]
};

if (TARGET === 'build') {
    module.exports = merge(common, {
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract('style', 'css')
                },
                {
                    test: /\.jsx?$/,
                    loader: 'babel?stage=1',
                    include: path.resolve(ROOT_PATH, 'app')
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('styles.css'),
            new webpack.DefinePlugin({
                'process.env': {
                    // This has effect on the react lib size
                    'NODE_ENV': JSON.stringify('production')
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            })
        ]
    });
}

if (TARGET === 'dev') {
    module.exports = merge(common, {
        module: {
            loaders: [
                {
                    test: /\.css$/,
                    loaders: ['style', 'css']
                },
                {
                    test: /\.jsx?$/,
                    loaders: ['react-hot', 'babel', 'flowcheck', 'babel?stage=0&blacklist=flow'],
                    include: path.resolve(ROOT_PATH, 'app')
                }
            ]
        }
    });
}

[gsccheng]

@kkotwal94 Thanks for your reply! Your response led me to just pull a fresh copy of this boilerplate and add a simple Avatar component, and wah lah, it works smoothly. So, my issue must be coming somewhere from my AJAX call after the Navigation component is mounted, the state changes, and the component is re-rendered. So, from here I can think of a few things to look into:

1. As @kkotwal94 mentioned, look into the webpack.config. Maybe there's some difference as to how the app.js and app.server.js files are generated that will make components render in a different style.
2. See how React determines when to give the markup warning. Maybe it is normal for my situation and it really isn't a performance issue.
3. Look deeper into where the client styling is coming from. For example, where does the container argument come from in the client side here as identified in my first post:

    render = Iso.bootstrap((state, _, container) => {...

4. See if going through the above 3 steps would resolve the broken react hot-loader issue. If not, see exactly how the hot-loader works to circumvent the problem.

[choonkending]

Closing this as latest branch shouldn't have this problem. Feel free to create a new issue if you have any problems!