Allow using imported variables in entrypoint options #336

yunsii · 2024-01-09T12:47:14Z

Describe the bug

In a content script entrypoint, if you import a variable, lets call it MATCHES, and try to use that variable to for the matches option, the build fails with the following error message:

import { MATCHES } from "@/data/matches";
import { sayHello } from "@/helpers/dev";

export default defineContentScript({
  matches: MATCHES.allUrl,
  async main() {
    sayHello("_document-idle.content");
  },
});

ERROR: MATCHES is not defined

But import { sayHello } from "@/helpers/dev" is okey.

To Reproduce

https://github.com/yunsii/wxt-reproduction

Steps to reproduce the bug using the reproduction:

pnpm i --ignore-scripts
pnpm build --debug

Here's the output:

> [email protected] build /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro
> wxt build "--debug"


WXT 0.13.5                                                                                                          11:12:19 AM
ℹ Building chrome-mv3 for production with Vite 5.0.11                                                              11:12:20 AM
[11:12:20 AM] ⚙ Loading file metadata: /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/src/entrypoints/_document-idle.content/index.ts
[11:12:20 AM] ⚙ Loading file metadata: /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/src/entrypoints/background.ts
⚙ Text:                                                                                                            11:12:20 AM
export default defineBackground(() => {
  console.log('Hello background!', { id: browser.runtime.id });
});

No imports:
import { defineUnlistedScript, defineContentScript, defineBackground } from 'wxt/sandbox';

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

Code:
import { browser } from 'wxt/browser';
import { defineUnlistedScript, defineContentScript, defineBackground } from 'wxt/sandbox';

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

[jiti] [transpile] /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/src/entrypoints/background.ts (40.18ms)
[jiti] [transpile] [esm] /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/node_modules/.pnpm/[email protected]/node_modules/wxt/dist/browser.js (0.85ms)
[jiti] [transpile] [esm] /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/node_modules/.pnpm/[email protected]/node_modules/wxt/dist/chunk-FNTE2L27.js (0.791ms)
[jiti] [transpile] [esm] /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/node_modules/.pnpm/[email protected]/node_modules/wxt/dist/virtual/mock-browser.js (1.293ms)
[jiti] [native] /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/node_modules/.pnpm/[email protected]/node_modules/wxt/dist/testing.cjs
[jiti] [transpile] [esm] /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/node_modules/.pnpm/[email protected]/node_modules/wxt/dist/sandbox.js (0.935ms)
[jiti] [native] /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/node_modules/.pnpm/@[email protected]/node_modules/@webext-core/match-patterns/lib/index.cjs
⚙ Text:                                                                                                            11:12:20 AM
import { MATCHES } from "@/data/matches";
import { sayHello } from "@/helpers/dev";

export default defineContentScript({
  matches: MATCHES.allUrl,
  // matches: ["<all-url>"],
  async main() {
    sayHello("_document-idle.content");
  },
});

No imports:
import { defineUnlistedScript, defineContentScript, defineBackground } from 'wxt/sandbox';




export default defineContentScript({
  matches: MATCHES.allUrl,
  // matches: ["<all-url>"],
  async main() {
    sayHello("_document-idle.content");
  },
});

Code:
import { defineUnlistedScript, defineContentScript, defineBackground } from 'wxt/sandbox';




export default defineContentScript({
  matches: MATCHES.allUrl,
  // matches: ["<all-url>"],
  async main() {
    sayHello("_document-idle.content");
  },
});

[jiti] [transpile] /Users/aklinker1/Development/local/wxt-entrypoint-imports-repro/src/entrypoints/_document-idle.content/index.ts (1.392ms)

 ERROR  MATCHES is not defined                                                                                      11:12:20 AM

  at src/entrypoints/_document-idle.content/index.ts:25:12
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:256443)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:254371)
  at importEntrypointFile (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:1786:23)
  at async getContentScriptEntrypoint (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:451:35)
  at async node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:230:18
  at async Promise.all (index 0)
  at async findEntrypoints (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:218:23)
  at async internalBuild (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:2503:23)
  at async build (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:2538:10)

✖ Command failed after 367 ms                                                                                      11:12:20 AM

 ERROR  MATCHES is not defined                                                                                      11:12:20 AM

  at src/entrypoints/_document-idle.content/index.ts:25:12
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:256443)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:254371)
  at importEntrypointFile (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:1786:23)
  at async getContentScriptEntrypoint (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:451:35)
  at async node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:230:18
  at async Promise.all (index 0)
  at async findEntrypoints (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:218:23)
  at async internalBuild (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:2503:23)
  at async build (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:2538:10)

 ELIFECYCLE  Command failed with exit code 1.

Expected behavior

Variable matches works with defineContentScript intuitively

Environment

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 27.67 GB / 31.35 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
    npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm
    pnpm: 8.14.0 - ~/.nvm/versions/node/v18.4.0/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.98
  npmPackages:
    wxt: ^0.13.5 => 0.13.5

The text was updated successfully, but these errors were encountered:

