Closed aleksolutions closed 1 year ago
By the way, It works with hmr "npm run dev" without issues, if that can help you.
Yeah, probably some kind of dependency/chunk loop. Would really need a repo that reproduces the issue in order to fix it since I'm not sure where/why it would be happening.
Perfect, I will try to replicate the error in a separate repository. As soon as I have it I will send you the link.
Hi @samrum I created the following repo: https://github.com/alejsuarez/call-stack-issue-vite-plugin-extension
Please, if you can, check the comments on vite.config.ts
file. I'm not familiar with vite atm and maybe i'm doing something wrong here.
You should be able to reproduce my problem just installing deps and running build script. Btw i'm using pnpm in this project, but I tried with npm and yarn with the same result.
Hi @samrum, if you need my help to solve the problem, you can count with me!
Hi @samrum, any updates on this?
Hmm, I've pushed a branch that contains a fix that would prevent infinite loops when parsing chunk dependencies here: https://github.com/samrum/vite-plugin-web-extension/tree/meta-data-loop-fix
Your example extension builds with the fix, though I don't know if the extension actually works like it should or not. If you're able to checkout that branch and try building maybe you can let me know.
Hi @samrum thank you very much for the fix!
The extension now builds without error, but when I try to use it in the browser, I got the following errors in the console:
Seems like there are some chunks not exposed correctly to web_accesible_resources
If you manually add those missing files to the generated manifest.json file in dist, does it work?
I tried it, but is not working. I mean, I don't get any console errors related to web_accessible_resources but instead, I have others that makes the component crash:
As I said in my first post, its working just fine on hmr
Thank you very much for your help.
Did you find the problem or it is a lost cause?
Are you using the repo you linked before? Don't know how to check the content script you have defined in there since the urls in the match pattern redirect to other places.
Hi @samrum, I updated the repo with a working example, its all setted up with pnpm build/dev and pnpm serve. The only thing you must change is your package with the build of your new branch.
As you will see, the component shows up but some things are broken, if you inspect the console, you'll see all of those errors.
Thank you again!
please, if you find that it is not posible to fix, let me know, thanks!
Hi @samrum any updates on this?
The entries in web accessible resources are there and correct, but it seems like there's an issue with the renderDynamicImport hook that's rendering them with an incorrect path.
For the Toolbar chunk, it ends up as runtime.getURL("../../../../Toolbar.e834df8a.js")
which resolves as
chrome-extension://pgbmjijmgakcbbjkpbflhlcbbdfopnak/Toolbar.e834df8a.js
but the correct path is actually
chrome-extension://pgbmjijmgakcbbjkpbflhlcbbdfopnak/assets/Toolbar.e834df8a.js
Pulling in this fix: #68
And setting build.modulePreload = false
in the vite config seems to fix it. At least no runtime errors.
You sir are the best. I cannot be more grateful for what you just did. You fixed my entire problem. The only thing I had to do is merge all three branches (the new fix to hmr too) locally and compile it.
Have a wonderful new year!
Hi @samrum
I have an error trying to build a large extension, I know is an stupid Atlassian package that have over 20mb but would be great if you can fix it.
the output i'm getting is:
And the function causing the problem is a recursive one which is on
.../@samrum/vite-plugin-web-extension/dist/index.js
I tried to change the forEach loops with basic loops to see if I can pass the build, but with no luck.
Can you take a look at it?
Thank you very much!