Generated an empty chunk: "popup", overwrites a previously emitted file of the same name

[colearendt]

Hello. This package has been a huge help! However, I am running into an issue right near what I presume is the finish line in getting my extension migrated to vite. Unfortunately, I am having a very difficult time figuring out where the root problem is at.

TL;DR; popup.popup.html is getting built twice. Once at popup.html with expected contents, and once at popup/popup.html with "empty" / placeholder contents. If I flatten the folder structure, the latter / useless one wins.

Directory structure:

- popup/popup.html
- manifest.json

manifest.json

{ 
  "manifest_version": 3,
  "action": {
    "default_popup": "popup/popup.html"
  }
}

(essentially the same as this e2e test... which works for me... but I still cannot get my plugin to):

vite-plugin-web-extension/packages/e2e/e2e.test.ts

Lines 69 to 77 in 2517ce0

	it("should build a simple popup extension", () =>
	expectBuildToMatchSnapshot(
	baseConfig({
	browser_action: {
	default_popup: "page1.html",
	},
	}),
	baseOutputs(["dist/page1.html"])
	));

build log

[vite-plugin-web-extension] Building HTML Pages in Multi-Page Mode
✓ 1 modules transformed.
Generated an empty chunk: "popup/popup"
../dist/other/icon.xcf       43.14 KiB
../dist/other/icon_128.png   9.81 KiB
../dist/other/icon_48.png    2.52 KiB
../dist/popup.html           0.23 KiB
../dist/popup/popup.html     0.03 KiB

Note that there are two output popup.html files... one with my actual contents (dist/popup.html) and another (dist/popup/popup.html) with contents: export default "/popup.html".

Unfortunately, the path pointed to by the extension is popup/popup.html, so my extension is not usable. No foray through several iterations of additionalInputs, different file structures, verbose logging, rollup options, etc. have been helpful. Further, if I change or flatten the folder structure, it seems that the blank popup.html is generated last / wins with a message "popup.html" overwrites a previously emitted file of the same name.

I have tried different versions of vite in the 3.0 line, and it seems to affect both 3.1 and 3.2. I have seen some related-ish looking activity on vite lately though - maybe I will try the e2e tests with newer versions of deps.

vitejs/vite#9928

Any ideas how to keep debugging / resolve this "double build" issue?

[colearendt]

NOTE: in case it is helpful - I am also using some other deps, so I suppose it is possible something else is involved here too... nothing feels out of the ordinary though:

  "dependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "events": "^3.3.0",
    "path": "^0.12.7",
    "pouchdb": "^7.3.0",
    "pouchdb-browser": "^7.3.1",
    "pouchdb-core": "^7.3.1",
    "pouchdb-node": "^7.3.1",
    "process": "^0.11.10",
    "vite": "~3.1",
    "vite-plugin-chrome-extension": "^0.0.7",
    "vite-plugin-vuetify": "^1.0.0-alpha.17",
    "vite-plugin-web-extension": "^1.4.4",
    "vue": "^3.2.39",
    "vuetify": "^3.0.0-beta.11"
  }

And vite.config.ts

import { resolve } from "path";
import { defineConfig } from "vite";

// @ts-ignore
import webExtension from "vite-plugin-web-extension";

import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
import * as path from "path";

export default defineConfig({
    root: "src",
    logLevel: 'info',
    resolve: {
	    alias: {
		    "@": resolve(__dirname, "src"),
	    },
    },
    build: {
        minify: false,
        outDir: path.resolve(__dirname, "dist"),
        emptyOutDir: true,
    },
    plugins: [
        webExtension({
            manifest: "src/manifest.json",
            assets: "other",
        }),
    	vue(),
        vuetify({autoImport: true}),
    ],
})

[colearendt]

More bad-ish news (for me). I migrated to using the budding/beta v2 version (vite-plugin-web-extension@next) and am still seeing the same behavior. Next step is to see if I can create a more minimal reprex repository.

[colearendt]

Ugh. After all the digging I did, starting a repository from scratch is not illustrating this behavior... 😭

Through a bunch of diffing / tweaking / comparing, the issue came down to this benign-looking line in my vite.config.ts, which I excluded above in trying to make the config more palatable... little would I ever have imagined that this line creates this behavior...

assetsInclude: [],

BEWARE the assetsInclude 😱

Here is a trimmed down example - latest commit breaks in this way: https://github.com/colearendt/extensions-example

[aklinker1]

Sorry this was so hard to debug! I have no idea why assetsInclude: undefined is different than assetsInclude: []. The docs don't hint at anything.

I can forcefully ignore that option inside the plugin, but that might cause issues for someone else down the line who knows how to use that field properly. Instead, if this happens to anyone else, hopefully they can find this issue and the solution works for them.

// vite.config.ts
export default defineConfig({
    ...
-   assetsInclude: someValue,
});

Let me know if you have any other problems!

[colearendt]

Thanks, I think that sounds like the right call too! My extension is now happy and healthy - thanks again for the great package!

Part of it feels like this may be a bug in vite too, so I will probably go toss an issue their direction in case it crops up elsewhere 😄

[colearendt]

Just a note that this issue was fixed upstream in vite! 🎉

https://github.com/vitejs/vite/pull/10941/files

[aklinker1]

Nice!