Alias for Library

[aceofwings]

Hi I am looking to use a locally developed library and simply aliasing to it so I can use in the client side code. I have attempted to simply adjust the webpack configuration as follows.

chainWebpack : (config, isServer, isBuild) =>{
      config.resolve.alias.set('bootstrap-vue-3',  path.resolve('../../dist/bootstrap-vue-3.es' ))
 }  

Then import in clientappEnhance and in script tags...
import 'bootstrap-vue-3'

however webpack still does not resolve to the above alias. Is there a better way for referencing built libraries or modifying config options to easily reference an external library or am I missing something in webpack's behavior?

[Mister-Hope]

We are providing alias option in plugin API, so create a local plugin in your theme or config files, and set alias there.

walinejs/waline docs can be an example.

Edited: you can also set alias directly in config file.

[aceofwings]

As what I am doing above however the alias's are not being resolved, even after being set in chainwebpack or webpack config? But you were able to use your aliases in normal clientonly code?

[Mister-Hope]

I have no idea what you as questioning. If you insist something not working as expected, a minimal reproduction repo is required.

Also, if plugin API gives you some related options they are preferred as first choise.

[aceofwings]

I restructured the docs to follow more line your repository in ways

[aceofwings]

Hey Mister Hope I have another question.

What do you think the best way to handle dependencies that require access to document and window. Currently our project looks like this

Problem is in Toast.md I use a ToastExample component that imports 'boostrap-vue-3' and subsequently calls usetoast. For some reason when building, ssr will attempt to render pages and usetoast will load all of bootstrap-vue-3. Some components use bootstrap as a dependency which will attempt to use document and window variables resulting in

Document is not defined

I have attempted to wrap these components in Client Only tags without success.

[Mister-Hope]

Check the sticky issue first, you may need to config optimizeDeps and ssr related options to work with vite.

Also, all library which has a direct reference of window or document should be imported through dynamic import (import('xxx'))