Merge branch 'canary' into mk/proxy-host

vercel · Nov 12, 2021 · 0ab1d04 · 0ab1d04
2 parents 7878e95 + d1adf1d
commit 0ab1d04
Show file tree

Hide file tree

Showing 33 changed files with 378 additions and 31 deletions.
diff --git a/errors/manifest.json b/errors/manifest.json
@@ -339,6 +339,10 @@
           "title": "no-router-instance",
           "path": "/errors/no-router-instance.md"
         },
+        {
+          "title": "no-server-import-in-page",
+          "path": "/errors/no-server-import-in-page.md"
+        },
         {
           "title": "no-sync-scripts",
           "path": "/errors/no-sync-scripts.md"

diff --git a/errors/no-server-import-in-page.md b/errors/no-server-import-in-page.md
@@ -0,0 +1,23 @@
+# No Server Import In Page
+
+### Why This Error Occurred
+
+`next/server` was imported in a page outside of `pages/_middleware.js` (or `pages/_middleware.tsx` if you are using TypeScript)
+
+### Possible Ways to Fix It
+
+Only import and use `next/server` within `pages/_middleware.js` (or `pages/_middleware.tsx`) to add middlewares.
+
+```jsx
+// pages/_middleware.ts
+
+import type { NextFetchEvent, NextRequest } from 'next/server'
+
+export function middleware(req: NextRequest, ev: NextFetchEvent) {
+  return new Response('Hello, world!')
+}
+```
+
+### Useful Links
+
+- [Middleware](https://nextjs.org/docs/middleware)
diff --git a/lerna.json b/lerna.json
@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.0.4-canary.9"
+  "version": "12.0.4-canary.10"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.0.4-canary.9",
+    "@next/eslint-plugin-next": "12.0.4-canary.10",
     "@rushstack/eslint-patch": "^1.0.6",
     "@typescript-eslint/parser": "^4.20.0",
     "eslint-import-resolver-node": "^0.3.4",

diff --git a/packages/eslint-plugin-next/lib/rules/no-server-import-in-page.js b/packages/eslint-plugin-next/lib/rules/no-server-import-in-page.js
@@ -0,0 +1,37 @@
+const path = require('path')
+
+module.exports = {
+  meta: {
+    docs: {
+      description:
+        'Disallow importing next/server outside of pages/_middleware.js',
+      recommended: true,
+      url: 'https://nextjs.org/docs/messages/no-server-import-in-page',
+    },
+  },
+  create: function (context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== 'next/server') {
+          return
+        }
+
+        const paths = context.getFilename().split('pages')
+        const page = paths[paths.length - 1]
+
+        if (
+          !page ||
+          page.startsWith(`${path.sep}_middleware`) ||
+          page.startsWith(`${path.posix.sep}_middleware`)
+        ) {
+          return
+        }
+
+        context.report({
+          node,
+          message: `next/server should not be imported outside of pages/_middleware.js. See https://nextjs.org/docs/messages/no-server-import-in-page.`,
+        })
+      },
+    }
+  },
+}
diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

