require statements early execution issue when using commonjs() plugin with vite

[shashank-brightness]

Hi, I try to upgrade my old project from webpack to new vite bundler which was made using the awesome alpine js library.

But now i am getting few issues when it comes to importing modules and defining/using Alpine utilities itself. This is my vite.config.js file which i am using commonjs() plugin of rollup.

import { defineConfig } from 'vite'
import { resolve } from 'path'
import commonjs from '@rollup/plugin-commonjs';


export default defineConfig({
    build: {
      lib: {
        entry: resolve(__dirname, 'src/index.js'),
        fileName: (format, entryName) => `${entryName}.${format}.js`,
        name: 'MyLib',
        
      },
      outDir: 'output',
      rollupOptions: {
        // make sure to externalize deps that shouldn't be bundled
        // into your library
        external: ['bootstrap/js/dist/dropdown', 'bootstrap/js/dist/tab', 'bootstrap/js/dist/tooltip', 
          'bootstrap/js/dist/modal', 'alpinejs', '@alpinejs/persist',
          '@alpinejs/intersect','fabric'
        ],
        output: {
          // Provide global variables to use in the UMD build
          // for externalized deps
          globals: {
            'alpinejs': 'Alpine',
            '@alpinejs/persist': 'persist',
            '@alpinejs/intersect': 'intersect',
            'bootstrap/js/dist/dropdown': 'bootstrap.Dropdown',
            'bootstrap/js/dist/tab': 'bootstrap.Tab',
            'bootstrap/js/dist/tooltip': 'bootstrap.Tooltip',
            'bootstrap/js/dist/modal': 'bootstrap.Modal',
            'fabric': 'fabric'
  
          },
        },
      },
      commonjsOptions: {
        include: ['src/**/*'],
        exclude: ['node_modules/**/*'],
        
        transformMixedEsModules: true
      },
    },
    plugins: [
      commonjs()
    ]
})

and this is some code lines from default entry point which is src/index.js and i am trying to define some data there when alpine:initevent is fired using its cdn based setup.

function defineData() {
    require ('./tooltip')
}
document.addEventListener('alpine:init', defineData)

i am initializing and requiring tooltip in defineData function as i will need to use global Alpine variable there, and it can be only available on window scope when alpine:init is fired when alpine finishes execution.

However when i check in browser i am getting error that Alpine is not defined in tooltip.js. It seems that due to require statement is executing and put as module in pre-bundling step of vite, i can't use the nature of only runtime importing require.

If i write Alpine.data('tooltip', tooltip) in defineData function itself, (of course with importing it at the top and only on top!!)

import tooltip from './tooltip'
function defineData() {
   Alpine.data('tooltip', tooltip)
}
document.addEventListener('alpine:init', defineData)

then it works perfectly fine but as i also need to use some more data i want to modularize it for better organization purpose. I am also getting this issue in other files as well where i need to use Alpine utilities within data itself where Alpine stays undefined.

Also, i am not getting how i can use Alpine.$persist plugin and what name of global i should give inside the rollup options because if i give it a value of Alpine.$persist (on 2nd line of globals config in output ) then also Alpine is not defined.