Search code examples
javascriptgoogle-chrome-devtoolsecmascript-2016es6-modules

How do I `import blah from 'http://bar.org/some-esm-module.js'` in the Chrome Devtools JS console?

When I try to use an ESM import from the Chrome devtools / javascript console, it complains:

> import Confetti from 'https://cdn.skypack.dev/canvas-confetti'

Uncaught SyntaxError: Cannot use import statement outside a module

Is there any way to convince the chrome console to execute as type='module' so I can use module statements? Or another way to workaround this that still permits interactive imports of ESM modules for interactive development?

I've been switching to heavily using ESM modules, in particular the large library of NPM ESM modules auto-converted by Skypack. This has worked great in static development, but I'm a heavy REPL / browser devtools user.

Even finding a third-party fakeImport(urlToESM) function I could use to load ESM modules would be a huge productivity improvement for me.

Solution

  • Dynamic import() and top-level await should work:

    const { default: Confetti } = await import('https://cdn.skypack.dev/canvas-confetti');