Using react-modal in custom _app.js in prod build results in server crash

[shankie-codes]

Bug report

Describe the bug

I'm pretty new to Next; however, I'm an experienced React dev and have come across quite a strange issue.

I'm using a custom _app.js because I want to have a <AuthContextProvider /> available to all my components. This both provides a user to every component that uses that context, but also a doLogin method that opens a react-modal to handle a user login with my auth provider.

import { AuthContextProvider } from "../components/context/AuthContext";

const App = ({ Component, pageProps }) => {
  return (
    <AuthContextProvider>
      <Component {...pageProps} />
    </AuthContextProvider>
  );
};

Nothing too controversial.

The provider looks something like this (redacted a bit for brevity):

import Modal from "react-modal";
export const AuthContextProvider = ({ children }) => {
 ...
  return (
    <AuthContext.Provider
      value={{
        user,
        doLogin,
      }}
    >
      <Modal
        isOpen={loginModalIsOpen && !isFullUser}
        onRequestClose={() => setLoginModalIsOpen(false)}
        contentLabel="Log in"
      >
        <h1>Log in</h1>
        <Login />
      </Modal>
      {user ? children : <Loading />}
    </AuthContext.Provider>
  );
};

This all works fine in local dev (Mac), but on the server (Firebase cloud function – presumably in production mode), any time I import react-modal in a file included in the custom _app.js, I get Error: Cannot find module 'react-modal'".

This doesn't happen if I include react-modal in one of my Next page components – only if I include it in _app.js, so I'm assuming that it's not an environment-related problem.

Thanks!

System information

• OS: Mac locally, Firebase Node 10 cloud function on server
• Version of Next.js: 9.4.0
• Version of Node.js: 10

[shankie-codes]

FWIW, in order to carry on dev, I've moved these Context providers into a <Layout> component that's included on every page; however, that's obviously not ideal as it reloads the Context with every page transition. And like this, it works with no errors.

This has left me wondering: what's special about _app.js that's causing this to fail?

[jamesmosier]

Do you have an example repo that reproduces this by any chance? I just tried the same setup and ran next build && next start and didn't see any errors 🤔

[shankie-codes]

Thanks for your reply @jamesmosier – I don't have anything to hand, but I'll whip something up now.

[shankie-codes]

Damn and blast... @jamesmosier I've also done next build && next start locally and it works fine, which must mean that there must be something weird going on with the "Next on Firebase" starter that I used here

I guess I originally thought that it might have been a Next issue as react-modal works elsewhere in the app (and elsewhere in statically generated pages in the same app – just not those in _app.js).

I'll open an issue on that repo. Thanks for your support! 👍

[jamesmosier]

It might also be worth looking at the examples directory. There are multiple firebase examples there 🚀

[shankie-codes]

Thanks @jamesmosier I'll have a look. The one that @jthegedus has is a bit further developed, but seems to have this issue. I'll post on that repo! Thanks for your help