[Vite build error]Vue 3 typescript with vite build show error default is not exported by <file>

Question

I am building a vue 3 ts project. Running vite no problem, when build vite build --debug the project get error.

The error message show like this .

error during build:
Error: 'default' is not exported by src\env.d.ts, imported by src\infrastructure\seedwork\imageUrlFormatter.ts
    at error (Projects\vite\vite-user\node_modules\rollup\dist\shared\rollup.js:160:30)

Method i tried:

1. export default in env.d.ts

declare const imageUrlFormatter: any;
export default imageUrlFormatter;

Error in env.d.ts gone, but will show in other files like main.ts. It will continue to show in next file even after i add the declare above.

Below are the code of my helper code

// imageUrlFormatter.ts

function imageUrlFormatter(url: string) {
    return new URL(`/src/${url}`, import.meta.url).href
}

export { imageUrlFormatter }

Here is my tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "useDefineForClassFields": true,
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": [
            "esnext",
            "dom"
        ],
        "typeRoots": [
            "./types"
        ],
        "paths": {
            "@/*": [
                "./src/*"
            ],
            "views/*": [
                "./src/views/*"
            ],
            "seedwork/*": [
                "./src/infrastructure/seedwork/*"
            ],
            "model/*": [
                "./src/infrastructure/model/*"
            ]
        },
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue"
    ]
}

Here is my vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import path from 'path'
import commonjs from '@rollup/plugin-commonjs';
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(),
    VitePWA(
        {
            strategies: 'injectManifest',
            registerType: 'autoUpdate',
            includeAssets: ['favicon.svg', 'favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
            manifest: {
                name: 'Name of your app',
                short_name: 'Short name of your app',
                description: 'Description of your app',
                theme_color: '#ffffff',
                icons: [
                    {
                        src: 'pwa-192x192.png',
                        sizes: '192x192',
                        type: 'image/png',
                    },
                    {
                        src: 'pwa-512x512.png',
                        sizes: '512x512',
                        type: 'image/png',
                    },
                    {
                        src: 'pwa-512x512.png',
                        sizes: '512x512',
                        type: 'image/png',
                        purpose: 'any maskable',
                    }
                ]
            }
        }
    ), commonjs({
        ignoreDynamicRequires: true
    })],
    resolve: {
        alias: {
            '~/': `${path.resolve(__dirname, 'src')}/`,
            'vue': '@vue/runtime-dom',
            '@': path.resolve('src'),
            'views': path.resolve('src/views'),
            '@components': path.resolve('src/@components'),
            'seedwork': path.resolve('src/infrastructure/seedwork'),
            'model': path.resolve('src/infrastructure/model'),
            "assets": path.resolve(__dirname, "/src/assets"),
            "~assets": path.resolve(__dirname, "/src/assets")
        }
    },
})

I tried search the error above, but couldnt understand what is that mean, anyone that can help and let me know if this error show up how to have a better debug ? Thanks ya.

ps: I have create a smaller project to reproduce my error. Here is the github repo https://github.com/Arios509/vite-test

Answer 1

Turns out the error is due to the imageUrlFormatter.

When using vite, it would have the problem when load the image. Hence i created a imageUrlFormatter helper to resolve the path.

After i modify the code for imageUrlFormatter to

const imageUrlFormatter = (url: string) => {
    return `src/${url}`;
}
export { imageUrlFormatter }

Then it works.

I also updated the vite.config.ts for the resolve path like this.

...
resolve: {
        alias: {
 ...
            "assets": resolve(__dirname, "src/assets"),
            "~assets": resolve(__dirname, "/src/assets"),
        }
    },

The error hint was never the root cause, wish the vite build will give more information about that. Because when normal run vite it is just fine not until it needed to build.

Ps: After build success and deploy, this method is not able to cover. I remove this helper and then change to new URL() for each image instead. Anyways, i would still want to see if anyone could help and suggest better solution for using vite build.

Thanks.