loadable-components: module XXX is not found, client and server modules are not sync. You are probably not using the same resolver on server and client.

[mbrochh]

EDIT: for possibly related issue in loadable-components repo see below

Hi all,

I recently updated my project to use loadable-components instead of react-loadable and I think I did all the changes as suggested by the with-loadable-components example in this repo..

It seemed to work fine at first, but I realised, whenever I change my files, the HMR works on the client-side, but when I refresh by browser, then it turns out that the server-rendered page is not in sync with that the client would generate.

This stuff is way over my head, so I'm not quite sure how to debug this.

First of all, I will double-check, that my repo has the same setup in server.js and client.js (and other files that might potentially be involved, like .babelrc etc) as the example.

Generally, I always wonder if these example repos are kept up to date as Razzle evolves? My hope is, that someone sees this issue here and also uses loadable-components with Razzle and knows an obvious fix that might not yet be in the example folder ;)

Here is my package.json:

  "dependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "apollo-cache": "^1.0.1",
    "apollo-cache-inmemory": "^1.1.1",
    "apollo-client": "2.0.3",
    "apollo-client-preset": "^1.0.3",
    "apollo-fetch": "^0.7.0",
    "apollo-link": "^1.0.0",
    "apollo-link-batch": "^1.1.3",
    "apollo-link-batch-http": "1.0.4",
    "apollo-link-dedup": "^1.0.2",
    "apollo-link-error": "^1.0.1",
    "apollo-link-http": "^1.1.0",
    "apollo-utilities": "^1.0.2",
    "clipboard-copy": "^2.0.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "evaporate": "^2.1.4",
    "express": "^4.16.2",
    "form-serialize": "^0.7.2",
    "glamor": "^2.20.40",
    "glamorous": "^4.11.0",
    "globals": "^11.1.0",
    "graphql": "^0.13.2",
    "graphql-anywhere": "^4.1.19",
    "graphql-tag": "^2.5.0",
    "js-cookie": "^2.2.0",
    "loadable-components": "^2.2.3",
    "lodash": "^4.17.10",
    "node-fetch": "^2.2.0",
    "path-to-regexp": "^2.2.1",
    "po2json": "^0.4.5",
    "raf": "^3.4.0",
    "raven": "^2.2.1",
    "raven-js": "^3.20.1",
    "razzle": "^2.4.0",
    "react": "^16.1.1",
    "react-apollo": "^2.0.1",
    "react-cookie": "^3.0.0",
    "react-dom": "^16.1.1",
    "react-dropzone": "^5.0.0",
    "react-facebook-login": "^4.0.1",
    "react-facebook-pixel": "^0.1.0",
    "react-ga": "^2.3.5",
    "react-helmet": "^5.2.0",
    "react-infinite-scroll-component": "^4.1.0",
    "react-instagram-embed": "^1.3.4",
    "react-intl-universal": "^1.14.3",
    "react-markdown": "^3.3.0",
    "react-on-visible": "^1.3.0",
    "react-photoswipe": "^1.3.0",
    "react-player": "^1.6.4",
    "react-popper": "^1.0.0-beta.6",
    "react-redux": "^5.0.6",
    "react-remarkable": "^1.1.3",
    "react-router-dom": "^4.2.2",
    "react-scroll": "^1.7.3",
    "react-share": "^2.2.0",
    "react-stripe-checkout": "^2.6.3",
    "react-truncate": "^2.3.0",
    "redux": "^4.0.0",
    "set-cookie-parser": "^2.0.0",
    "spark-md5": "^3.0.0",
    "store": "^2.0.12",
    "turndown": "^5.0.0",
    "universal-cookie": "^3.0.0",
    "universal-cookie-express": "^3.0.0",
    "uuid": "^3.1.0",
    "why-did-you-update": "^0.1.0",
    "window-or-global": "^1.0.1"
  },
  "devDependencies": {
    "@babel/preset-flow": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "cypress": "^3.0.2",
    "docz": "^0.11.2",
    "jest": "^23.6.0",
    "react-native-web": "^0.8.10"
  }

Here is how I use loadable-components in server.js:

  .get('/*', async (req, res) => {
    const app = (
      <StaticRouter context={context} location={req.url}>
        <ApolloProvider client={client}>
          <App />
        </ApolloProvider>
      </StaticRouter>
    )
    const loadableState = await getLoadableState(app)
    getDataFromTree(app).then(() => {
      const glamorResult = renderStatic(() => renderToString(app))
      res.status(200).send(`<!DOCTYPE html>
        ...
        ${loadableState.getScriptTag()}
      `)
    }
}

And here is client.js:

const app = (
  <ApolloProvider client={client}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ApolloProvider>
)

// Load all components needed before rendering
loadComponents().then(() => {
  hydrate(app, document.getElementById('root'))
})

if (module.hot) {
  module.hot.accept()
}

And of course .babelrc:

{
  "presets": ["razzle/babel"],
  "plugins": ["loadable-components/babel"]
}

Here is how I load and use components:

const HomeView = loadable(() =>
  import(/* webpackChunkName: "home-view" */ './frontend-artling/pages/HomeView')
)

class App extends Component {
  componentDidMount() {
    window.lazySizes.init()
  }

  render() {
    return (
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <div>
            <Route path="/" component={NavigationMain} />
            <div className="container">
              <Switch>
                <Route exact path="/" component={HomeView} />
              </Switch>
            </div>
          </div>
        </ThemeProvider>
      </Provider>
    )
  }
}

---

EDIT: I was pointed to this workaround in the loadable-components repo but that doesn't really solve the issue - it just happens less frequently

[fivethreeo]

Use @loadable/component until lazy and Suspense work serverside. Close this.

[mbrochh]

Old issue. I can't remember if I changed anything or if loadable-components or Razzle came out with a newer version. But everything is working smoothly for me now with loadable-components.

Closing.