I’m trying to build a component plugin system with vite bundler.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>
main.js
import { loadPlugins } from './pluginLoader.js';
loadPlugins(false);
pluginLoader.js
const pluginsConfig = {
"plugins": [
{
"name": "myButton",
"path": "./components/debug/myButton/myButton.js",
"enabled": true,
"buttonDomOrder": 2
}
]
}
const loadPlugins = (parentsOnly = false) => {
const initializationPromises = [];
for (const pluginConfig of pluginsConfig.plugins) {
if (!pluginConfig.enabled) continue;
// Check condition based on parentsOnly flag
if ((parentsOnly && pluginConfig.createsParentDOM) || (!parentsOnly && !pluginConfig.createsParentDOM)) {
const initializationPromise = import(pluginConfig.path /* @vite-ignore */).then((module) => {
if (module.initialize) {
return module.initialize(pluginConfig.buttonDomOrder);
}
});
initializationPromises.push(initializationPromise);
}
}
return initializationPromises;
};
export { loadPlugins };
./components/debug/myButton/myButton.js
const initialize = async (buttonDomOrder) => {
console.log("Initializing myButton Component")
};
export { initialize };
While this is working with vite dev server it is not when building the app but failing with
GET http://localhost:8000/assets/components/debug/myButton/myButton.js 404 (File not found)
I’ve tried to used alias and the dynamicImport Plugin without luck
vite.config.js
import { defineConfig } from 'vite';
import dynamicImport from 'vite-plugin-dynamic-import';
import path from 'path';
export default defineConfig({
plugins: [
dynamicImport()
],
resolve: {
alias: {
'@components': path.resolve(__dirname, 'components'),
},
},
});
My question is:
What can I do so that vite understands my dynamic imports and respects them in a build?
>Solution :
Vite doesn’t support directories with variables in dynamic import:
https://vitejs.dev/guide/features.html#dynamic-import
To avoid this kind of problems you can use a "loader" function like in vue-router:
const pluginsConfig = {
"plugins": [
{
"name": "myButton",
"component": () => import("./components/debug/myButton/myButton.js"),
"enabled": true,
"buttonDomOrder": 2
}
]
}