Using navi-scripts without create-react-app

[pcvonz]

I'm trying to use the navi-scripts package with a custom webpack configuration. I can get it (sort of) working if I don't use the optimization setting of webpack. With it, I get the error:

[ohshit] An error occured while building your app
Could not find the "window.NaviScripts" value in your entry point "/home/paul/Documents/work/commissions/dist/appMain.c78e4505ac3b87b135ef.js".
Error: Could not find the "window.NaviScripts" value in your entry point "/home/paul/Documents/work/commissions/dist/appMain.c78e4505ac3b87b135ef.js".
    at createScriptRunner (/home/paul/Documents/work/commissions/node_modules/navi-scripts/lib/createScriptRunner.js:120:15)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

When I remove the optimzation plugin theu build fails at ReactDOMServer.renderToString().

e.routes is not a function
TypeError: e.routes is not a function
    at new e (appMain.ee236711b0197f88062f.js:43:38795)
    at new e (appMain.ee236711b0197f88062f.js:43:45669)
    at ct (appMain.ee236711b0197f88062f.js:43:57871)
    at new t (appMain.ee236711b0197f88062f.js:36:44692)
    at processChild (/home/paul/Documents/work/commissions/node_modules/react-dom/cjs/react-dom-server.node.development.js:2846:14)
    at resolve (/home/paul/Documents/work/commissions/node_modules/react-dom/cjs/react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (/home/paul/Documents/work/commissions/node_modules/react-dom/cjs/react-dom-server.node.development.js:3202:22)
    at ReactDOMServerRenderer.read (/home/paul/Documents/work/commissions/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at Object.renderToString (/home/paul/Documents/work/commissions/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)
    at renderToString (/home/paul/Documents/work/commissions/src/renderPageToString.js:21:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

And here is renderPageToString.js:

const Navi = require('navi')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const { Router, View } = require('react-navi');

async function renderPageToString({ config, exports={}, routes, siteMap, dependencies, url }) {
    // // Create an in-memory Navigation object with the given URL
    let navigation = Navi.createMemoryNavigation({
        routes,
        url,
    })

      // Render the content
  let bodyHTML =
    ReactDOMServer.renderToString(
      React.createElement(
        Router,
        { navigation },
        React.createElement(exports.App || View)
      )
    )


    return bodyHTML;
}

module.exports = renderPageToString

[jamesknelson]

Sorry about the long delay on answering this issue.

I'm currently thinking of moving away from navi-scripts long term. It's really a massive hack, and my recent work on https://github.com/jamesknelson/create-react-app/tree/universal-react-scripts has made me think that perhaps everything could be made a lot cleaner if we could get rid of the jsdom stuff in navi-scripts and just get CRA to output a commonjs bundle.

Given that you do have a custom webpack config, it may be easier to output a commonjs bundle with the Navi routes, and use Navi.crawl({ routes, context }) to manually walk through and render them.