feat(nextjs): add option to disable svgr (#5200)

packages/next/plugins/with-nx.ts

@@ -1,7 +1,14 @@
+import { WebpackConfigOptions } from '../src/utils/types';
+
 const { join } = require('path');
 const { appRootPath } = require('@nrwl/workspace/src/utilities/app-root');
 const { workspaceLayout } = require('@nrwl/workspace/src/core/file-utils');
 
+export interface WithNxOptions {
+  nx?: WebpackConfigOptions;
+  [key: string]: any;
+}
+
 function regexEqual(x, y) {
   return (
     x instanceof RegExp &&
@@ -13,7 +20,7 @@ function regexEqual(x, y) {
   );
 }
 
-function withNx(nextConfig = {} as any) {
+function withNx(nextConfig = {} as WithNxOptions) {
   /**
    * In collaboration with Vercel themselves, we have been advised to set the "experimental-serverless-trace" target
    * if we detect that the build is running on Vercel to allow for the most ergonomic configuration for Vercel users.

packages/next/src/generators/application/files/next.config.js__tmpl__

@@ -4,13 +4,23 @@ const withNx = require('@nrwl/next/plugins/with-nx');
 <% if (style === 'less') { %>
 const withLess = require('@zeit/next-less');
 module.exports = withLess(withNx({
+  nx: {
+    // Set this to false if you do not want to use SVGR 
+    // See: https://github.com/gregberge/svgr
+    svgr: true,
+  },
   // Set this to true if you use CSS modules.
   // See: https://github.com/css-modules/css-modules
   cssModules: false
 }));
 <% } else if (style === 'styl') { %>
 const withStylus = require('@zeit/next-stylus');
 module.exports = withStylus(withNx({
+  nx: {
+    // Set this to false if you do not want to use SVGR 
+    // See: https://github.com/gregberge/svgr
+    svgr: true,
+  },
   // Set this to true if you use CSS modules.
   // See: https://github.com/css-modules/css-modules
   cssModules: false
@@ -21,8 +31,20 @@ module.exports = withStylus(withNx({
   || style === 'styled-jsx'
   || style === 'none'
 ) { %>
-module.exports = withNx({});
+module.exports = withNx({
+  nx: {
+    // Set this to false if you do not want to use SVGR 
+    // See: https://github.com/gregberge/svgr
+    svgr: true,
+  },
+});
 <% } else {
 // Defaults to CSS/SASS (which don't need plugin as of Next 9.3) %>
-module.exports = withNx({});
+module.exports = withNx({
+  nx: {
+    // Set this to false if you do not want to use SVGR 
+    // See: https://github.com/gregberge/svgr
+    svgr: true,
+  },
+});
 <% } %>

packages/next/src/utils/config.spec.ts

@@ -64,6 +64,40 @@ describe('Next.js webpack config builder', () => {
       // just check they get added
       expect(config.module.rules.length).toBe(2);
     });
+
+    it('should set svgr rule by default', () => {
+      const webpackConfig = createWebpackConfig('/root', 'apps/wibble', []);
+
+      const config = webpackConfig(
+        { resolve: { alias: {} }, module: { rules: [] }, plugins: [] },
+        { defaultLoaders: {} }
+      );
+
+      const svgrRule = config.module.rules.find(
+        (rule) => rule.test.toString() === String(/\.svg$/)
+      );
+      expect(svgrRule).toBeTruthy();
+    });
+
+    it('should not set svgr rule when its turned off', () => {
+      const webpackConfig = createWebpackConfig(
+        '/root',
+        'apps/wibble',
+        [],
+        undefined,
+        { svgr: false }
+      );
+
+      const config = webpackConfig(
+        { resolve: { alias: {} }, module: { rules: [] }, plugins: [] },
+        { defaultLoaders: {} }
+      );
+
+      const svgrRule = config.module.rules.find(
+        (rule) => rule.test.toString() === String(/\.svg$/)
+      );
+      expect(svgrRule).toBeFalsy();
+    });
   });
 
   describe('prepareConfig', () => {

packages/next/src/utils/config.ts

@@ -6,18 +6,25 @@ import {
   PHASE_PRODUCTION_SERVER,
 } from 'next/dist/next-server/lib/constants';
 import loadConfig from 'next/dist/next-server/server/config';
+import { NextConfig } from 'next/dist/next-server/server/config-shared';
 import { join, resolve } from 'path';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import { Configuration } from 'webpack';
-import { FileReplacement, NextBuildBuilderOptions } from './types';
+import {
+  FileReplacement,
+  NextBuildBuilderOptions,
+  WebpackConfigOptions,
+} from './types';
 import { normalizeAssets } from '@nrwl/web/src/utils/normalize';
 import { createCopyPlugin } from '@nrwl/web/src/utils/config';
+import { WithNxOptions } from '../../plugins/with-nx';
 
 export function createWebpackConfig(
   workspaceRoot: string,
   projectRoot: string,
   fileReplacements: FileReplacement[] = [],
-  assets: any = null
+  assets: any = null,
+  nxConfigOptions: WebpackConfigOptions = {}
 ): (a, b) => Configuration {
   return function webpackConfig(
     config: Configuration,
@@ -31,6 +38,12 @@ export function createWebpackConfig(
       defaultLoaders: any;
     }
   ): Configuration {
+    // default `svgr` to `true`, as it used to be supported by default,
+    // before this option was introduced
+    if (typeof nxConfigOptions.svgr === 'undefined') {
+      nxConfigOptions.svgr = true;
+    }
+
     const mainFields = ['es2015', 'module', 'main'];
     const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
     config.resolve.plugins = [
@@ -51,13 +64,14 @@ export function createWebpackConfig(
         return alias;
       }, config.resolve.alias);
 
-    config.module.rules.push(
-      {
-        test: /\.([jt])sx?$/,
-        exclude: /node_modules/,
-        use: [defaultLoaders.babel],
-      },
-      {
+    config.module.rules.push({
+      test: /\.([jt])sx?$/,
+      exclude: /node_modules/,
+      use: [defaultLoaders.babel],
+    });
+
+    if (nxConfigOptions.svgr) {
+      config.module.rules.push({
         test: /\.svg$/,
         oneOf: [
           // If coming from JS/TS file, then transform into React component using SVGR.
@@ -84,8 +98,8 @@ export function createWebpackConfig(
             ],
           },
         ],
-      }
-    );
+      });
+    }
 
     // Copy (shared) assets to `public` folder during client-side compilation
     if (!isServer && Array.isArray(assets) && assets.length > 0) {
@@ -112,7 +126,8 @@ export async function prepareConfig(
   options: NextBuildBuilderOptions,
   context: ExecutorContext
 ) {
-  const config = await loadConfig(phase, options.root, null);
+  const config = (await loadConfig(phase, options.root, null)) as NextConfig &
+    WithNxOptions;
   const userWebpack = config.webpack;
   const userNextConfig = getConfigEnhancer(options.nextConfig, context.root);
   // Yes, these do have different capitalisation...
@@ -126,7 +141,8 @@ export async function prepareConfig(
       context.root,
       options.root,
       options.fileReplacements,
-      options.assets
+      options.assets,
+      config.nx
     )(userWebpack ? userWebpack(a, b) : a, b);
 
   if (typeof userNextConfig !== 'function') {

packages/next/src/utils/types.ts

@@ -52,3 +52,7 @@ export interface NextExportBuilderOptions {
   silent: boolean;
   threads: number;
 }
+
+export interface WebpackConfigOptions {
+  svgr?: boolean;
+}