Vite build error when building with Avatar Picker component, works fine locally

1

I’m using the UI Initiative Avatar Picker component in a Framework7 core app. Component docs here: Avatar Picker | UI Initiative

Everything is working fine locally, but I’m getting the following Vite error when building:

'default' is not exported by src/components/AvatarPicker/AvatarPicker.f7, imported by src/pages/post-create.f7

I think I need to do something in vite.config.js to handle this plugin correctly.

Here’s my current vite.config.js:

import path from 'path';
import framework7 from 'rollup-plugin-framework7';

const SRC_DIR = path.resolve(__dirname, './src');
const PUBLIC_DIR = path.resolve(__dirname, './public');
const BUILD_DIR = path.resolve(__dirname, './www',);

export default {
  plugins: [
    framework7({ emitCss: false }),
  ],
  root: SRC_DIR,
  base: '',
  publicDir: PUBLIC_DIR,
  build: {
    outDir: BUILD_DIR,
    assetsInlineLimit: 0,
    emptyOutDir: true,
    rollupOptions: {
      treeshake: false,
    },
  },
  resolve: {
    alias: {
      '@': SRC_DIR,
    },
  },
  server: {
    host: true,
  },
  esbuild: {
    jsxFactory: '$jsx',
    jsxFragment: '"Fragment"',
  },
};

I found this post: "Error: 'default' is not exported by..." when building with imported umd module · Issue #2679 · vitejs/vite · GitHub and I tried this:

commonjsOptions: {
      exclude: ['src/components/AvatarPicker/AvatarPicker.f7'], //doesn't work
    },

But that didn’t help.

Any ideas?

2

: ) I have no idea what happened, but as soon as I submitted this post, the build errors went away and my build/deploy is working.

That’s the power of the Framework7 forum I guess.