Warning: Did not expect server HTML to contain a <div> in <div>.

[mahadoang]

Browser show "Warning: Did not expect server HTML to contain a <div> in <div>." how to fixed.

My Package

"react": "^16.5.2", "react-dom": "^16.5.2", "react-helmet": "^5.2.0", "react-helmet-async": "^0.2.0-beta.1", "react-js-pagination": "^3.0.2", "react-loadable": "git+https://github.com/CaptainN/react-loadable.git", "react-moment": "^0.7.9", "react-router-dom": "^4.3.1",

Thank you.

[CaptainN]

That usually happens (for me anyway) when the client side is not properly waiting for the loadables to load before hydration. Can you share your SSR code - server and client?

[mahadoang]

Server

import { WebApp } from 'meteor/webapp'
import React from 'react'
import { StaticRouter } from 'react-router'
import { renderToString } from 'react-dom/server'
import { onPageLoad } from 'meteor/server-render'
import Loadable from 'react-loadable'
import { HelmetProvider } from 'react-helmet-async'
import App from '/imports/App'

Loadable.preloadAll().then(() => onPageLoad(sink => {
  const context = {}
  const modules = []
  const modulesResolved = []
  const helmetContext = {}
  const app = <HelmetProvider context={helmetContext}>
    <Loadable.Capture report={(moduleName) => { modules.push(moduleName) }}
      reportResolved={(resolvedModuleName) => { modulesResolved.push(resolvedModuleName) }}>
      <StaticRouter location={sink.request.url} context={context}>
        <App />
      </StaticRouter>
    </Loadable.Capture>
  </HelmetProvider>
  sink.renderIntoElementById('root', renderToString(app))
  sink.appendToBody(`<script> var __preloadables__ = ${JSON.stringify(modulesResolved)}; </script>`)

  const { helmet } = helmetContext
  sink.appendToHead(helmet.meta.toString())
  sink.appendToHead(helmet.title.toString())
  sink.appendToHead(helmet.link.toString())

  WebApp.addHtmlAttributeHook(() => (
    Object.assign({
      lang: 'en'
    }, helmet.htmlAttributes.toComponent())
  ))
}));

Client

import { onPageLoad } from 'meteor/server-render'
import React from 'react'
import Loadable from 'react-loadable'
import { HelmetProvider } from 'react-helmet-async'
import { hydrate } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
onPageLoad(async sink => {
  let App = (await import('/imports/App')).default
  if (window.__preloadables__) {
    await Loadable.preloadablesReady(window.__preloadables__)
  }
  const helmetContext = {}
  hydrate(
     <HelmetProvider context={helmetContext}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </HelmetProvider>,
    document.getElementById('root')
  )
});

Thank you.

[CaptainN]

I just did a fresh clone of the repo, and it works fine, afaict. What else have you changed/added? If you are using pub/sub or apollo, you'll also need to work in a solution for the data portion of the app (my starter doesn't have that ATM).

[mahadoang]

METEOR@1.7.0.5 all package

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor@1.9.0                  # Shared foundation for all Meteor packages
static-html             # Define static page content in .html files
standard-minifier-css@1.4.1   # CSS minifier run for production mode
standard-minifier-js@2.3.4    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.11.1              # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.1            # Server-side component of the `meteor shell` command
webapp@1.6.0                  # Serves a Meteor app over HTTP
server-render@0.3.1           # Support for server-side rendering

dynamic-import
react-meteor-data

{
  "name": "test-ssr",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "7.0.0-beta.55",
    "bcrypt": "^3.0.0",
    "meteor-node-stubs": "^0.4.1",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "prop-types": "^15.6.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-helmet": "^5.2.0",
    "react-helmet-async": "^0.2.0-beta.1",
    "react-js-pagination": "^3.0.2",
    "react-loadable": "git+https://github.com/CaptainN/react-loadable.git",
    "react-moment": "^0.7.9",
    "react-router-dom": "^4.3.1",
    "simpl-schema": "^1.5.3"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    }
  }
}

My repo : https://github.com/mahadoang/MeteorSSR Help me please. Thank you.

[mahadoang]

I clone of the repo,and it works fine. please close this issuse. Thank you.