How to render the bundled js files inline

[AntonioLok]

Hello everyone. We currently serve the static files built from build-storybook on artifactory.
My company recently upgraded artifactory to the latest version. The latest version of artifactory includes some security changes which prevent loading external javascript files on the main html file (ie. it will not load any of the blunded js files). This sever setting cannot be changed.

The error is as follow: Blocked script execution in '${url}/storybook/main/index.html' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

The solution that I came with was to use inline javascript. I was wondering if anyone has been able to do something similar or if someone could please guide me. I have created a main.js file inside .storybook to override the default webpack settings. I have tried this plugin and some others but I cannot get it to work.

This is what my main.js look like:

const { resolve } = require('path');
const babelLoaderIncludes = require('./babel-loader-includes');
const { designSystemDefault } = require('./constants');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
const DESIGN_SYSTEM = process.env.DESIGN_SYSTEM || designSystemDefault;

module.exports = {
  stories: ['../lib/components/**/*.storybook.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-knobs'],
  webpackFinal: async storybookBaseConfig => {
    storybookBaseConfig.resolve.extensions = ['.js', '.jsx', '.ts', '.tsx'];
    const babelLoader = storybookBaseConfig.module.rules.find(rule =>
      rule.use[0].loader.includes('babel-loader')
    );
    babelLoader.test = /\.jsx?$/;
    babelLoader.include = babelLoaderIncludes;
    delete babelLoader.exclude;
    storybookBaseConfig.stats = 'errors-warnings';
    storybookBaseConfig.resolve.alias['core-js/modules'] =
      '@storybook/react/node_modules/core-js/modules';

    storybookBaseConfig.module.rules = storybookBaseConfig.module.rules.concat([
      {
        test: /\.scss$/,
        loaders: [
          {
            loader: 'style-loader',
            options: {
              singleton: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1
            }
          },
          'resolve-url-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: '@epegzz/sass-vars-loader',
            options: {
              syntax: 'scss',
              files: [
                resolve(__dirname, '../lib/assets/scss-js-variables.json')
              ]
            }
          }
        ]
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      }
    ]);

    storybookBaseConfig.entry.push(
      resolve(
        __dirname,
        `../lib/assets/stylesheets/${DESIGN_SYSTEM}/index.scss`
      )
    );

    storybookBaseConfig.plugins.push(new HtmlInlineScriptPlugin())
    return storybookBaseConfig;
  }
};