Replace withSourceMaps with productionBrowserSourceMaps. Fixes #384

Frojd · Mar 28, 2021 · 9c39bb5 · 9c39bb5
1 parent 31ea022
commit 9c39bb5
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 146 deletions.
diff --git a/Company-Project/frontend/next.config.js b/Company-Project/frontend/next.config.js
@@ -1,6 +1,91 @@
 const withPlugins = require('next-compose-plugins');
-const withSourceMaps = require('@zeit/next-source-maps')();
-const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+const SentryWebpackPlugin = require('@sentry/webpack-plugin')
+
+const {
+    NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
+    SENTRY_ORG,
+    SENTRY_PROJECT,
+    SENTRY_AUTH_TOKEN,
+    NODE_ENV,
+    VERCEL_GITHUB_COMMIT_SHA,
+    VERCEL_GITLAB_COMMIT_SHA,
+    VERCEL_BITBUCKET_COMMIT_SHA,
+    CIRCLE_SHA1,
+} = process.env
+
+const COMMIT_SHA =
+    VERCEL_GITHUB_COMMIT_SHA ||
+    VERCEL_GITLAB_COMMIT_SHA ||
+    VERCEL_BITBUCKET_COMMIT_SHA ||
+    CIRCLE_SHA1;
+
+process.env.SENTRY_DSN = SENTRY_DSN
+const basePath = ''
+
+const nextConfig = {
+    productionBrowserSourceMaps: true,
+    env: {
+        // Make the COMMIT_SHA available to the client so that Sentry events can be
+        // marked for the release they belong to. It may be undefined if running
+        // outside of Vercel
+        NEXT_PUBLIC_COMMIT_SHA: COMMIT_SHA,
+    },
+    webpack: (config, options) => {
+        // In `pages/_app.js`, Sentry is imported from @sentry/browser. While
+        // @sentry/node will run in a Node.js environment. @sentry/node will use
+        // Node.js-only APIs to catch even more unhandled exceptions.
+        //
+        // This works well when Next.js is SSRing your page on a server with
+        // Node.js, but it is not what we want when your client-side bundle is being
+        // executed by a browser.
+        //
+        // Luckily, Next.js will call this webpack function twice, once for the
+        // server and once for the client. Read more:
+        // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
+        //
+        // So ask Webpack to replace @sentry/node imports with @sentry/browser when
+        // building the browser's bundle
+        if (!options.isServer) {
+            config.resolve.alias['@sentry/node'] = '@sentry/browser'
+        }
+
+        // Define an environment variable so source code can check whether or not
+        // it's running on the server so we can correctly initialize Sentry
+        config.plugins.push(
+            new options.webpack.DefinePlugin({
+                'process.env.NEXT_IS_SERVER': JSON.stringify(
+                    options.isServer.toString()
+                ),
+            })
+        )
+
+        // When all the Sentry configuration env variables are available/configured
+        // The Sentry webpack plugin gets pushed to the webpack plugins to build
+        // and upload the source maps to sentry.
+        // This is an alternative to manually uploading the source maps
+        // Note: This is disabled in development mode.
+        if (
+            SENTRY_DSN &&
+            SENTRY_ORG &&
+            SENTRY_PROJECT &&
+            SENTRY_AUTH_TOKEN &&
+            COMMIT_SHA &&
+            NODE_ENV === 'production'
+        ) {
+            config.plugins.push(
+                new SentryWebpackPlugin({
+                    include: '.next',
+                    ignore: ['node_modules'],
+                    stripPrefix: ['webpack://_N_E/'],
+                    urlPrefix: `~${basePath}/_next`,
+                    release: COMMIT_SHA,
+                })
+            )
+        }
+        return config
+    },
+    basePath,
+}
 
 const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
     return Object.assign({}, nextConfig, {
@@ -22,76 +107,11 @@ const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
     });
 };
 
