[Bug]: build problems using puppert-core in extensions

[elineeen]

Minimal, reproducible example

vite build

Error string

PassThrough" is not exported by "__vite-browser-external”

Bug behavior

• [ ] Flaky
• [ ] PDF

Background

Currently i'm building the extension app with vite using pptr-core, and stucked in some modules whether using the example rollup config or not(since node-resolve is already a default vite built-in ). Though i can add externals to rollupOptions to skip these problems in building phase ,i'm not sure these api will works fine without some sort of node polyfills

Expectation

maybe a better bundle example or some compatible browser api replacement?

Reality

currently the build process works fine after adding these externals

Puppeteer configuration file (if used)

No response

Puppeteer version

22.12.1

Node version

18.17.0

Package manager

yarn

Package manager version

3.6.1

Operating system

Windows

[github-actions[bot]]

This issue was not reproducible. Please check that your example runs locally and the following:

• Ensure the script does not rely on dependencies outside of puppeteer and puppeteer-core.

• Ensure the error string is just the error message.

  • Bad:

    Error: something went wrong
    at Object.<anonymous> (/Users/username/repository/script.js:2:1)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

  • Good: Error: something went wrong.

• Ensure your configuration file (if applicable) is valid.
• If the issue is flaky (does not reproduce all the time), make sure 'Flaky' is checked.
• If the issue is not expected to error, make sure to write 'no error'.

Once the above checks are satisfied, please edit your issue with the changes and we will try to reproduce the bug again.

---

Analyzer run

[OrKoN]

Have you tried this example https://github.com/puppeteer/puppeteer/tree/main/examples/puppeteer-in-browser? It’s also important to import the browser-specific entrypoint like in the example and not the main puppeteer-core entrypoint.

[elineeen]

I get your point , but in my case i use connect api in my chrome extension with transport options just like the extension demo instead of the examples which using endpoint. Does this affect build phase?

[OrKoN]

There is an example specifically for extension: https://github.com/puppeteer/puppeteer/tree/main/examples/puppeteer-in-extension. The rollup config https://github.com/puppeteer/puppeteer/blob/main/examples/puppeteer-in-extension/rollup.config.mjs

It builds for me with the following log:

❯ npm run build

> puppeteer-in-extension@1.0.0 build
> rollup -c && cp manifest.json out/

background.js → out...
(!) "this" has been rewritten to "undefined"
https://rollupjs.org/troubleshooting/#error-this-is-undefined
../../packages/puppeteer-core/lib/esm/puppeteer/common/HandleIterator.js
4:  * SPDX-License-Identifier: Apache-2.0
5:  */
6: var __addDisposableResource = (this && this.__addDisposableResource) || function (env, value, async) {
                                  ^
7:     if (value !== null && value !== void 0) {
8:         if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
...and 3 other occurrences
../../packages/puppeteer-core/lib/esm/puppeteer/common/QueryHandler.js
4:  * SPDX-License-Identifier: Apache-2.0
5:  */
6: var __addDisposableResource = (this && this.__addDisposableResource) || function (env, value, async) {
                                  ^
7:     if (value !== null && value !== void 0) {
8:         if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected.");
...and 3 other occurrences
../../packages/puppeteer-core/lib/esm/puppeteer/cdp/ElementHandle.js
4:  * SPDX-License-Identifier: Apache-2.0
5:  */
6: var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
                            ^
7:     var useValue = arguments.length > 2;
8:     for (var i = 0; i < initializers.length; i++) {
...and 3 other occurrences

...and 28 other files
created out in 493ms

I think those warnings are not causing any issues.

[OrKoN]

@elineeen could you perhaps create a demo project on GitHub with your configuration and the bundler so that we could try it out?

[elineeen]

@OrKoN sure, i've created a demo project ,try it with node v18.17.0

[OrKoN]

So it looks like vite does not allow restricting the module resolution to the provided list (our example only allows 'puppeteer-core' and not other modules). In general, externalizing those dependencies should be alright since they are for Node only and only loaded dynamically if Puppeteer runs in Node. Is there a way to configure Vite to not resolve and bundle dynamically imported modules?

[OrKoN]

I think we could improve on Puppeteer side to not require so much customization.