Rollup - ES Modules for the client "Uncaught ReferenceError: Swiper is not defined"

Question

I have gone through many forums and git threads with no avail. I am attempting to import a packaged module via node modules directory. However its object always returns undefined in the browser console, while roll up says it is fine. This seems to be apparent with any import that is not in my local directory.

Example:

rollup.config.js

import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import autoExternal from 'rollup-plugin-auto-external';
import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';

export default {
  input: 'scripts/index.js',
  output: {
    file: 'assets/script.js',
    format: 'iife',
    sourcemap: true,
    globals: {
      swiper: 'Swiper',
      react: 'React',
    },
  },
  plugins: [
    commonjs({ include: 'node_modules/**', extensions: ['.js'] }),
    nodeResolve({ browser: true, preferBuiltins: false }),
    babel({
      include: 'node_modules/**',
      babelHelpers: 'bundled',
    }),
    autoExternal(),
    replace({
      'process.env.NODE_ENV': JSON.stringify('development'),
      preventAssignment: true,
    }),
    serve({
      contentBase: '',
      host: 'localhost',
      port: '3000',
    }),
    livereload(),
  ],
};

index.js

import Swiper from 'swiper';
window.onload = function () {
  console.log(Swiper);
};