Fix next edge (#41)

* fix next edge

* some notes about fixing edge

* fix next page manifest and next cache problems

* changeset

* pin enhanced-resolve

* we don't need to notes anymore

* removing comments

.changeset/honest-badgers-perform.md

@@ -0,0 +1,6 @@
+---
+"@navita/webpack-plugin": minor
+"@navita/next-plugin": minor
+---
+
+Improve support for the next.js plugin. This ensures that we don't add bytes to the page manifest when it's not needed, and differentiates navita caches between builds.

examples/with-next-app-dir/next.config.mjs

@@ -0,0 +1,13 @@
+import { createNavitaStylePlugin } from '@navita/next-plugin';
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  }
+};
+
+export default createNavitaStylePlugin()(nextConfig);

examples/with-next-app-dir/package.json

@@ -3,8 +3,8 @@
   "name": "with-next-app-dir",
   "version": "0.0.0",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
+    "dev": "rimraf .next && next dev",
+    "build": "rimraf .next && next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -15,14 +15,15 @@
     "@types/react-dom": "18.2.6",
     "eslint": "8.44.0",
     "eslint-config-next": "13.4.7",
-    "next": "13.4.19",
+    "next": "14.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.1.6",
     "@next/bundle-analyzer": "^13.4.19"
   },
   "devDependencies": {
     "@navita/next-plugin": "workspace:*",
-    "@navita/core": "workspace:*"
+    "@navita/core": "workspace:*",
+    "rimraf": "^5.0.5"
   }
 }

examples/with-next-app-dir/src/app/edge/page.module.css

@@ -0,0 +1,5 @@
+.something {
+  background: royalblue;
+  color: hotpink;
+  padding: 1rem;
+}

examples/with-next-app-dir/src/app/edge/page.tsx

@@ -1,13 +1,15 @@
-import { style } from '@navita/css';
+import { style } from "@navita/css";
 
-const x = style({
-  background: 'purple',
+const y = style({
+  background: 'dimgray',
 });
 
 export default function Edge() {
   return (
     <main>
-      <div className={x}>Edge.</div>
+      <div className={y}>
+        Edge
+      </div>
     </main>
   );
 }

examples/with-next-app-dir/src/app/layout.tsx

@@ -1,14 +1,15 @@
-import { globalStyle } from "@navita/css";
-
 export const metadata = {
   title: 'Navita Next App',
   description: 'Generated by create next app',
 };
 
+/*
 globalStyle(':root', {
   background: 'hotpink',
 });
 
+ */
+
 export default function RootLayout({
   children,
 }: {

examples/with-webpack/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "build": "NODE_ENV=production webpack",
-    "dev": "webpack serve"
+    "dev": "rimraf dist && webpack serve"
   },
   "type": "module",
   "dependencies": {
@@ -25,12 +25,13 @@
     "css-minimizer-webpack-plugin": "^4.2.2",
     "mini-css-extract-plugin": "^2.7.2",
     "typescript": "^5.1.3",
-    "webpack": "^5.88.0",
+    "webpack": "5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-node-externals": "^3.0.0",
     "webpack-dev-server": "^4.15.1",
     "html-webpack-plugin": "^5.5.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "react-refresh": "^0.14.0"
+    "react-refresh": "^0.14.0",
+    "rimraf": "^5.0.5"
   }
 }

examples/with-webpack/src/colors.js

@@ -1 +1 @@
-export const background = 'hotpink';
+export const background = 'green';

packages/core/package.json

@@ -38,7 +38,7 @@
     "@navita/adapter": "workspace:*",
     "@navita/swc": "workspace:*",
     "@navita/engine": "workspace:*",
-    "enhanced-resolve": "^5.15.0",
+    "enhanced-resolve": "5.15.0",
     "outdent": "^0.8.0",
     "magic-string": "^0.30.3"
   },

packages/next-plugin/package.json

@@ -13,12 +13,12 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.cjs",
       "require": "./dist/index.cjs",
       "types": "./src/index.ts"
     },
     "./fromServerLoader": {
-      "import": "./dist/fromServerLoader.mjs",
+      "import": "./dist/fromServerLoader.cjs",
       "require": "./dist/fromServerLoader.cjs",
       "types": "./src/fromServerLoader.ts"
     }
