Can't use global Alpine and other plugin's Global with new bundler based setup #4494
Replies: 1 comment 6 replies
-
|
Don't use require. From tooltip.js export a function accepting Alpine where
you put your init code. In your main file, import the function and call it
from your listener callback.
…On Wed, 1 Jan 2025, 14:52 Shashank-Bhatt1, ***@***.***> wrote:
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 ***@***.***/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', ***@***.***/persist',
***@***.***/intersect','fabric'
],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
'alpinejs': 'Alpine',
***@***.***/persist': 'persist',
***@***.***/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. When i was using webpack, require
was working fine though!!
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.
—
Reply to this email directly, view it on GitHub
<#4494>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACAJRWKHGWPUOK6ADRGODK32IP6KLAVCNFSM6AAAAABUOWSYECVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZXG43DQMZRHE>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately I'm not super familiar with bundlers. Perhaps @ekwoka knows how to do it. |
Beta Was this translation helpful? Give feedback.
-
|
That code there wouldn't work since persist wouldn't be defined until alpine.start which would also mean that the components using persist are initializing. I think there might be some XY problem. What is the issue that this is trying to solve exactly? Just that you're making code that would be included somewhere else and may or may not have persist already available? Persist is small enough that it being double included isn't a huge concern. |
Beta Was this translation helpful? Give feedback.
-
|
@ekwoka Thanks for looking into it. When i checked in code (when i used webpack earlier), globals were auto imported from window when kept as an externals like that but when using as a bundle it is separate story. Not only alpine but i am also getting issues for other packages where I feel it should work same in all way so as to get developer mode advantage of new bundler based setup. Persist (and alpine and all library) is something now i am using with cdn way. Can't we use one common way so that it works for everything? |
Beta Was this translation helpful? Give feedback.
-
|
If you're using things that are ESM, it will work fine. I think the { something } issue comes from you importing things that are not ESM, or otherwise your import info is incorrect. Webpack doesn't automatically "grab globals" anyway, and persist would never be global either. If these are your projects, you should be bundling all your code and not using "cdn scripts" or the like at all. |
Beta Was this translation helpful? Give feedback.
-
|
Okay understood for ESM. It was the problem like this thing. But is there any way we can keep hands on both side? When i started developing package i had no clue whether my parent app has something already installed (persist) and i end up importing twice. Also, i don't have controls of few files on server which have been already bundled (it's source existed but that is removed from bundle) and strictly prohibited by moderator not to touch them. But on other place, it could not be there for instance. If that's the case, how we can do this conditional check for persist case and grab globals when using import? |
Beta Was this translation helpful? Give feedback.
-
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.and this is some code lines from default entry point which is
src/index.jsand i am trying to define some data there whenalpine:initevent is fired using its cdn based setup.i am initializing and requiring tooltip in
defineDatafunction as i will need to use globalAlpinevariable there, and it can be only available on window scope whenalpine:initis 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. When i was using webpack, require was working fine though!!If i write
Alpine.data('tooltip', tooltip)in defineData function itself, (of course with importing it at the top and only on top!!)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 ofglobalsconfig inoutput) then also Alpine is not defined.Beta Was this translation helpful? Give feedback.
All reactions