VDOM mismatch

[natewallis]

Thanks for the package... it is working and I get server rendered content, but I am having trouble with white space. I am rendering a vue.js application server side. The server side render works well and prior to hydration, my content is looking good... but.... I hit random issues

The following forces a full client re-render of the site when trying to mount client side...

          <div class="mini-promo-text">
            <span class="title">COMMERCIAL</span>
            <hr class="my-0">
            <span class="subject">Built tough</span>
          </div>

But if I remove the <hr> tag, then the $mount completes with no problem...

          <div class="mini-promo-text">
            <span class="title">COMMERCIAL</span>
            <span class="subject">Built tough</span>
          </div>

See screenshot above from browser console where it indentifies mismatch.

I think my workflow is ok, because I have this working on other pages on my site with no problem and I get full hydration client side....

My webpack config is the following:

const bfa_server = {
    target: 'node',
    entry: './src/js/bfa-server.js',
    output: {
        filename: './js/bfa-server.min.js',
        libraryTarget: 'commonjs2',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'design/themes/bfa/dist/',
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        }, {
            test: /\.(gif|png|jpg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }]
        }, {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/'
                }
            }]
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: ['css-loader']
            })
        }, {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'postcss-loader', 'sass-loader']
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin('./css/bfa.min.css'),
        new VueLoaderPlugin({
            compilerOptions: {
                whitespace: 'condense'
            },
            optimizeSSR: true
        })
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // Use the full build
        }
    }
};

const bfa_client = {
    entry: './src/js/bfa-client.js',
    output: {
        filename: './js/bfa-client.min.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'design/themes/bfa/dist/',
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        }, {
            test: /\.(gif|png|jpg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }]
        }, {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/'
                }
            }]
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: ['css-loader']
            })
        }, {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'postcss-loader', 'sass-loader']
            })
        }]
    },
    plugins: [
        new ExtractTextPlugin('./css/bfa.min.css'),
        new VueLoaderPlugin({
            compilerOptions: {
                whitespace: 'condense'
            },
            optimizeSSR: false
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],
    resolve: {
        alias: {
            jquery: "jquery/src/jquery",
            'vue$': 'vue/dist/vue.esm.js' // Use the full build
        }
    }
};

module.exports = [bfa_client, bfa_server];

[natewallis]

Sorry, posted and just realised I was on the wrong repo...