add additional if statements to webpack.common.ts

kmbcook · Mar 28, 2024 · ed108c4 · ed108c4
1 parent 4c9144b
commit ed108c4
Showing 1 changed file with 42 additions and 34 deletions.
diff --git a/.storybook/webpack.config.ts b/.storybook/webpack.config.ts
@@ -31,49 +31,57 @@ switch (process.env.ENV) {
 }
 
 const env = dotenv.config({path: path.resolve(__dirname, `../${envFile}`)});
-const custom: CustomWebpackConfig = require('../config/webpack/webpack.common')({
+const custom: CustomWebpackConfig = require('../config/webpack/webpack.common').default({
     envFile,
 });
 
 const webpackConfig = ({config}: {config: Configuration}) => {
-    if (config.resolve && config.plugins && config.module) {
-        config.resolve.alias = {
-            'react-native-config': 'react-web-config',
-            'react-native$': 'react-native-web',
-            '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'),
-            '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
-            ...custom.resolve.alias,
-        };
+    if (!config.resolve) {
+        config.resolve = {};
+    }
+    if (!config.plugins) {
+        config.plugins = [];
+    }
+    if (!config.module) {
+        config.module = {};
+    }
 
-        // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values
-        const definePluginIndex = config.plugins.findIndex((plugin) => plugin instanceof DefinePlugin);
-        if (definePluginIndex !== -1 && config.plugins[definePluginIndex] instanceof DefinePlugin) {
-            const definePlugin = config.plugins[definePluginIndex] as DefinePlugin;
-            if (definePlugin.definitions) {
-                definePlugin.definitions.__REACT_WEB_CONFIG__ = JSON.stringify(env);
-            }
-        }
-        config.resolve.extensions = custom.resolve.extensions;
+    config.resolve.alias = {
+        'react-native-config': 'react-web-config',
+        'react-native$': 'react-native-web',
+        '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'),
+        '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
+        ...custom.resolve.alias,
+    };
 
-        const babelRulesIndex = custom.module.rules.findIndex((rule) => rule.loader === 'babel-loader');
-        const babelRule = custom.module.rules[babelRulesIndex];
-        if (babelRule) {
-            config.module.rules?.push(babelRule);
+    // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values
+    const definePluginIndex = config.plugins.findIndex((plugin) => plugin instanceof DefinePlugin);
+    if (definePluginIndex !== -1 && config.plugins[definePluginIndex] instanceof DefinePlugin) {
+        const definePlugin = config.plugins[definePluginIndex] as DefinePlugin;
+        if (definePlugin.definitions) {
+            definePlugin.definitions.__REACT_WEB_CONFIG__ = JSON.stringify(env);
         }
+    }
+    config.resolve.extensions = custom.resolve.extensions;
 
-        const fileLoaderRule = config.module.rules?.find(
-            (rule): rule is RuleSetRule =>
-                typeof rule !== 'boolean' && typeof rule !== 'string' && typeof rule !== 'number' && !!rule?.test && rule.test instanceof RegExp && rule.test.test('.svg'),
-        );
-        if (fileLoaderRule) {
-            fileLoaderRule.exclude = /\.svg$/;
-        }
-        config.module.rules?.push({
-            test: /\.svg$/,
-            enforce: 'pre',
-            loader: require.resolve('@svgr/webpack'),
-        });
+    const babelRulesIndex = custom.module.rules.findIndex((rule) => rule.loader === 'babel-loader');
+    const babelRule = custom.module.rules[babelRulesIndex];
+    if (babelRule) {
+        config.module.rules?.push(babelRule);
+    }
+
+    const fileLoaderRule = config.module.rules?.find(
+        (rule): rule is RuleSetRule =>
+            typeof rule !== 'boolean' && typeof rule !== 'string' && typeof rule !== 'number' && !!rule?.test && rule.test instanceof RegExp && rule.test.test('.svg'),
+    );
+    if (fileLoaderRule) {
+        fileLoaderRule.exclude = /\.svg$/;
     }
+    config.module.rules?.push({
+        test: /\.svg$/,
+        enforce: 'pre',
+        loader: require.resolve('@svgr/webpack'),
+    });
 
     return config;
 };