Browser Quick Start error in code pen

[tomByrer]

I decided to try to try my hand at doing the tutorial in CodePen:
https://codepen.io/tomByrer/pen/gKEvYM
But I get Unexpected identifier error for await pfs.mkdir(dir);

I don't think it is my CDN choice: https://codepen.io/tomByrer/pen/wXOyBd

Both Fx Quantum 61 & Chrome 67.0.3396.87 Linux

[billiegoose]

Ah. New to async/await are you? They have a sneaky catch... you can't use await at the top level; it has to be inside an async function. Here's a version that would work:

(async () => {
	window.dir = 'tutorial'
	console.log(dir);
	await pfs.mkdir(dir);
	// Behold - it is empty!
	await pfs.readdir(dir);
})()

But this is so annoying that most examples / tutorials will leave out the (implied) wrapper function. Top-level await is already supported in the Chrome debugger console, and will probably be added to the spec soon.

[billiegoose]

Ah. Sadly this is not the only obstacle you face in this Code Pen! Sadly https://cdn.jsdelivr.net/npm/[email protected]/index.js delivers a Node-only version of the module. (Which is why in my example I ran it through the browserify CDN... which has sadly been slow and crashy of late.) You can use the version of pify hosted on the website though: https://isomorphic-git.github.io/js/pify.js

You're also using the Node version of isomorphic-git, which definitely won't work. You can use this one: https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.umd.min.js

Lastly, you're using the 1.x version of BrowserFS instead of the 2.x version. It looks like jsDelivr doesn't deliver 2.0. You can try https://cdnjs.cloudflare.com/ajax/libs/BrowserFS/2.0.0/browserfs.min.js instead.

And... huh I'm still getting an error,

pen.js:10 Uncaught TypeError: BrowserFS.configure(...) is not a function

Gimme a moment. 🤔

[billiegoose]

Oh I'm an idiot. semicolons.

Here's your working pen!
https://codepen.io/wmhilton/pen/PaLRYR