Error while accessing e-mail templates preview UI: "Function not found..."

benloeffel · February 15, 2023, 4:45pm

Hello everyone,

I’m encountering an issue while trying to access the preview UI for the Netlify e-mails integration in my project.

Here are the technical specifications of my project:

Netlify CLI: netlify-cli/12.12.0 wsl-x64 node-v18.14.0
Netlify Functions: 1.4.0
Netlify Emails: 1.0.0
Nuxt: 3.2.0

The specific problem I’m encountering is that when I try to access the preview UI using http://localhost:8888/.netlify/functions/emails as mentioned in the documentation, I receive an error message stating:

Function not found…

Here is the full error message:

Request from ::1: GET /.netlify/functions/emails
Response with status 404 in 0 ms.

Here is the log returned by running the netlify build command:

root@example [17:18:30] [~/projects/example] [main *]
-> % netlify dev
root@example [17:18:56] [~/projects/example] [main *]
-> % netlify build

  Netlify Build                                                 
────────────────────────────────────────────────────────────────

❯ Version
  @netlify/build 29.5.5

❯ Flags
  dry: false
  offline: false

❯ Current directory
  /home/root/projects/example

❯ Config file
  No config file was defined: using default values.

❯ Context
  production

❯ Loading plugins
   - @netlify/plugin-emails@1.0.0 from Netlify app

  1. @netlify/plugin-emails (onPreBuild event)                  
────────────────────────────────────────────────────────────────


(@netlify/plugin-emails onPreBuild completed in 701ms)

  2. Build command from Netlify app                             
────────────────────────────────────────────────────────────────

$ npm run generate

> generate
> nuxi generate

<!-- REDACTED -->

✔ You can now deploy dist to any static hosting!                                                                                                                                                                     17:19:14

(build.command completed in 9.3s)

  3. Functions bundling                                         
────────────────────────────────────────────────────────────────

Packaging Functions from netlify/functions directory:
 - triggerRsvpEmail.ts


(Functions bundling completed in 166ms)

  Netlify Build Complete                                        
────────────────────────────────────────────────────────────────

(Netlify Build completed in 11.8s)

Here is the log returned after running the netlify dev command:

root@example [17:20:06] [~/projects/example] [main *]
-> % netlify dev  
◈ Netlify Dev ◈
◈ Injected site settings env var: NETLIFY_EMAILS_DIRECTORY
◈ Injected site settings env var: NETLIFY_EMAILS_SECRET
◈ Injected site settings env var: NETLIFY_EMAILS_PROVIDER
◈ Injected site settings env var: NETLIFY_EMAILS_PROVIDER_API_KEY
◈ Injected site settings env var: NETLIFY_EMAILS_MAILGUN_DOMAIN
◈ Injected site settings env var: NETLIFY_EMAILS_MAILGUN_HOST_REGION
◈ Injected addon env var: NETLIFY_LFS_ORIGIN_URL
◈ Ignored general context env var: LANG (defined in process)
◈ Setting up local development server
◈ Starting Netlify Dev with Nuxt 2

> dev
> nuxi dev

Nuxi 3.2.0
Nuxt 3.2.0 with Nitro 2.2.1

  > Local:    http://localhost:3000/ 
  > Network:  http://172.17.176.14:3000/

ℹ Using Tailwind CSS from ~/assets/css/tailwind.css
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/
✔ PWA icons generated in 546 ms
ℹ Vite client warmed up in 3127ms
✔ Nitro built in 1909 ms
✔ Waiting for framework port 3000. This can be configured using the 'targetPort' property in the netlify.toml
◈ Loaded function triggerRsvpEmail http://localhost:8888/.netlify/functions/triggerRsvpEmail.
◈ Functions server is listening on 35863

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

Observations:

In this blog post, the URL used to access the preview is: http://localhost:8888/.netlify/functions/emails/_preview
In the documentation, the URL used to access the preview is: http://localhost:8888/.netlify/functions/emails
In the netlify build log, during the functions bundling (Step 3) the ./netlify/functions-internal directory is not packaging the function emails/index.ts as shown in the this video.
In the netlify dev log, after setting up a local development server the message ◈ Starting Netlify Dev with Nuxt 2 appears, even though Nuxt 3 is in use

I would greatly appreciate any insights into this issue and any solutions that could help me access the preview UI to work on my e-mail templates.

Thank you in advance for your help.

thorleylt · February 16, 2023, 9:57am

Thanks for raising this. We will get the blog post updated from the original labs release so that it refers to the correct preview URL, thanks for pointing that out.

I will take a look at this and try to reproduce

thorleylt · February 20, 2023, 4:18pm

So I was able to reproduce this with Nuxt 3 (interestingly not with Nuxt 2) and I can see the auto generated email function being removed. I’m going to look into this further and see if anyone can shed some light on where the code is that is cleaning down the functions-internal directory.

thorleylt · February 21, 2023, 10:24am

Just wanted to provide an update to say that we have a fix in mind for this issue, in the way that we generate the email function. We just need to validate that this doesn’t cause any issues for other frameworks before we push out the fix.

benloeffel · February 21, 2023, 10:36am

Hey @thorleylt, thanks for the update. I’m looking forward to it!

thorleylt · February 22, 2023, 1:45pm

We have released an update that should now fix this. You will need to use the latest version of the email integration for it to work.

To do this, disable the emails integration from the Netlify UI and enable it again, which should force your site to use the latest version.

benloeffel · February 22, 2023, 4:42pm

Great, I can confirm the plugin @netlify/plugins-emails@1.0.3 now resolves the issue and packages the function during netlify build process:

  3. Functions bundling                                         
────────────────────────────────────────────────────────────────

Packaging Functions from .netlify/functions-internal directory:
 - emails/index.ts

Packaging Functions from netlify/functions directory:
 - triggerRsvpEmail.ts


(Functions bundling completed in 217ms)

The blog post also appears to have been updated to reference the correct URL.

Lastly, a PR that fixes the remaining issue of the build process detecting Nuxt 2 instead of Nuxt 3 is currently in progress: Nuxt3 is not properly detected · Issue #4813 · netlify/build · GitHub

@thorleylt, thank you for the help!

SamO · February 22, 2023, 4:55pm

Hi @benloeffel i’m happy to hear your issue was resolved. Thanks so much for confirming and sharing this with the community!

visionxdesign · January 17, 2024, 9:44pm

Hi Im having this exact same issue using Astro, is there any solution? thanks!

thorleylt · January 18, 2024, 10:47am

Thanks for reporting this. We will be taking a look.