Merge branch 'canary' into fix/error-on-static-dir

vercel · Jan 11, 2021 · d4ff2d6 · d4ff2d6
2 parents f860c3b + 7bb5f1a
commit d4ff2d6
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/docs/basic-features/environment-variables.md b/docs/basic-features/environment-variables.md
@@ -46,6 +46,11 @@ export async function getStaticProps() {
 }
 ```
 
+> **Note**: In order to keep server-only secrets safe, Next.js replaces `process.env.*` with the correct values
+> at build time. This means that `process.env` is not a standard JavaScript object, so you’re not able to
+> use [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
+> Environment variables must be referenced as e.g. `process.env.NEXT_PUBLIC_PUBLISHABLE_KEY`, _not_ `const { NEXT_PUBLIC_PUBLISHABLE_KEY } = process.env`.
+
 > **Note**: Next.js will automatically expand variables (`$VAR`) inside of your `.env*` files.
 > This allows you to reference other secrets, like so:
 >

diff --git a/examples/with-electron-typescript/README.md b/examples/with-electron-typescript/README.md
@@ -10,8 +10,6 @@ This example show how you can use Next.js inside an Electron application to avoi
 
 For development it's going to run a HTTP server and let Next.js handle routing. In production it use `next export` to pre-generate HTML static files and use them in your app instead of running an HTTP server.
 
-**You can find a detailed documentation about how to build Electron apps with Next.js [here](https://leo.im/2017/electron-next)!**
-
 ## How to use
 
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -911,14 +911,13 @@ export default async function getBaseWebpackConfig(
     },
     plugins: [
       hasReactRefresh && new ReactRefreshWebpackPlugin(),
-      // Makes sure `Buffer` is polyfilled in client-side bundles (same behavior as webpack 4)
+      // Makes sure `Buffer` and `process` are polyfilled in client-side bundles (same behavior as webpack 4)
       isWebpack5 &&
         !isServer &&
-        new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }),
-      // Makes sure `process` is polyfilled in client-side bundles (same behavior as webpack 4)
-      isWebpack5 &&
-        !isServer &&
-        new webpack.ProvidePlugin({ process: ['process'] }),
+        new webpack.ProvidePlugin({
+          Buffer: [require.resolve('buffer'), 'Buffer'],
+          process: [require.resolve('process')],
+        }),
       // This plugin makes sure `output.filename` is used for entry chunks
       !isWebpack5 && new ChunkNamesPlugin(),
       new webpack.DefinePlugin({

diff --git a/packages/next/lib/typescript/diagnosticFormatter.ts b/packages/next/lib/typescript/diagnosticFormatter.ts
@@ -45,7 +45,7 @@ export async function getFormattedDiagnostic(
     const character = pos.character + 1
 
     let fileName = path.posix.normalize(
-      path.relative(baseDir, diagnostic.file.fileName).replace(/\\/, '/')
+      path.relative(baseDir, diagnostic.file.fileName).replace(/\\/g, '/')
     )
     if (!fileName.startsWith('.')) {
       fileName = './' + fileName