-const {
-    NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
-    SENTRY_ORG,
-    SENTRY_PROJECT,
-    SENTRY_AUTH_TOKEN,
-    NODE_ENV,
-    VERCEL_GITHUB_COMMIT_SHA,
-    VERCEL_GITLAB_COMMIT_SHA,
-    VERCEL_BITBUCKET_COMMIT_SHA,
-} = process.env;
-
-const COMMIT_SHA =
-    VERCEL_GITHUB_COMMIT_SHA ||
-    VERCEL_GITLAB_COMMIT_SHA ||
-    VERCEL_BITBUCKET_COMMIT_SHA;
-
-process.env.SENTRY_DSN = SENTRY_DSN;
-const basePath = '';
+// const withBundleAnalyzer = require('@next/bundle-analyzer')({
+//     enabled: process.env.ANALYZE === 'true',
+// });
 
 module.exports = withPlugins([
-    withSourceMaps({
-        trailingSlash: true,
-        serverRuntimeConfig: {
-            rootDir: __dirname,
-        },
-        webpack: (config, options) => {
-            // In `pages/_app.js`, Sentry is imported from @sentry/browser. While
-            // @sentry/node will run in a Node.js environment. @sentry/node will use
-            // Node.js-only APIs to catch even more unhandled exceptions.
-            //
-            // This works well when Next.js is SSRing your page on a server with
-            // Node.js, but it is not what we want when your client-side bundle is being
-            // executed by a browser.
-            //
-            // Luckily, Next.js will call this webpack function twice, once for the
-            // server and once for the client. Read more:
-            // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
-            //
-            // So ask Webpack to replace @sentry/node imports with @sentry/browser when
-            // building the browser's bundle
-            if (!options.isServer) {
-                config.resolve.alias['@sentry/node'] = '@sentry/browser';
-            }
-
-            // When all the Sentry configuration env variables are available/configured
-            // The Sentry webpack plugin gets pushed to the webpack plugins to build
-            // and upload the source maps to sentry.
-            // This is an alternative to manually uploading the source maps
-            // Note: This is disabled in development mode.
-            if (
-                SENTRY_DSN &&
-                SENTRY_ORG &&
-                SENTRY_PROJECT &&
-                SENTRY_AUTH_TOKEN &&
-                COMMIT_SHA &&
-                NODE_ENV === 'production'
-            ) {
-                config.plugins.push(
-                    new SentryWebpackPlugin({
-                        include: '.next',
-                        ignore: ['node_modules'],
-                        stripPrefix: ['webpack://_N_E/'],
-                        urlPrefix: `~${basePath}/_next`,
-                        release: COMMIT_SHA,
-                    })
-                );
-            }
-            return config;
-        },
-        basePath,
-    }),
     withSvgr,
-]);
+    //withBundleAnalyzer,
+], nextConfig);
diff --git a/Company-Project/frontend/package.json b/Company-Project/frontend/package.json
@@ -21,7 +21,6 @@
         "@sentry/node": "^6.2.3",
         "@sentry/webpack-plugin": "^1.14.2",
         "@svgr/webpack": "^5.5.0",
-        "@zeit/next-source-maps": "0.0.4-canary.1",
         "i18next": "^19.9.2",
         "next": "10.0.9",
         "next-compose-plugins": "^2.2.1",

diff --git a/{{cookiecutter.project_name}}/frontend/next.config.js b/{{cookiecutter.project_name}}/frontend/next.config.js
@@ -1,6 +1,91 @@
 const withPlugins = require('next-compose-plugins');
-const withSourceMaps = require('@zeit/next-source-maps')();
-const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+const SentryWebpackPlugin = require('@sentry/webpack-plugin')
+
+const {
+    NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
+    SENTRY_ORG,
+    SENTRY_PROJECT,
+    SENTRY_AUTH_TOKEN,
+    NODE_ENV,
+    VERCEL_GITHUB_COMMIT_SHA,
+    VERCEL_GITLAB_COMMIT_SHA,
+    VERCEL_BITBUCKET_COMMIT_SHA,
+    CIRCLE_SHA1,
+} = process.env
+
+const COMMIT_SHA =
+    VERCEL_GITHUB_COMMIT_SHA ||
+    VERCEL_GITLAB_COMMIT_SHA ||
+    VERCEL_BITBUCKET_COMMIT_SHA ||
+    CIRCLE_SHA1;
+
+process.env.SENTRY_DSN = SENTRY_DSN
+const basePath = ''
+
+const nextConfig = {
+    productionBrowserSourceMaps: true,
+    env: {
+        // Make the COMMIT_SHA available to the client so that Sentry events can be
+        // marked for the release they belong to. It may be undefined if running
+        // outside of Vercel
+        NEXT_PUBLIC_COMMIT_SHA: COMMIT_SHA,
+    },
+    webpack: (config, options) => {
+        // In `pages/_app.js`, Sentry is imported from @sentry/browser. While
+        // @sentry/node will run in a Node.js environment. @sentry/node will use
+        // Node.js-only APIs to catch even more unhandled exceptions.
+        //
+        // This works well when Next.js is SSRing your page on a server with
+        // Node.js, but it is not what we want when your client-side bundle is being
+        // executed by a browser.
+        //
+        // Luckily, Next.js will call this webpack function twice, once for the
+        // server and once for the client. Read more:
+        // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
+        //
+        // So ask Webpack to replace @sentry/node imports with @sentry/browser when
+        // building the browser's bundle
+        if (!options.isServer) {
+            config.resolve.alias['@sentry/node'] = '@sentry/browser'
+        }
+
+        // Define an environment variable so source code can check whether or not
+        // it's running on the server so we can correctly initialize Sentry
+        config.plugins.push(
+            new options.webpack.DefinePlugin({
+                'process.env.NEXT_IS_SERVER': JSON.stringify(
+                    options.isServer.toString()
+                ),
+            })
+        )
+
+        // When all the Sentry configuration env variables are available/configured
+        // The Sentry webpack plugin gets pushed to the webpack plugins to build
+        // and upload the source maps to sentry.
+        // This is an alternative to manually uploading the source maps
+        // Note: This is disabled in development mode.
+        if (
+            SENTRY_DSN &&
+            SENTRY_ORG &&
+            SENTRY_PROJECT &&
+            SENTRY_AUTH_TOKEN &&
+            COMMIT_SHA &&
+            NODE_ENV === 'production'
+        ) {
+            config.plugins.push(
+                new SentryWebpackPlugin({
+                    include: '.next',
+                    ignore: ['node_modules'],
+                    stripPrefix: ['webpack://_N_E/'],
+                    urlPrefix: `~${basePath}/_next`,
+                    release: COMMIT_SHA,
+                })
+            )
+        }
+        return config
+    },
+    basePath,
+}
 
 const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
     return Object.assign({}, nextConfig, {
@@ -22,76 +107,11 @@ const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
     });
 };
 
