webpack expose-loader not working three js

I am converting a project to use webpack. But this project has two externally loaded scripts that i do not controll. These scripts require a library I provide via webpack to be global. So I use the expose-loader plugin to accomplish this but it is not working for me.

See project details below:

webpack config:

    const webpack = require('webpack');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    const path = require('path');
    
    const PATHS = {
        src: path.join(__dirname, 'src/'), //absolute path to RepoDir/src
        dist: path.join(__dirname, 'dist/') //absolute path to RepoDir/dist
    }
    module.exports = {
        entry: {
            main: PATHS.src + 'javascript/app.js'
        },
        output: {
            path: PATHS.dist,
            filename: 'bundle.js'
        },
        plugins: [
            new CopyWebpackPlugin({
                patterns: [
                    { from: 'src/images', to: 'images' },
                    { from: 'src/models', to: 'models' }
                ]
            }),
            new webpack.ProvidePlugin({
                THREE: 'three',
            })
        ],
        module: {
            rules: [
                {
                    test: require.resolve('three'),
                    loader: 'expose-loader',
                    options: {
                        exposes: 'THREE',
                    },
                },
            ]
        }
    }

My index.html file:

    <!-- 8th wall AR cdn scripts. -->
    <!-- THESE two scripts below require THREE to be global (window.THREE) -->
    <script src="https://cdn.8thwall.com/web/xrextras/xrextras.js"></script>
    <script async src="https://apps.8thwall.com/xrweb?appKey=PRIVATEKEY"></script>
        
    <script src="dist/bundle.js"></script>

App.js the entry file:

    import THREE from 'three'
    import { ARManager } from './modules/arManager';
    
    const manager = new ARManager();
    manager.startExperience('X1');

Just to make sure this is the error i am getting:

window.THREE does not exist but is required by xxx

If more context or information is needed please let me know so i can clarify.
I am a complete newb to webpack so all help and suggestions are much appreciated!