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

Build fails if doing destructuring assignment outside of the define function of entrypoints #1485

Closed
5 tasks done
kairi003 opened this issue Mar 2, 2025 · 3 comments · Fixed by #1561
Closed
5 tasks done
Labels
contribution welcome good first issue Want to contribute to WXT? This is a good place to start

Comments

@kairi003
Copy link

kairi003 commented Mar 2, 2025

Describe the bug

In the entrypoints, if a destructuring assignment is performed outside of the define function and references that variable, the build fails.

Reproduction

For example, the code that fails in entrypoints/background.ts is as follows:

const [ a ] = [ 123, 456 ];
// or object as well,
// const { a } = { a: 123 };
console.log(a);

export default defineBackground(() => {
  console.log('Hello background!', { id: browser.runtime.id });
});

The build failure message is as follows:

$ npm run build

> wxt-starter@0.0.0 build
> wxt build


WXT 0.19.27                                                                                                                                                                                                                                                                                                  7:35:16 PM
ℹ Building chrome-mv3 for production with Vite 6.0.8                                                                                                                                                                                                                                                        7:35:16 PM
✖ Command failed after 566 ms                                                                                                                                                                                                                                                                               7:35:17 PM

 ERROR  a is not defined                                                                                                                                                                                                                                                                                     7:35:17 PM

    at entrypoints/background.ts:2:1
    at ViteNodeRunner.runModule (node_modules/vite-node/dist/client.mjs:401:5)
    at ViteNodeRunner.directRequest (node_modules/vite-node/dist/client.mjs:381:5)
    at ViteNodeRunner.cachedRequest (node_modules/vite-node/dist/client.mjs:206:14)
    at ViteNodeRunner.executeFile (node_modules/vite-node/dist/client.mjs:169:12)
    at node_modules/wxt/dist/core/builders/vite/index.mjs:245:29
    at async Promise.all (index 0)
    at Object.run (node_modules/wxt/dist/core/utils/environments/environment.mjs:13:14)
    at Object.importEntrypoints (node_modules/wxt/dist/core/builders/vite/index.mjs:242:23)
    at node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:139:19

However, if the variable reference is within a define function, it succeeds.

const [ a ] = [ 123, 456 ];

export default defineBackground(() => {
  console.log(a);
  console.log('Hello background!', { id: browser.runtime.id });
});

Or, if no destructuring assignment is done, it will succeed.
In the success example, it can be seen that the value is output to the console.

const a = [ 123, 456 ][0];
console.log(a);

export default defineBackground(() => {
  console.log('Hello background!', { id: browser.runtime.id });
});

Steps to reproduce

This can be seen immediately on the demo project created by npx wxt@latest init.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 3800X 8-Core Processor
    Memory: 11.79 GB / 15.58 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.14.0 - ~/.local/share/pnpm/node
    npm: 10.9.2 - ~/.local/share/pnpm/npm
    pnpm: 9.12.3 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 133.0.6943.141
  npmPackages:
    wxt: ^0.19.13 => 0.19.27

Used Package Manager

npm

Validations

@kairi003 kairi003 added the pending-triage Someone (usually a maintainer) needs to look into this to see if it's a bug label Mar 2, 2025
@aklinker1
Copy link
Collaborator

You should put your runtime code inside the main function, see this for a complete explanation of why:
https://wxt.dev/guide/essentials/config/entrypoint-loaders.html

But, this might still be a bug, and could be a valid use-case. Can you share the debug output?

wxt build --debug

@kairi003
Copy link
Author

kairi003 commented Mar 8, 2025

I understand that the runtime code must be placed in the main function, OK.
Yes, I will share the debug output just in case.


WXT 0.19.27
⚙ Hook execution order:
⚙   1. wxt:built-in:unimport
⚙   2. wxt.config.ts > hooks
ℹ Building chrome-mv3 for production with Vite 6.0.8
⚙ vite-node transformed entrypoint /home/ryuu/repo/wxt-test/entrypoints/content.ts
⚙ Original:
---
export default defineContentScript({
  matches: ['*://*.google.com/*'],
  main() {
    console.log('Hello content.');
  },
});

---
⚙ Transformed:
---
export default defineContentScript({
  matches: ['*://*.google.com/*'],
});
---
⚙ vite-node transformed entrypoint /home/ryuu/repo/wxt-test/entrypoints/background.ts
⚙ Original:
---
const [ a ] = [ 123, 456 ];
console.log(a);

export default defineBackground(() => {
  console.log('Hello background!', { id: browser.runtime.id });
});

---
⚙ Transformed:
---
console.log(a);

export default defineBackground();
---
✖ Command failed after 476 ms

 ERROR  a is not defined

    at entrypoints/background.ts:1:1
    at ViteNodeRunner.runModule (node_modules/vite-node/dist/client.mjs:401:5)
    at ViteNodeRunner.directRequest (node_modules/vite-node/dist/client.mjs:381:5)
    at ViteNodeRunner.cachedRequest (node_modules/vite-node/dist/client.mjs:206:14)
    at ViteNodeRunner.executeFile (node_modules/vite-node/dist/client.mjs:169:12)
    at node_modules/wxt/dist/core/builders/vite/index.mjs:245:29
    at async Promise.all (index 0)
    at Object.run (node_modules/wxt/dist/core/utils/environments/environment.mjs:13:14)
    at Object.importEntrypoints (node_modules/wxt/dist/core/builders/vite/index.mjs:242:23)
    at node_modules/wxt/dist/core/utils/building/find-entrypoints.mjs:139:19

@aklinker1
Copy link
Collaborator

Yeah, it's a bug. You can see in the transformed code, WXT is removing the a declaration... Hmm, thanks for sharing, I'll try and look into this soon. Otherwise, if someone else wants to contribute, the fix will go in this function:

https://github.com/wxt-dev/wxt/blob/main/packages%2Fwxt%2Fsrc%2Fcore%2Futils%2Ftransform.ts#L10

@aklinker1 aklinker1 added contribution welcome good first issue Want to contribute to WXT? This is a good place to start and removed pending-triage Someone (usually a maintainer) needs to look into this to see if it's a bug labels Mar 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
contribution welcome good first issue Want to contribute to WXT? This is a good place to start
Projects
None yet
2 participants