dynamic import in puppeteer

[Jamesernator]

Because esm transforms import() in all source locations this can break the use of import() that occurs with a puppeteer function. This has made it impossible to test my library with ava as it depends on being able to use import() inside page.evaluate.

A simple minimal example that breaks:

import puppeteer from "puppeteer";

async function main() {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  const values = await page.evaluate(async () => {
    const _ = await import("https://unpkg.com/lodash-es@4.17.11/lodash.js?module")
    return _.zip([1,2,3,4], [5,6,7,8])
  })
  console.log(values)
  await browser.close()
}

main()

With --experimental-modules this works fine but with -r esm it fails with Error: Evaluation failed: ReferenceError: _c72‍ is not defined.

Probably the best way to fix it would be to patch functions .toString method so that it returns the original source text rather than the transformed source text.

[jdalton]

Hi @Jamesernator!

Wrapping functions is something I could do but I want to avoid until there’s more demand. Until then esm may not be the best thing for your situation.

Update:

Since puppeteer is a popular utility, I'll investigate esm shimming puppeteer to scrub its strings.

Update:

Patch https://github.com/standard-things/esm/commit/c23140473ccedf6bd6b73be53677d0b02bd2552d; https://github.com/standard-things/esm/commit/38a6b7d7f776211c6353f588504544ae99fc5ce5

Update:

esm v3.2.21 is released :tada:

[Jamesernator]

Awesome thanks for this.