Storybook main.js - Documentation hell

main.js

const customWebpackConfig = require('../config/webpack.config.js')

module.exports = {
  stories: [
    '../src/components/**/*.stories.mdx',
    '../src/components/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials'
  ],
  core: {
    builder: 'webpack5'
  },
  // webpackFinal: config => {
  //   let rules = [{
  //     test: /\.(js|mjs|jsx|ts|tsx)$/,
  //     include: /dist/, //Include dist folder as well to parse using babel loader in order to resolve exports not defined error
  //     exclude: /node_modules/,
  //     loader: 'babel-loader',
  //   }]

  //   //Find eslint loader rule from webpack config
  //   let eslintRule = config.module.rules.find(rule => {
  //     if (rule && rule.use) {
  //       return rule.use.some(use => use.loader.match('eslint-loader'))
  //     }
  //   });

  //   //Exclude validations of dist folder contents
  //   eslintRule.exclude = /dist/;

  //   return {
  //     ...config,
  //     module: {
  //       rules: [
  //         ...rules,
  //         eslintRule,
  //         ...config.module.rules
  //       ]
  //     }
  //   }
  // },
  webpackFinal: async (config) => ({
    ...config,
    module: {
      ...config.module,
      rules: [
        {
          test: /\.js$/i,
          // include: /build/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }
      ]
    },
    // plugins: [ ...config.plugins, ...customWebpackConfig.plugins ],
    resolve: {
      fallback: {
        crypto: false,
        path: false
      }
    },
    // target: 'node'
  }),
  // webpackFinal: async (config) => {
  //   config.target = 'node'

  //   config.module.rules.push(
  //       // {
  //       //   test: /\.js$/i,
  //       //   exclude: /node_modules/,
  //       //   loader: 'babel-loader'
  //       // },
  //       // {
  //       //   test: /\.css$/i,
  //       //   use: [
  //       //     {
  //       //       loader: ExtractCssChunks.loader,
  //       //       options: {
  //       //         hmr: true
  //       //       }
  //       //     },
  //       //     {
  //       //       loader: 'css-loader',
  //       //       options: {
  //       //         url: false
  //       //       }
  //       //     }
  //       //   ]
  //       // }
  //   )

  //   config.plugins.concat(...customWebpackConfig.plugins,
  //     '@babel/plugin-proposal-class-properties',
  //     '@babel/plugin-proposal-private-methods',
  //     )

  //   return config
  // },
  babel: async (options) => ({
    ...options,
    presets: [
      ...options.presets,
      [
        '@babel/preset-env',
        {
          debug: process.env.BABEL_DEBUG,
          modules: 'auto',
          useBuiltIns: 'usage',
          corejs: {
            version: 3,
            proposals: true
          }
        }
      ],
      [
        '@babel/preset-react',
        {
          runtime: 'automatic'
        }
      ]
    ],
    plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-private-methods',
    ]
  })
}