@@ -37,10 +37,10 @@
     "browserslist": "^4.21.5"
   },
   "devDependencies": {
-    "next": "^13.4.13",
+    "next": "14.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "webpack": "^5.88.0",
+    "webpack": "5.91.0",
     "mini-css-extract-plugin": "^2.7.6"
   },
   "peerDependencies": {

packages/next-plugin/src/fromServerLoader.ts

@@ -3,6 +3,7 @@ import type { LoaderContext } from "webpack";
 
 export function pitch(this: LoaderContext<unknown>) {
   this._module.loaders = [];
+
   const dependency = getNavitaDependency(this._compiler.webpack);
 
   const { cssHash, issuerPath } = Object.fromEntries(
@@ -13,5 +14,13 @@ export function pitch(this: LoaderContext<unknown>) {
     new dependency(issuerPath, cssHash)
   );
 
+  // We set the layer to something other than WEBPACK_LAYERS.appPagesBrowser to
+  // not have the modules included in the next pageManifest.
+  // Our modules are empty and aren't used for anything other than for collecting information.
+  // And are not even included in the final bundle.
+  // https://github.com/vercel/next.js/blob/8c6532fa7045879feb13bb21c530bb1517378e29/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts#L404
+  // https://github.com/vercel/next.js/blob/8c6532fa7045879feb13bb21c530bb1517378e29/packages/next/src/lib/constants.ts#L146
+  this._module.layer = 'not-app-pages-browser';
+
   return '';
 }

packages/next-plugin/src/index.ts

@@ -2,12 +2,13 @@ import type { Options } from "@navita/webpack-plugin";
 import { getNavitaModule, NavitaPlugin, NAVITA_MODULE_TYPE } from "@navita/webpack-plugin";
 import type MiniCssExtractPluginType from "mini-css-extract-plugin";
 import type { NextConfig } from "next";
-import NextMiniCssExtractPlugin from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';
+import NextMiniCssExtractPluginDefault from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';
+
 import { findPagesDir } from "next/dist/lib/find-pages-dir";
 import type { Configuration } from "webpack";
 import { optimizeCSSOutput } from "./optimizeCSSOutput";
 
-const MiniCssExtractPlugin = NextMiniCssExtractPlugin['default'] as typeof MiniCssExtractPluginType;
+const MiniCssExtractPlugin = NextMiniCssExtractPluginDefault['default'] as typeof MiniCssExtractPluginType;
 
 type WebpackOptions = Options;
 
@@ -22,7 +23,7 @@ export const createNavitaStylePlugin = (navitaConfig: Config = {}) =>
       nextConfig,
       {
         webpack(config: Configuration, options) {
-          const { dir, config: resolvedNextConfig, dev } = options;
+          const { dir, dev } = options;
 
           config.plugins?.push(
             {
@@ -39,6 +40,7 @@ export const createNavitaStylePlugin = (navitaConfig: Config = {}) =>
                       issuerPath,
                     }).toString(),
                   },
+
                   // We set the resource to ".css"
                   // to trick next.js into thinking this is a css module:
                   // https://github.com/vercel/next.js/blob/f3132354285fb18c290bf9aad7f8dc7e0550105d/packages/next/src/build/webpack/loaders/utils.ts#L24
@@ -57,7 +59,7 @@ export const createNavitaStylePlugin = (navitaConfig: Config = {}) =>
             loader: require.resolve("@navita/next-plugin/fromServerLoader"),
           });
 
-          const findPagesDirResult = findPagesDir(dir, !!resolvedNextConfig.experimental.appDir);
+          const findPagesDirResult = findPagesDir(dir);
           const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
           const isServer = options.isServer && !(options.nextRuntime === 'edge')
           const outputCss = !isServer || hasAppDir;

packages/webpack-plugin/package.json

@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@types/webpack-sources": "^3.2.0",
-    "webpack": "5.88.0",
+    "webpack": "5.91.0",
     "enhanced-resolve": "^5.12.0",
     "memfs": "^3.4.13",
     "unionfs": "^4.4.0",

packages/webpack-plugin/src/getNavitaDependency.ts

@@ -24,7 +24,7 @@ function createNavitaDependency(webpack: Compiler['webpack']) {
     }
 
     get request() {
-      return this.issuerPath;
+      return '.css';
     }
 
     getResourceIdentifier() {

packages/webpack-plugin/src/index.ts

@@ -72,6 +72,8 @@ export class NavitaPlugin {
 
     const dev = compiler.options.mode !== "production";
 
+    const cacheName = `${NavitaPlugin.pluginName}-${compiler.options.mode}`;
+
     const defaultEngineOptions = {
       enableSourceMaps: dev,
       enableDebugIdentifiers: dev,
@@ -115,7 +117,7 @@ export class NavitaPlugin {
       });
 
       const result = await compilation
-        .getCache(NavitaPlugin.pluginName)
+        .getCache(cacheName)
         .getPromise<Buffer>(NavitaPlugin.pluginName, cacheKey);
 
       if (result) {
@@ -124,7 +126,7 @@ export class NavitaPlugin {
 
       compiler.hooks.afterEmit.tapPromise(NavitaPlugin.pluginName, async (compilation) => {
         await compilation
-          .getCache(NavitaPlugin.pluginName)
+          .getCache(cacheName)
           .storePromise(NavitaPlugin.pluginName, cacheKey, Buffer.from(renderer.engine.serialize()));
       });
     });