`navi-scripts build` fails with react hooks

When running navi-scripts build using hooks it fails with the following error:

Overview

[ohshit] An error occured while building your app
Minified React error #298; visit https://reactjs.org/docs/error-decoder.html?invariant=298 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Invariant Violation: Minified React error #298; visit https://reactjs.org/docs/error-decoder.html?invariant=298 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

The unminified error message states:

Hooks can only be called inside the body of a function component.

I know hooks are still in alpha but it might be worth investigating this issue before they release.

Steps to reproduce

1. Clone the navi repo
2. cd into navi/examples/create-react-blog
3. Update react and react-scripts 16.7.0-alpha.2
4. Replace the App component in App.js to use a hook (see below)
5. Run yarn build for the example

Hook usage in App.js

export function App(props) {
  const [state] = useState(true)
  return (
    <Nav.Provider navigation={props.navigation}>
      <Nav.Loading>
        {isLoading => (
          <>
            <AppBusyIndicator show={isLoading} />
            <nav>
              <Nav.Link href="/">Home</Nav.Link>
              {state ? 'state is true' : 'state is false'}
            </nav>
            <main>
              <Nav.NotFoundBoundary render={renderNotFound}>
                <Nav.Route />
              </Nav.NotFoundBoundary>
            </main>
          </>
        )}
      </Nav.Loading>
    </Nav.Provider>
  )
}

[jamesknelson]

I’ve just pushed an update which should fix this, and it will be available in Navi 0.11.

The idea is that Navi.app() (now called register()) looks for the “react” and “react-navi” modules, and if it exists, it exports them so that the build script can use them. If they don’t exist, nothing changes, preserving the decoupled design.

Then, navi-scripts hooks into require() and makes it return the instance of “react” and “react-navi” exported by the app bundle. You can override this behavior or add extra shared modules by passing a sharedModules object to register().

Will be publishing the docs and releasing this when React 16.8 is published.

[joeporpeglia]

Most of the solutions I can think of add a lot of coupling between navi and the CRA build process and I really like the layered separation between them right now. Maybe hooks users can pass an async function to app that dynamically imports ReactDOMServer and returns it? That would at least split it out of the production bundle, but the module mapping would still be included in the production webpack manifest/runtime. I’ll keep thinking on it…