automatic merging of next.config.js files (#222)

This pr adds in automatic merging of the next.config.js files. If there is no existing next.config.js file, then we will add the existing default next.config.js file in. If we are able to merge Sentry's with the existing, then the file will be updated (with the original saved as next.config.original.js). If we are unable to merge, we will create a template file and ask them to merge (the status quo approach) .

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
     'assets/**',
     'scripts/**',
     'coverage/**',
+    'lib/Helper/test-fixtures/**',
   ],
   overrides: [
     {

CHANGELOG.md

@@ -1,12 +1,17 @@
 # Changelog
 
+## Unreleased
+
+- feat: Merge next.config.js files automatically (#222)
+
 ## 2.4.2
 
 - feat(nextjs): Add sentry.edge.config.js template (#227)
 
 ## 2.4.1
 
-- feat: Add logic to add @sentry/nextjs if it's missing when running the wizard (#219)
+- feat: Add logic to add @sentry/nextjs if it's missing when running the wizard
+  (#219)
 - fix: Print localhost with `http` instead of `https` (#212)
 - feat: Add project_platform as query param if -s and -i are set (#221)
 - feat: Add promo code option used for signup flows (#223)
@@ -22,12 +27,14 @@
 
 ## 2.3.1
 
-- fix(nextjs): Always check for both `next` and `@sentry/nextjs` presence and version (#209)
+- fix(nextjs): Always check for both `next` and `@sentry/nextjs` presence and
+  version (#209)
 - fix: `cli.executable` property should be resolved from cwd (#211)
 
 ## 2.3.0
 
-- feat(react-native): Xcode plugin debug files upload can include source using env
+- feat(react-native): Xcode plugin debug files upload can include source using
+  env
 - chore(ci): remove jira workflow (#204)
 
 ## 2.2.2
@@ -36,7 +43,8 @@
 
 ## 2.2.1
 
-- feat(nextjs): Add option to auto-wrap data fetchers and API routes to Next.js config (#194)
+- feat(nextjs): Add option to auto-wrap data fetchers and API routes to Next.js
+  config (#194)
 
 ## 2.2.0
 

lib/Helper/MergeConfig.ts

@@ -0,0 +1,18 @@
+import * as fs from 'fs';
+
+// merges the config files
+export function mergeConfigFile(
+  sourcePath: string,
+  templatePath: string,
+): boolean {
+  try {
+    const templateFile = fs.readFileSync(templatePath, 'utf8');
+    const sourceFile = fs.readFileSync(sourcePath, 'utf8');
+    const newText = templateFile.replace('// ORIGINAL CONFIG', sourceFile);
+    Function(newText); // check if the file is valid javascript
+    fs.writeFileSync(sourcePath, newText);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}

lib/Helper/__tests__/MergeConfig.ts

@@ -0,0 +1,77 @@
+/// <reference types="jest" />
+import * as fs from 'fs';
+import * as path from 'path';
+
+import { mergeConfigFile } from '../MergeConfig';
+
+const configPath = path.join(__dirname, '..', 'test-fixtures/next.config.js');
+const templatePath = path.join(
+  __dirname,
+  '..',
+  '..',
+  '..',
+  'scripts/NextJS/configs/next.config.template.js',
+);
+
+function configFileNames(num: number): {
+  sourcePath: string;
+  mergedPath: string;
+} {
+  const sourcePath = path.join(
+    __dirname,
+    '..',
+    `test-fixtures/next.config.${num}.js`,
+  );
+  const mergedPath = path.join(
+    __dirname,
+    '..',
+    `test-fixtures/next.config.${num}-merged.js`,
+  );
+  return { sourcePath, mergedPath };
+}
+
+describe('Merging next.config.js', () => {
+  test('merge basic next.config.js', () => {
+    const { sourcePath, mergedPath } = configFileNames(1);
+    fs.copyFileSync(sourcePath, configPath);
+
+    expect(mergeConfigFile(configPath, templatePath)).toBe(true);
+    expect(
+      fs.readFileSync(configPath, 'utf8') ===
+        fs.readFileSync(mergedPath, 'utf8'),
+    ).toBe(true);
+    fs.unlinkSync(configPath);
+  });
+
+  test('merge invalid javascript config', () => {
+    const { sourcePath } = configFileNames(2);
+    fs.copyFileSync(sourcePath, configPath);
+
+    expect(mergeConfigFile(configPath, templatePath)).toBe(false);
+    fs.unlinkSync(configPath);
+  });
+
+  test('merge more complicated next.config.js', () => {
+    const { sourcePath, mergedPath } = configFileNames(3);
+    fs.copyFileSync(sourcePath, configPath);
+
+    expect(mergeConfigFile(configPath, templatePath)).toBe(true);
+    expect(
+      fs.readFileSync(configPath, 'utf8') ===
+        fs.readFileSync(mergedPath, 'utf8'),
+    ).toBe(true);
+    fs.unlinkSync(configPath);
+  });
+
+  test('merge next.config.js with function', () => {
+    const { sourcePath, mergedPath } = configFileNames(4);
+    fs.copyFileSync(sourcePath, configPath);
+
+    expect(mergeConfigFile(configPath, templatePath)).toBe(true);
+    expect(
+      fs.readFileSync(configPath, 'utf8') ===
+        fs.readFileSync(mergedPath, 'utf8'),
+    ).toBe(true);
+    fs.unlinkSync(configPath);
+  });
+});

lib/Helper/test-fixtures/next.config.1-merged.js

@@ -0,0 +1,18 @@
+// This file sets a custom webpack configuration to use your Next.js app
+// with Sentry.
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+const { withSentryConfig } = require('@sentry/nextjs');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;
+
+module.exports = withSentryConfig(
+  module.exports,
+  { silent: true },
+  { hideSourcemaps: true },
+);

lib/Helper/test-fixtures/next.config.1.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

lib/Helper/test-fixtures/next.config.2.js

@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+
+
+
+
+module.exports = nextConfig;

lib/Helper/test-fixtures/next.config.3-merged.js

@@ -0,0 +1,21 @@
+// This file sets a custom webpack configuration to use your Next.js app
+// with Sentry.
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+const { withSentryConfig } = require('@sentry/nextjs');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: [],
+  },
+};
+
+module.exports = nextConfig;
+
+module.exports = withSentryConfig(
+  module.exports,
+  { silent: true },
+  { hideSourcemaps: true },
+);

lib/Helper/test-fixtures/next.config.3.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: [],
+  },
+};
+
+module.exports = nextConfig;

lib/Helper/test-fixtures/next.config.4-merged.js

@@ -0,0 +1,21 @@
+// This file sets a custom webpack configuration to use your Next.js app
+// with Sentry.
+// https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+const { withSentryConfig } = require('@sentry/nextjs');
+
+module.exports = (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    /* config options here */
+  };
+  return nextConfig;
+};
+
+module.exports = withSentryConfig(
+  module.exports,
+  { silent: true },
+  { hideSourcemaps: true },
+);

lib/Helper/test-fixtures/next.config.4.js

@@ -0,0 +1,9 @@
+module.exports = (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    /* config options here */
+  };
+  return nextConfig;
+};