Module not found: Can't resolve 'react'

[positonic]

While trying to set up a dev version of next-auth I got this error:

error - ../next-auth/dist/client/index.js
Module not found: Can't resolve 'react' in '/Users/tonic/code/topia/next-auth/dist/client'

I'm pretty sure these instructions will fix it, but it took me too long to find them, so I'm creating an issue that will show up in Github search and google for the error message.

[positonic]

@iaincollins does this line need to be updated now:

npm link ../your-application/node_modules/react

running it now gives errors, and there's now no react folder?

[iaincollins]

So this is a little confusing to set up, because of how React works.

The instructions are correct, but there isn't much detail for it.

To run a local development copy of next-auth, you need a directory that has both a copy of a Next.js project like the example project and a copy of next-auth repo (or a fork) at the same level.

$ pwd
~/Development
$ ls
next-auth
next-auth-example

You then need to install all dependancies in the Next.js project, then link it to the directory that contains next-auth:

$ pwd
~/Development
$ cd next-auth-example
$ npm i
$ npm link ../next-auth

Where it gets annoying is you need to that then go into next-auth, install modules and link it to the copy of React in the Next.js project.

$ pwd
~/Development
$ cd next-auth
$ npm i
$ npm link ../next-auth-example/node_modules/react

This is because NextAuth.js is an module that contains both server side only code but also a Universal React client library, which includes a React Hook, and anything that needs to use a Hook it needs to pull in the exact same version (not even same version number, but the same actual install) of React that the Next.js app is using. The mechanics of this are a weird bad choice by the React team who could have just nailed it to a build number, but didn't for some reason.

Note: Depending on what functionality you are working on you may also need to link other libraries from the app to next-auth for it to be able to find them:

$ pwd
~/Development
$ cd next-auth
$ npm i
$ npm link ../next-auth-example/node_modules/mongodb

Notes:

• All of this only applies when working on actual features or bug fixes to next-auth of course, and isn't something folks should be running into if they are just using it.

• As per the docs, you always need to repeat the linking steps after you install a module (or run npm i) in either repo.

[positonic]

Ok thanks Iain, had done this a few times already this week and thought something might have changed due to recent commits.

Figured out my mistake now, this error:

npm ERR! code EINVALIDTYPE
npm ERR! typeerror Error: Argument #2: Expected array but got string
npm ERR! typeerror at EventEmitter.install (/usr/local/Cellar/nvm/0.34.0/versions/node/v12.13.0/lib/node_modules/npm/lib/install.js:190:3)

Came from running:

npm link ../your-application/node_modules/react

in next-auth-example instead of next-auth folder, I'm tired, it's late, thanks for the detailed answer Iain.