yunsii · 2024-01-09T12:48:31Z

I have to use literal value instead.

aklinker1 · 2024-01-09T14:18:55Z

Yes, you must use literal values when defining options for entrypoints.

Why? When importing your entrypoints to get it's options during the build process, the file is imported in a node environment. It doesn't have access to window or other DOM globals. It also doesn't have access to the chrome or browser globals an extension normally has access to.

So to get around this, wxt strips all imports from your file, and then imports it.

This makes sure any imported modules with side-effects doesn't cause a build failure when accessing one of these global variables.

The only solution to solve this problem is to setup a full browser environment while loading the entrypoints files, which I decided would be too error prone initially. So the initial implementation removed imports.

I want to allow imported variables to be used for the entrypoint definition, but haven't had the time to enable that yet. Would be open to contributions for this.

yunsii · 2024-01-09T14:34:13Z

It is inconvient to arrange matches with logic, and is it significant impact of build entrypoints if setup a full browser environment?

aklinker1 · 2024-01-09T17:04:50Z

It is inconvient to arrange matches with logic, and is it significant impact of build entrypoints if setup a full browser environment?

Sorry, I don't understand the question.

aklinker1 · 2024-01-09T17:05:38Z

For future reference, here is the file responsible for importing the entrypoints during the build process to grab their options.

https://github.com/wxt-dev/wxt/blob/8c834835c453dcb49f8b44fa432203d83b902a81/src/core/utils/building/import-entrypoint.ts

yunsii · 2024-01-10T00:54:42Z

Variable matches can be used in business logic too, if must use literal values, developers have to maintain two copies of matches data sometime.

aklinker1 · 2024-01-10T01:08:01Z

Variable matches can be used in business logic

Since WXT doesn't run the main function during the build, it only grabs the object passed into defineContentScript, any imported variables used inside the main function doesn't throw any errors because that code is never executed.

It's the same reason why this code runs without throwing an error. The example function is never called.

function example() {
  console.log(someVariableThatDoesNotExist);
}

console.log("Hello world");

developers have to maintain two copies of matches data sometime

Yes. That's why I'd accept a PR to fix this. Eventually, I'll get to this, but not until after v1.0 is out.

aklinker1 · 2024-05-03T22:47:06Z

I'm gonna close this issue, it will be fixed in #506, follow that one for updates.

yunsii added the triage Bug or problem that needs to be looked into label Jan 9, 2024

yunsii changed the title ~~Path alias with defineContentScript matches throw error~~ Use defineContentScript matches with variable encounter error Jan 9, 2024

aklinker1 changed the title ~~Use defineContentScript matches with variable encounter error~~ Allow imports in entrypoints Jan 9, 2024

aklinker1 changed the title ~~Allow imports in entrypoints~~ Allow using imported variables in entrypoint options Jan 9, 2024

aklinker1 added feature contribution welcome and removed triage Bug or problem that needs to be looked into labels Jan 9, 2024

aklinker1 mentioned this issue Jan 14, 2024

@vue/devtools is not work well with wxt #345

Closed

aklinker1 mentioned this issue Jan 26, 2024

Build errors when leveraging wxt/storage: You must add the 'storage' permission to your manifest to use 'wxt/storage' #371

Closed

aklinker1 mentioned this issue Feb 15, 2024

Does wxt support manifest.json dynamic variable injection? #443

Open

This was referenced Feb 28, 2024

docs: Added DocVersionRedirector to "Using WXT" section #492

Merged

Extract entrypoint options improvements #506

Open

aklinker1 added this to the v1.2 milestone Mar 3, 2024

aklinker1 added duplicate This issue or pull request already exists and removed feature contribution welcome labels May 3, 2024

aklinker1 closed this as not planned Won't fix, can't repro, duplicate, stale May 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow using imported variables in entrypoint options #336

Allow using imported variables in entrypoint options #336

yunsii commented Jan 9, 2024 •

edited by aklinker1

yunsii commented Jan 9, 2024 •

edited

aklinker1 commented Jan 9, 2024 •

edited

yunsii commented Jan 9, 2024

aklinker1 commented Jan 9, 2024

aklinker1 commented Jan 9, 2024

yunsii commented Jan 10, 2024

aklinker1 commented Jan 10, 2024

aklinker1 commented May 3, 2024

Allow using imported variables in entrypoint options #336

Allow using imported variables in entrypoint options #336

Comments

yunsii commented Jan 9, 2024 • edited by aklinker1

Describe the bug

To Reproduce

Expected behavior

Environment

yunsii commented Jan 9, 2024 • edited

aklinker1 commented Jan 9, 2024 • edited

yunsii commented Jan 9, 2024

aklinker1 commented Jan 9, 2024

aklinker1 commented Jan 9, 2024

yunsii commented Jan 10, 2024

aklinker1 commented Jan 10, 2024

aklinker1 commented May 3, 2024

yunsii commented Jan 9, 2024 •

edited by aklinker1

yunsii commented Jan 9, 2024 •

edited

aklinker1 commented Jan 9, 2024 •

edited