samrum / vite-plugin-web-extension

A vite plugin for generating cross browser platform, ES module based web extensions.
MIT License
325 stars 32 forks source link

Maximum call stack size exceeded #64

Closed aleksolutions closed 1 year ago

aleksolutions commented 1 year ago

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:

vite v3.1.8 building for production...
✓ 7285 modules transformed.
rendering chunks (273)...[webExtension] Maximum call stack size exceeded

And the function causing the problem is a recursive one which is on .../@samrum/vite-plugin-web-extension/dist/index.js

getMetadataforChunk(chunkId, bundle, includeChunkAsAsset, metadata = {
        css: new Set(),
        assets: new Set(),
    })

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!

aleksolutions commented 1 year ago

By the way, It works with hmr "npm run dev" without issues, if that can help you.

samrum commented 1 year ago

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.

aleksolutions commented 1 year ago

Perfect, I will try to replicate the error in a separate repository. As soon as I have it I will send you the link.

aleksolutions commented 1 year ago

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.

aleksolutions commented 1 year ago

Hi @samrum, if you need my help to solve the problem, you can count with me!

aleksolutions commented 1 year ago

Hi @samrum, any updates on this?

samrum commented 1 year ago

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.

aleksolutions commented 1 year ago

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:

image

Seems like there are some chunks not exposed correctly to web_accesible_resources

samrum commented 1 year ago

If you manually add those missing files to the generated manifest.json file in dist, does it work?

aleksolutions commented 1 year ago

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:

image

As I said in my first post, its working just fine on hmr

Thank you very much for your help.

aleksolutions commented 1 year ago

Did you find the problem or it is a lost cause?

samrum commented 1 year ago

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.

aleksolutions commented 1 year ago

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!

aleksolutions commented 1 year ago

please, if you find that it is not posible to fix, let me know, thanks!

aleksolutions commented 1 year ago

Hi @samrum any updates on this?

samrum commented 1 year ago

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

samrum commented 1 year ago

Pulling in this fix: #68 And setting build.modulePreload = false in the vite config seems to fix it. At least no runtime errors.

aleksolutions commented 1 year ago

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!