diff --git a/packages/next-env/package.json b/packages/next-env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "keywords": [
     "react",
     "next",

diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "main": "index.js",
   "license": "MIT",
   "repository": {

diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
@@ -9,6 +9,7 @@ function getBaseSWCOptions({
   styledComponents,
   paths,
   baseUrl,
+  importSource,
 }) {
   const isTSFile = filename.endsWith('.ts')
   const isTypeScript = isTSFile || filename.endsWith('.tsx')
@@ -30,6 +31,7 @@ function getBaseSWCOptions({
 
       transform: {
         react: {
+          importSource: importSource || 'react',
           runtime: 'automatic',
           pragma: 'React.createElement',
           pragmaFrag: 'React.Fragment',
@@ -44,6 +46,10 @@ function getBaseSWCOptions({
             typeofs: {
               window: globalWindow ? 'object' : 'undefined',
             },
+            envs: {
+              NODE_ENV: development ? '"development"' : '"production"',
+            },
+            // TODO: handle process.browser to match babel replacing as well
           },
         },
         regenerator: {
@@ -103,13 +109,15 @@ export function getLoaderSWCOptions({
   isPageFile,
   hasReactRefresh,
   styledComponents,
+  importSource,
 }) {
   let baseOptions = getBaseSWCOptions({
     filename,
     development,
     globalWindow: !isServer,
     hasReactRefresh,
     styledComponents,
+    importSource,
   })
 
   const isNextDist = nextDistPath.test(filename)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -321,6 +321,10 @@ export default async function getBaseWebpackConfig(
     runWebpackSpan: Span
   }
 ): Promise<webpack.Configuration> {
+  const { useTypeScript, jsConfig, resolvedBaseUrl } = await loadJsConfig(
+    dir,
+    config
+  )
   const supportedBrowsers = await getSupportedBrowsers(dir, dev)
   const hasRewrites =
     rewrites.beforeFiles.length > 0 ||
@@ -438,6 +442,7 @@ export default async function getBaseWebpackConfig(
             pagesDir,
             hasReactRefresh: !isMiddleware && hasReactRefresh,
             styledComponents: config.experimental.styledComponents,
+            importSource: jsConfig?.compilerOptions?.jsxImportSource,
           },
         }
       : {
@@ -521,11 +526,6 @@ export default async function getBaseWebpackConfig(
       } as ClientEntries)
     : undefined
 
-  const { useTypeScript, jsConfig, resolvedBaseUrl } = await loadJsConfig(
-    dir,
-    config
-  )
-
   function getReactProfilingInProduction() {
     if (reactProductionProfiling) {
       return {

diff --git a/packages/next/build/webpack/loaders/next-swc-loader.js b/packages/next/build/webpack/loaders/next-swc-loader.js
@@ -35,8 +35,13 @@ async function loaderTransform(parentTrace, source, inputSourceMap) {
 
   let loaderOptions = this.getOptions() || {}
 
-  const { isServer, pagesDir, hasReactRefresh, styledComponents } =
-    loaderOptions
+  const {
+    isServer,
+    pagesDir,
+    hasReactRefresh,
+    styledComponents,
+    importSource,
+  } = loaderOptions
   const isPageFile = filename.startsWith(pagesDir)
 
   const swcOptions = getLoaderSWCOptions({
@@ -47,6 +52,7 @@ async function loaderTransform(parentTrace, source, inputSourceMap) {
     development: this.mode === 'development',
     hasReactRefresh,
     styledComponents,
+    importSource,
   })
 
   const programmaticOptions = {

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -70,10 +70,10 @@
     "@babel/runtime": "7.15.4",
     "@hapi/accept": "5.0.2",
     "@napi-rs/triples": "1.0.3",
-    "@next/env": "12.0.4-canary.9",
-    "@next/polyfill-module": "12.0.4-canary.9",
-    "@next/react-dev-overlay": "12.0.4-canary.9",
-    "@next/react-refresh-utils": "12.0.4-canary.9",
+    "@next/env": "12.0.4-canary.10",
+    "@next/polyfill-module": "12.0.4-canary.10",
+    "@next/react-dev-overlay": "12.0.4-canary.10",
+    "@next/react-refresh-utils": "12.0.4-canary.10",
     "acorn": "8.5.0",
     "assert": "2.0.0",
     "browserify-zlib": "0.2.0",
@@ -156,7 +156,7 @@
     "@babel/traverse": "7.15.0",
     "@babel/types": "7.15.0",
     "@napi-rs/cli": "1.2.1",
-    "@next/polyfill-nomodule": "12.0.4-canary.9",
+    "@next/polyfill-nomodule": "12.0.4-canary.10",
     "@peculiar/webcrypto": "1.1.7",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",

diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
@@ -700,7 +700,9 @@ export default class Server {
         })
 
         for (let [key, value] of result.response.headers) {
-          allHeaders.append(key, value)
+          if (key !== 'x-middleware-next') {
+            allHeaders.append(key, value)
+          }
         }
 
         if (!this.renderOpts.dev) {

diff --git a/packages/next/server/web/sandbox/sandbox.ts b/packages/next/server/web/sandbox/sandbox.ts
@@ -244,7 +244,7 @@ function getFetchHeaders(middleware: string, init: RequestInit) {
 }
 
 function getFetchURL(input: RequestInfo, headers: NodeHeaders = {}): string {
-  const initurl = isRequestLike(input) ? input.url : input
+  const initurl = isRequestLike(input) ? input.url : String(input)
   if (initurl.startsWith('/')) {
     const host = headers.host?.toString()
     const localhost =

diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",

diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "12.0.4-canary.9",
+  "version": "12.0.4-canary.10",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

diff --git a/test/development/basic/theme-ui.test.ts b/test/development/basic/theme-ui.test.ts
@@ -0,0 +1,35 @@
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+
+describe('theme-ui SWC option', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: {
+        'jsconfig.json': new FileRef(join(__dirname, 'theme-ui/jsconfig.json')),
+        pages: new FileRef(join(__dirname, 'theme-ui/pages')),
+        'theme.js': new FileRef(join(__dirname, 'theme-ui/theme.js')),
+      },
+      dependencies: {
+        'theme-ui': '0.12.0',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should have theme provided styling', async () => {
+    let browser
+    try {
+      browser = await webdriver(next.appPort, '/')
+      const color = await browser.elementByCss('#hello').getComputedCss('color')
+      expect(color).toBe('rgb(51, 51, 238)')
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+})
diff --git a/test/development/basic/theme-ui/jsconfig.json b/test/development/basic/theme-ui/jsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsxImportSource": "theme-ui"
+  }
+}
diff --git a/test/development/basic/theme-ui/pages/_app.js b/test/development/basic/theme-ui/pages/_app.js
@@ -0,0 +1,13 @@
+// basic usage
+import { ThemeProvider } from 'theme-ui'
+import theme from '../theme'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
+}
+
+export default MyApp