The project would not run because it couldn't find the glob module, and the import method did not work.

First, I want to say THANK YOU for sharing your project. This got me 'unstuck' trying to implement the Netlify Visual Editor in my project and was much easier to follow than the documentation. (•̀ᴗ•́)و ̑̑

I encountered this error after cloning and trying to run the project:

Import trace for requested module:
./src/pages/[[...slug]].tsx
 ⨯ ./src/utils/content.ts:3:1
Module not found: Can't resolve 'glob'
 1 | import * as fs from 'fs';
 2 | import path from 'path';
> 3 | import glob from 'glob';
 | ^

I did not see glob in the packages.json, so I added it. However, I still got an error when I restarted the dev server:

 ⨯ TypeError: Cannot read properties of undefined (reading 'sync')
 at contentFilesInPath (src/utils/content.ts:29:11)
 at allContent (src/utils/content.ts:106:18)
 at getStaticPaths (src/pages/[[...slug]].tsx:37:30)
 27 | function contentFilesInPath(dir: string) {
 28 | const globPattern = `${dir}/**/*.{${supportedFileTypes.join(',')}}`;
> 29 | return glob.sync(globPattern);
 | ^
 30 | }

So I commented out the ESM import glob from 'glob'; and used a named import import * as glob from 'glob'; and everything worked as expected.

I don't know if this has any bearing on the issue, but I use pnpm instead of npm for package management.