Cannot find module '__STATIC_CONTENT_MANIFEST'

whoabuddy commented 1 year ago

While trying to migrate an API that's working on Service Workers to the new Module Workers format we're seeing some issues while following the documentation in the README.

The main goal here is to create an API that will also upload a folder of static assets, primarily used for a landing page and openAPI documentation. Any pattern that does not match a static asset is redirected to the itty-router.

What's working

The older working implementation is here and you can see an example of the content below:

static file that matches pattern: https://api.citycoins.co/openapi.yml
static (using file above as src): https://api.citycoins.co/docs
API route handled by itty-router: https://api.citycoins.co/mia/tools/get-full-city-configuration

The wrangler.toml configuration handles the upload of the assets to KV, and the main index file handles matching the download or sending the request to the router.

What's not working

There were a few roadblocks when trying to set this up from scratch again, and the newer implementation is located here.

What's been done so far:

set up new project with wrangler generate from ⛅️ wrangler 2.7.1
migrated workers code from services workers to module format
installed all necessary dependencies and copied folder for static assets
tested both locally and by publishing with a few errors along the way
tested various approaches to the problem, more details below

Before getting into the nitty-gritty, this does feel very close to an answer, however documentation varies both on accuracy and relevancy depending on the source. Any help is greatly appreciated and hopefully this will serve as a good source of info for others as well.

Problems encountered

This line from the README results in an error - no module found!

import manifestJSON from "__STATIC_CONTENT_MANIFEST";
Cannot find module '__STATIC_CONTENT_MANIFEST' or its corresponding type declarations.ts(2307)

Using the variable later it shows undefined (as expected): SyntaxError: "undefined" is not valid JSON and returns HTTP 500 as a result.

To work around this we've tried:

adding a KV binding to the worker and using it instead of the default
adding definitions to Env in src/index.ts for the STATIC references
various configuration tweaks based on other issues described online

There was one point where we were seeing 404s because no KV binding was present in wrangler.toml, but the main issue we keep coming back to is no way to list out the static files stored in KV to match the request.

Generating a manual manifest feels messy and given the limited documentation (or accurate documentation, given recent changes) we can find, this already feels like a gray area in the first place.

The assets get uploaded and those uploads are detected on subsequent runs, e.g. below by adding a new file:

Reading ms-icon-70x70.png...
Skipping - already uploaded.
Reading openapi-test.yml...
Uploading as openapi-test.1e6889318c.yml...
Reading openapi.yml...
Skipping - already uploaded.
↗️  Done syncing assets

Other Issues

Based on what was reported in cloudflare/workers-sdk#4969 and comments about others running this way, it feels like the configuration above should work?

Cherry commented 1 year ago

Sorry I missed this issue! You shouldn't need to do any manual work for __STATIC_CONTENT_MANIFEST - wrangler should just handle this for you if you're not doing a custom build or anything fancy like that.

Do you have a minimal repro where I could take a look at this? It seems like the linked repo has moved to Pages which is likely a better long-term solution anyway, since as you can tell this repo isn't maintained much outside of by myself as a hobby.

whoabuddy commented 1 year ago

No problem, turns out there is always another way :slightly_smiling_face:

Do you have a minimal repro where I could take a look at this? It seems like the linked repo has moved to Pages which is likely a better long-term solution anyway, since as you can tell this repo isn't maintained much outside of by myself as a hobby.

Yes, this was the direction we ended up going after reading through the docs and looking for the best way to implement the same idea. There were some headaches along the way but now I think I understand how Pages enables what I was used to doing before with workers.

For reproducing the issue though - I think everything mentioned above was as of commit d001a79ddcbbf39d55ff6298feebc97a8ddc7b1f before the migration to pages.

You shouldn't need to do any manual work for __STATIC_CONTENT_MANIFEST - wrangler should just handle this for you if you're not doing a custom build or anything fancy like that.

My best guess is something weird happened along the way with the configuration, based on the fact that I tried different combinations of settings to see if anything would work. Feel free to close this issue if it feels like too much of a wild goose chase unless others are experiencing the same.

ceabq commented 1 year ago

Same problem here, code is able to run, but vscode is annoying me with this error.

Cherry commented 1 year ago

Same problem here, code is able to run, but vscode is annoying me with this error.

Do you have a manifest.d.ts file or similar with this contents?

declare module "__STATIC_CONTENT_MANIFEST" {
  export default string;
}

Adding this should keep TypeScript happy.

ceabq commented 1 year ago

Same problem here, code is able to run, but vscode is annoying me with this error.

Do you have a manifest.d.ts file or similar with this contents?
declare module "__STATIC_CONTENT_MANIFEST" {
  export default string;
}
Adding this should keep TypeScript happy.

Thank you, that works. I'm using // @ts-ignore to ignore the error before.

penalosa commented 5 months ago

It sounds like this has been resolved by moving to Pages. If anyone runs it similar issues in the future, feel free to open a new issue and we can take a look.

cloudflare / workers-sdk