I’m currently trying to develop a theme extension using Vite as my bundler.
However I am running into a weird issue that I can’t seem to find a fix for, so I was hoping someone wiser than me could help.
It seems like chunks that contain dynamic imports are loading in my entry file (app.js) this only happens during development, and not in the production build. (???)
As you can see in the image above app.js is loaded in twice, once from what seems to be the Shopify store, and once from one of the chunks.
configurator-Caw4ODwE.js has some dynamic imports which I suspect could be the cause of this issue:
//configurator.ts
...
const themeModules = import.meta.glob<Promise<{ default: ThemeHandler }>>('./themes/*.ts')
...
This is the Vite output of configurator.ts:
//Beginning of configurator-Caw4ODwE.js
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { _ as __vitePreload } from "./app.js"; //This is my problem
...
Does anyone know why this happens, and how I may be able to solve this issue? Any input is much appreciated.
//package.json
...
"dev": "vite build --watch",
...
//vite.config.js
...
base: './',
build: {
watch: {},
outDir: 'assets',
assetsDir: '',
rollupOptions: {
input: inputEntries, //contains multiple entries (.ts, .css)
output: {
entryFileNames: `[name].js`,
chunkFileNames: '[name]-[hash].js',
assetFileNames: (asset) => path.basename(asset.names[0]),
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor'
}
}
}
}
}
...
Also another minor thing, when Vite detects code changes and starts to bundle, Shopify CLI screams at me with a bunch of ENOENT: no such file or directory errors. I suspect it may be due to Vite clearing the assets folder and writing new files each time it bundles.