refactor(dev): use Next.js externalDir to fix dev app

.gitignore

@@ -36,8 +36,7 @@ node_modules
 /index.js
 
 # Development app
-app/next-auth
-app/dist/css
+app/src/css
 app/package-lock.json
 app/yarn.lock
 app/prisma/migrations

CONTRIBUTING.md

@@ -25,7 +25,7 @@ Anyone can be a contributor. Either you found a typo, or you have an awesome fea
 
 A quick guide on how to setup _next-auth_ locally to work on it and test out any changes:
 
-The dev application requires you to use `npm@7`.
+The developer application requires you to use `npm@7`.
 
 1. Clone the repo:
 
@@ -34,7 +34,7 @@ git clone git@github.com:nextauthjs/next-auth.git
 cd next-auth
 ```
 
-2. Install packages, set up the dev application:
+2. Install packages and set up the developer application:
 
 ```sh
 npm run dev:setup
@@ -47,23 +47,23 @@ npm run dev:setup
 > NOTE: You can add any environment variables to .env.local that you would like to use in your dev app.
 > You can find the next-auth config under`app/pages/api/auth/[...nextauth].js`.
 
-1. Start the dev application/server:
+1. Start the developer application/server:
 
 ```sh
 npm run dev
 ```
 
-Your dev application will be available on `http://localhost:3000`
+Your developer application will be available on `http://localhost:3000`
 
 That's it! 🎉
 
 If you need an example project to link to, you can use [next-auth-example](https://github.com/iaincollins/next-auth-example).
 
 #### Hot reloading
 
-When running `npm run dev`, you start a Next.js dev server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately.
+When running `npm run dev`, you start a Next.js developer server on `http://localhost:3000`, which includes hot reloading out of the box. Make changes on any of the files in `src` and see the changes immediately.
 
-> NOTE: When working on CSS, you will have to manually refresh the page after changes. The reason for this is our pages using CSS are server-side rendered. (Improving this through a PR is very welcome!)
+> NOTE: When working on CSS, you will have to manually refresh the page after changes. The reason for this is our pages using CSS are server-side rendered (using API routes). (Improving this through a PR is very welcome!)
 
 > NOTE: The setup is as follows: The development application lives inside the `app` folder, and whenever you make a change to the `src` folder in the root (where next-auth is), it gets copied into `app` every time (gitignored), so Next.js can pick them up and apply hot reloading. This is to avoid some annoying issues with how symlinks are working with different React builds, and also to provide a super-fast feedback loop while developing core features.
 

app/.nvmrc

@@ -0,0 +1 @@
+16

app/next.config.js

@@ -6,14 +6,19 @@ module.exports = {
       ...config.resolve,
       alias: {
         ...config.resolve.alias,
-        "next-auth$": path.join(process.cwd(), "next-auth/server"),
-        "next-auth/react$": path.join(process.cwd(), "next-auth/client/react"),
-        "next-auth/jwt$": path.join(process.cwd(), "next-auth/lib/jwt"),
-        "next-auth/adapters": path.join(process.cwd(), "next-auth/adapters"),
-        "next-auth/providers": path.join(process.cwd(), "next-auth/providers"),
+        react: path.join(process.cwd(), "node_modules/react"),
+        nodemailer: path.join(process.cwd(), "node_modules/nodemailer"),
+        "react-dom": path.join(process.cwd(), "node_modules/react-dom"),
+        "react/jsx-dev-runtime": path.join(
+          process.cwd(),
+          "node_modules/react/jsx-dev-runtime"
+        ),
       },
     }
 
     return config
   },
+  experimental: {
+    externalDir: true,
+  },
 }

app/package.json

@@ -4,12 +4,11 @@
   "description": "NextAuth.js Developer app",
   "private": true,
   "scripts": {
-    "dev": "npm-run-all --parallel copy:app dev:css dev:next",
+    "clean": "rm -rf .next",
+    "dev": "npm-run-all --parallel dev:next watch:css copy:css ",
     "dev:next": "next dev",
-    "copy:app": "cpx \"../src/**/*\" next-auth --watch",
-    "copy:css": "cpx \"../dist/css/**/*\" dist/css --watch",
+    "copy:css": "cpx \"../css/**/*\" src/css --watch",
     "watch:css": "cd .. && npm run watch:css",
-    "dev:css": "npm-run-all --parallel watch:css copy:css",
     "start": "next start",
     "start:email": "npx fake-smtp-server"
   },

app/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": [
       "dom",
       "dom.iterable",
@@ -17,7 +17,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "next-auth": [ "../src" ],
+      "next-auth/*": [ "../src/*" ]
+    }
   },
   "include": [
     "next-env.d.ts",

package.json

@@ -41,8 +41,6 @@
     "build:css": "postcss --config config/postcss.config.js src/**/*.css --base src --dir . && node config/wrap-css.js",
     "dev:setup": "npm i && npm run build:css && cd app && npm i",
     "dev": "cd app && npm run dev",
-    "watch": "npm run watch:js | npm run watch:css",
-    "watch:js": "tsc --watch",
     "watch:css": "postcss --config config/postcss.config.js --watch src/**/*.css --base src --dir .",
     "test": "jest --config ./config/jest.config.js",
     "test:ci": "npm run lint && npm run test -- --ci",