Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
colearendt opened this issue Nov 14, 2022 · 7 comments

Comments

@colearendt
Copy link

colearendt commented Nov 14, 2022

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):

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
Copy link
Author

colearendt commented Nov 14, 2022

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
Copy link
Author

colearendt commented Nov 14, 2022

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Author

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

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

@aklinker1
Copy link
Owner

Nice!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants