28:null 29:["$","title",null,{"children":"Module require debugger | Shipeng Sun | Observable"}] 2f:T829,moduleName ? html` ${[basicRequire, dynamicImport, skypackImport, bundleRun, scavengingForLinks, globalLeaksPattern] .filter(Boolean) .filter(a => a.type == success).length > 0 ? '' : pkg instanceof Error ? html`

This module doesn’t seem to be published on NPM. Perhaps the module name is incorrect or mistyped, or the module’s author hasn’t published it yet?

` : html`

😭 Okay, so: nothing worked. We tried UMD, we tried bundling, we tried searching for random files that might be loadable. Unfortunately, no 🎲. This doesn’t mean nothing can work - this is an automated tool and doesn’t have human intuition. You might want to browse the files this module exposes on unpkg to see if any of them look viable. Or you might want to ask the module’s author whether there’s a file that people can use with browsers. Where there’s a will there’s a way: good luck. (This also means that all of the grayed-out solutions below won’t work.)

Below are multiple strategies for loading this library. Those with a thumbs-up work, those with a frowny face don’t, and the ones with a shrug work, but have caveats.

${d3.sort( [basicRequire, dynamicImport, skypackImport, bundleRun, scavengingForLinks, globalLeaksPattern].filter(Boolean), d => d.type != success ) .map(({code, type, description}) => html`

${emojis[type]} ${code}

${md`${description}`}

`)}

` : html`Enter a module name above and click Go to get started`30:T5e4,pkg && html`

	entry point	description
${!!pkg.main ? `✓` : ''}	main	The original one: this was the first kind of entry point invented, and for a long time it was almost always code that would run in the Node.js environment.
${!!pkg.unpkg ? `✓` : ''}	unpkg	An entry point invented by unpkg, the web-friendly npm content delivery system. It’s usually a really good sign if we see one of these, because they’re supposed to be UMD files, which are very web-friendly.
${!!pkg.module ? `✓` : ''}	module	The entry point of the future! In this one should lie a ES Module - a new module syntax for JavaScript that’s built into the language itself. It’s great if we find one of these, but not a guaranteed win, because support and interoperability of this module type is pretty scarce.

Sometimes a package.json won’t have any of these, and that's fine. In that case, we are left to assume that the entry point is index.js