-const {
-    NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
-    SENTRY_ORG,
-    SENTRY_PROJECT,
-    SENTRY_AUTH_TOKEN,
-    NODE_ENV,
-    VERCEL_GITHUB_COMMIT_SHA,
-    VERCEL_GITLAB_COMMIT_SHA,
-    VERCEL_BITBUCKET_COMMIT_SHA,
-} = process.env;
-
-const COMMIT_SHA =
-    VERCEL_GITHUB_COMMIT_SHA ||
-    VERCEL_GITLAB_COMMIT_SHA ||
-    VERCEL_BITBUCKET_COMMIT_SHA;
-
-process.env.SENTRY_DSN = SENTRY_DSN;
-const basePath = '';
+// const withBundleAnalyzer = require('@next/bundle-analyzer')({
+//     enabled: process.env.ANALYZE === 'true',
+// });
 
 module.exports = withPlugins([
-    withSourceMaps({
-        trailingSlash: true,
-        serverRuntimeConfig: {
-            rootDir: __dirname,
-        },
-        webpack: (config, options) => {
-            // In `pages/_app.js`, Sentry is imported from @sentry/browser. While
-            // @sentry/node will run in a Node.js environment. @sentry/node will use
-            // Node.js-only APIs to catch even more unhandled exceptions.
-            //
-            // This works well when Next.js is SSRing your page on a server with
-            // Node.js, but it is not what we want when your client-side bundle is being
-            // executed by a browser.
-            //
-            // Luckily, Next.js will call this webpack function twice, once for the
-            // server and once for the client. Read more:
-            // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
-            //
-            // So ask Webpack to replace @sentry/node imports with @sentry/browser when
-            // building the browser's bundle
-            if (!options.isServer) {
-                config.resolve.alias['@sentry/node'] = '@sentry/browser';
-            }
-
-            // When all the Sentry configuration env variables are available/configured
-            // The Sentry webpack plugin gets pushed to the webpack plugins to build
-            // and upload the source maps to sentry.
-            // This is an alternative to manually uploading the source maps
-            // Note: This is disabled in development mode.
-            if (
-                SENTRY_DSN &&
-                SENTRY_ORG &&
-                SENTRY_PROJECT &&
-                SENTRY_AUTH_TOKEN &&
-                COMMIT_SHA &&
-                NODE_ENV === 'production'
-            ) {
-                config.plugins.push(
-                    new SentryWebpackPlugin({
-                        include: '.next',
-                        ignore: ['node_modules'],
-                        stripPrefix: ['webpack://_N_E/'],
-                        urlPrefix: `~${basePath}/_next`,
-                        release: COMMIT_SHA,
-                    })
-                );
-            }
-            return config;
-        },
-        basePath,
-    }),
     withSvgr,
-]);
+    //withBundleAnalyzer,
+], nextConfig);
diff --git a/{{cookiecutter.project_name}}/frontend/package.json b/{{cookiecutter.project_name}}/frontend/package.json
@@ -21,7 +21,6 @@
         "@sentry/node": "^6.2.3",
         "@sentry/webpack-plugin": "^1.14.2",
         "@svgr/webpack": "^5.5.0",
-        "@zeit/next-source-maps": "0.0.4-canary.1",
         "i18next": "^19.9.2",
         "next": "10.0.9",
         "next-compose-plugins": "^2.2.1",