When server-side rendering, it doesn't load anything

[Sawtaytoes]

Doing something like this for react-router:

import loadFAQ from 'bundle-loader?lazy!components/pages/faq'

const FAQ = () => (
  <Bundle load={loadFAQ}>
    {(FAQ) => FAQ ? <FAQ /> : null}
  </Bundle>
)

const Pages = () => (
  <SiteLayout>
    <Switch>
      <Route path="/faq" component={FAQ} />
    </Switch>
  </SiteLayout>
)

export default Pages

For some reason, it's not loading from the server. Removing ?lazy doesn't make it work either. I understand this is loading async, but is there some way to know if the environment is Node and set it to sync vs async when client-side rendered? Is there something I can pass in the Webpack config depending on if it's the server or client build?

[michael-ciniawsky]

is there some way to know if the environment is Node and set it to sync vs async when client-side rendered?

webpack.config.js

export default {
   target: 'node'  // default 'web'
}

@Sawtaytoes But for async to sync I don't think { target: 'node' } will do that for you 😛

Why don't you using import()/require.ensure() webpack will create a split (async chunk) point for you? Is using bundle loader on purpose?

[Sawtaytoes]

Yeah. I was thinking of a better method as my require.ensure() method wasn't ideal. https://medium.com/@Sawtaytoes/async-react-router-v4-components-c18792e6f331

I'll take a fresh look 'n see if that method works for me instead in the same way I'm wrapping this using a <Bundle /> component.