update(nx): 2nd step of migration to v12.8.0

Author: erkobridee

.storybook/main.js

@@ -1,4 +1,8 @@
+const { appRootPath } = require('@nrwl/tao/src/utils/app-root');
+const configStorybook = require(`${appRootPath}/tools/config/webpack/storybook`);
+
 module.exports = {
   stories: [],
   addons: ['@storybook/addon-a11y', '@storybook/addon-essentials'],
+  webpackFinal: async (config) => configStorybook(config),
 };

.storybook/webpack.config.js

@@ -1,2 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/nextjs/next-env.d.ts

@@ -1,10 +1,81 @@
 const rootMain = require('../../../../.storybook/main');
+const {
+  addons: rootAddons,
+  stories: rootStories,
+  webpackFinal: rootWebpackFinal,
+} = rootMain;
 
-// Use the following syntax to add addons!
-//rootMain.addons.push('');
+module.exports = {
+  ...rootMain,
 
-rootMain.stories.push(
-  ...['../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)']
-);
+  addons: [...rootAddons],
 
-module.exports = rootMain;
+  stories: [
+    ...rootStories,
+    '../src/lib/**/*.stories.mdx',
+    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+
+  webpackFinal: async (config) => {
+    config = await rootWebpackFinal(config);
+
+    // Found this here: https://github.com/nrwl/nx/issues/2859
+    // And copied the part of the solution that made it work
+
+    const svgRuleIndex = config.module.rules.findIndex((rule) => {
+      const { test } = rule;
+
+      return test.toString().startsWith('/\\.(svg|ico');
+    });
+
+    config.module.rules[svgRuleIndex].test =
+      /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
+
+    config.module.rules.push(
+      {
+        test: /\.(png|jpe?g|gif|webp)$/,
+        loader: require.resolve('url-loader'),
+        options: {
+          limit: 10000, // 10kB
+          name: '[name].[hash:7].[ext]',
+        },
+      },
+      {
+        test: /\.svg$/,
+        oneOf: [
+          // If coming from JS/TS file, then transform into React component using SVGR.
+          {
+            issuer: {
+              test: /\.[jt]sx?$/,
+            },
+            use: [
+              '@svgr/webpack?-svgo,+titleProp,+ref![path]',
+              {
+                loader: require.resolve('url-loader'),
+                options: {
+                  limit: 10000, // 10kB
+                  name: '[name].[hash:7].[ext]',
+                  esModule: false,
+                },
+              },
+            ],
+          },
+          // Fallback to plain URL loader.
+          {
+            use: [
+              {
+                loader: require.resolve('url-loader'),
+                options: {
+                  limit: 10000, // 10kB
+                  name: '[name].[hash:7].[ext]',
+                },
+              },
+            ],
+          },
+        ],
+      }
+    );
+
+    return config;
+  },
+};

libs/shared/components/.storybook/main.js

@@ -13,6 +13,7 @@
   "include": ["../src/**/*", "./*.js"],
   "files": [
     "../../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../../../node_modules/@nrwl/react/typings/image.d.ts",
+    "../../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts"
   ]
 }