`31:T62b,globalLeaksPattern = { yield undefined; if (!moduleName || !pkg.version) return; const permaurl = (await fetch(`https://unpkg.com/${moduleName}`)).url; let iframe = document.createElement("iframe"); document.body.appendChild(iframe); try { let beforeKeys = new Set(Object.keys(iframe.contentWindow)); iframe.contentWindow.document.open(); let script = iframe.contentWindow.document.appendChild( iframe.contentWindow.document.createElement("script") ); script.src = permaurl; await new Promise((resolve, reject) => { script.addEventListener("load", resolve); script.addEventListener("error", reject); }); let newKeys = Object.keys(iframe.contentWindow) .filter(k => !beforeKeys.has(k)) .filter(k => !["ENV", "require"].includes(k)); iframe.contentWindow.document.close(); if (newKeys.length) { yield { type: success, code: `require('${permaurl.replace( "https://unpkg.com/", "" )}').catch(() => window[${JSON.stringify(newKeys[0])}])`, description: md`The ‘global leak’ pattern. It’s a doozy. Essentially a module that works in node, and works as a script tag, but doesn’t work with any specific loader. So we use \`require()\`, expect it to fail, and then grab the global that it adds to the window. There may be multiple variables attached to the window that way, so for completeness, here are all of them: ${newKeys.map((k, i) => html`${i === 0 ? '' : ', '}${DOM.text(k)}`)}.` }; } } catch(e) {} }32:[] 2c:{"id":"0795776276d4dd1a","slug":null,"title":"Module require debugger","thumbnail":"28f27ac7858c515c8c4a3de2f7eca898710fdceab57e0d17fe70d0cf812aea60","access_level":"public","create_time":"$D2023-01-29T19:18:02.136Z","update_time":"$D2024-01-09T22:13:30.048Z","view_time":null,"first_public_time":"$D2023-01-29T19:18:02.136Z","fork":{"id":"8bb4872a89cb6064","slug":"module-require-debugger","title":"Module require debugger","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":"starter_2024"},"version":791,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null}],"members":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"7cfd303a81cea969","slug":"web-basics","title":"Leaflet for WebGIS","owner":{"id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun"}},"type":"notebook","body":{"title":"Module require debugger","cells":[{"id":0,"value":"# Module require debugger\n\n${!importSupport ? `**Note:** your browser doesn't support [dynamic import()](https://caniuse.com/#feat=es6-module), so this debugger will never recommend that option.` : ''}\n\nLoading modules is tricky! Because modules are tricky, let's try to make handling them a little bit easier. Enter a module into the moduleName field below, click Go, and see which module-loading strategies will work.\n","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"viewof moduleName = text({\n placeholder: \"module-name\",\n description:\n \"Enter the module’s name, as it is on npm. For example, try wcag-contrast.\",\n submit: \"Go\",\n value: params.get(\"module\") || null\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`## Analysis\n\nOkay, what kind of entry points do we have here! “Entry point” is a fancy term for a property in package.json that points to a file that can be initially included as the module’s starting point. That entry point might require other files, but it’s the key starting point.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"basicRequire = {\n yield undefined;\n if (!moduleName) return;\n const permaurl = (await fetch(`https://unpkg.com/${moduleName}`)).url.replace('https://unpkg.com/', '');\n const res = {\n code: `require('${permaurl}')`,\n description: `This is the default, simplest method to require a module. It uses [d3-require](https://github.com/d3/d3-require) behind the scenes, pulls from JsDelivr by default, and supports UMD and AMD modules.`\n };\n try {\n await require(permaurl);\n yield {\n type: success,\n ...res\n }\n } catch (e) {\n yield {\n type: failure,\n ...res\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"importSupport = { try { eval(`import('test')`); return true; } catch (e) { return false; } }","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"dynamicImport = {\n yield undefined;\n if (!moduleName || !importSupport) return;\n const permaurl = (await fetch(`https://unpkg.com/${moduleName}?module`)).url;\n const res = {\n code: `import('${permaurl}')`,\n description: `This is the way of the future: it’s the only technique in the list that actually has your browser deal with importing modules, instead of bundling them all into one file. Advantage is that it’s super cool, and excellent for debugging - no need for sourcemaps, the files are more or less verbatim. The disadvantage is that browser support is [super slim](https://caniuse.com/#feat=es6-module).`\n };\n try {\n await eval(`import('${permaurl}')`);\n yield {\n type: success,\n ...res\n }\n } catch (e) {\n yield {\n type: failure,\n ...res\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"skypackImport = {\n yield undefined;\n if (!moduleName || !importSupport) return;\n const permaurl = `https://cdn.skypack.dev/${pkg.name}@${pkg.version}?min`;\n const res = {\n code: `import('${permaurl}')`,\n description: `Some modules are not importable directly, but [Skypack](https://www.skypack.dev) is able to prepare them. Bonus: it saves an optimized version for each browser in a cacheable URL. Remove \\`?min\\` to get the full source.`\n };\n try {\n await eval(`import('${permaurl}')`);\n yield {\n type: success,\n ...res\n }\n } catch (e) {\n yield {\n type: failure,\n ...res\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"bundleRun = {\n yield undefined;\n if (!moduleName || !pkg.version) return;\n const res = {\n code: `require('https://bundle.run/${pkg.name}@${pkg.version}')`,\n description: `[bundle.run](https://bundle.run/) is an online version of [packd](https://github.com/Rich-Harris/packd), which serves one purpose: to bundle modules. It runs [rollup](https://rollupjs.org/) and [browserify](http://browserify.org/) on the fly to combine multiple JavaScript files into one bundle that’s easily consumed by web browsers. The advantage is that it often works on stubborn modules that the author never expected to be run in a browser environment. The disadvantage is that it isn’t guaranteed to be as fast as unpkg.`\n };\n try {\n await require(`https://bundle.run/${moduleName}@${pkg.version}`);\n yield {\n type: success,\n ...res\n }\n } catch (e) {\n yield {\n type: failure,\n ...res\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"scavengingForLinks = {\n yield undefined;\n if (!moduleName || !pkg.version) return;\n const meta = await (await fetch(`https://unpkg.com/${moduleName}/?meta`)).json();\n function collectPaths(root) {\n let list = [];\n function collect(node) {\n node.files.forEach(f => {\n if (f.type == 'file') list.push(f.path);\n else collect(f);\n });\n }\n collect(root);\n return list;\n }\n let candidates = collectPaths(meta).filter(p => p.match(/(umd|amd|dist)/) && p.match(/js$/));\n for (let candidate of candidates) {\n try {\n await require(`${moduleName}@${pkg.version}${candidate}`);\n yield {\n type: success,\n code: `require('${moduleName}@${pkg.version}${candidate}')`,\n description: `This is _scavenging for dists_ mode: we looked through the files in this module and found one that mentioned dist, amd, or umd, and that worked.`\n }\n } catch (e) {}\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"pkg = {\n if (!moduleName) return undefined;\n try {\n return await (await fetch(`https://unpkg.com/${moduleName}/package.json`)).json();\n } catch (e) {\n return new Error('This package is not published on npm');\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"document.addEventListener('click', e => {\n if (e.target.className === 'copiable') {\n copy(e.target.textContent);\n e.target.classList.add('copied');\n setTimeout(() => e.target.classList.remove('copied'), 500);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"emojis = ({\n [failure]: '☹️',\n [success]: '👍',\n [maybe]: '🤷‍'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"success = Symbol('success')","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"failure = Symbol('failure')","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"maybe = Symbol('maybe')","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"omit = Symbol('omit')","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"function copy(text) {\n var fakeElem = document.body.appendChild(document.createElement('textarea'));\n fakeElem.style.position = 'absolute';\n fakeElem.style.left = '-9999px';\n fakeElem.setAttribute('readonly', '');\n fakeElem.value = text;\n fakeElem.select();\n try {\n return document.execCommand('copy');\n } catch (err) {\n return false;\n } finally {\n fakeElem.parentNode.removeChild(fakeElem);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"params = new URL(document.baseURI).searchParams","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"