[Bug?]: Studio - Mailer Template Renderer not picking up installed Renderers (Windows/non-WSL)

[jacebenson]

What's not working?

I'm trying to use the Redwood Studio to develop some email messages, and I came across this issue I mentioned in Discord.

I decided to try to recreate the issue in new setup and see if I can recreate it simply. It reproduces for me. I tried this with both JS and TS. Fails the same way.

The issue is I cannot pick the renderer in the Redwood Studio.

How do we reproduce the bug?

yarn create redwood-app ./redwoodblog
# √ Select your preferred language · **JavaScript**
# √ Do you want to initialize a git repo? · **no** / Yes
# √ Do you want to run yarn install? · no / **Yes**
cd redwoodblog
yarn rw setup mailer
yarn rw build
yarn rw studio
# in a new terminal
yarn rw dev
# open the localhost:4318 and goto the Mailer Templates, you should see the issue

What's your environment? (If it applies)

System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.17.0 - ~\AppData\Local\Temp\xfs-47f42861\node.CMD
    Yarn: 4.4.0 - ~\AppData\Local\Temp\xfs-47f42861\yarn.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @redwoodjs/core: 8.3.0 => 8.3.0
    @redwoodjs/project-config: 8.3.0 => 8.3.0
    @redwoodjs/realtime: 8.3.0 => 8.3.0
    @redwoodjs/studio: 12 => 12.0.0
  redwood.toml:
    [web]
      title = "Redwood App"
      port = 8910
      apiUrl = "/.redwood/functions" # You can customize graphql and dbauth urls individually too: see https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths
      includeEnvironmentVariables = [
        # Add any ENV vars that should be available to the web side to this array
        # See https://redwoodjs.com/docs/environment-variables#web
      ]
    [api]
      port = 8911
    [browser]
      open = true
    [notifications]
      versionUpdates = ["latest"]

Are you interested in working on this?

• I'm interested in working on this

[dthyresson]

@jacebenson The server file should start the watchers

https://github.com/redwoodjs/studio/blob/66304997bd4bce3290edc487ba0fb3189b813051/api/src/server.ts#L106

which then will resync:

https://github.com/redwoodjs/studio/blob/66304997bd4bce3290edc487ba0fb3189b813051/api/src/util/fsWatching.ts#L42

which will look for your mailer config in dist snd upsert th renderers:

https://github.com/redwoodjs/studio/blob/66304997bd4bce3290edc487ba0fb3189b813051/api/src/services/mailRenderers/mailRenderers.ts#L29

Perhaps they don't populate initially?

Could you try while studio is running to make some modification to mailer.js such that it forces a re-synch?

@Josh-Walker-GM any other ideas?

[dthyresson]

Another thing to try @jacebenson is to open up the GraphiQL explorer on Studio -- not the explorer in the Studio - bu there one running within Studio on its port -- the one the web app talks to -- and manually invoke the resyncMailRenderers operation.

That "should" refetch and resync.

[jacebenson]

Okay I tried calling that mutation from the :4318 studio app and I got no change.

mutation {
  resyncMailRenderers
}

However when i run that mutation, i get this error on my studio terminal

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:249:11)
    at defaultLoad (node:internal/modules/esm/load:130:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:553:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:434:56)
    at new ModuleJob (node:internal/modules/esm/module_job:71:27)
    at #createModuleJob (node:internal/modules/esm/loader:447:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:259:34)    
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)        
    at async ModuleLoader.import (node:internal/modules/esm/loader:472:23) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}

This feels like we're getting somewhere.

[dthyresson]

^^^ @Josh-Walker-GM going to need your help/memory here about what might be going on with Studio renderers.

[jacebenson]

I tried this on my ubuntu laptop and ... it just works. I'm not sure where the file loader is loading the file but I believe this is a windows only issue.

[cjreimer]

By the way, I'm seeing this same behavior as well. Note that I'm on Windows as well. I do see the following warning when starting Studio as well, although the features (I haven't tested them all) other than the selection of renderers appear to work.

Importing Server Functions... 
/otel-trace 506 ms
...Done importing in 507 ms
(node:1488) [FSTWRN002] FastifyWarning: The graphqlProxy plugin being registered mixes async and callback styles, which will result in an error in `fastify@5`
(Use `node --trace-warnings ...` to show where the warning was created)
{"level":30,"time":1728602101396,"pid":1488,"hostname":"CENGYS-PC-00006","msg":"Starting OpenTelemetry span processor"}
GraphQL Yoga Server endpoint at graphql

I may have seen a path type error in the console at some point, but can't replicate the console error regarding the path at this point.

[irg1008]

Maybe related to #10752

[dthyresson]

I see, this is now looking like an issue with Windows specifically unless running with WSL. That help us narrow it down. Thanks!

[dthyresson]

As I read through https://github.com/paulmillr/chokidar more, looks like v3 had issues with watching files in Windows and v4 has gotten rid glob use altogether. Might be the cause. Workaround now could be to use WSL until Studio work resumes and perhaps upgrade chokidar to v4? @Josh-Walker-GM thoughts?

[cjreimer]

I can confirm, similar to @10752, that I am getting the following error in the console log:

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
    at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:249:11)
    at defaultLoad (node:internal/modules/esm/load:130:3)
    at ModuleLoader.load (node:internal/modules/esm/loader:553:13)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:434:56)
    at new ModuleJob (node:internal/modules/esm/module_job:71:27)
    at #createModuleJob (node:internal/modules/esm/loader:447:17)
    at ModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:259:34)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:17)
    at async ModuleLoader.import (node:internal/modules/esm/loader:472:23) {
  code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}