File path not working on deployment to Vercel (Solved)

Discussions
1

So I wrote out this long post and ended up solving the issue myself. I figured I would post it in case it helps anyone.

I have a utility function that runs on the server to grab an email template when invoked. I’m creating the path as described by the documentation

const publicFolderPath = path.join(process.cwd(), 'src', 'utils', emailTemplates/${template}.html);

This works fine on my local machine both in dev and running build / start. When I deploy to vercel I get the error:

ENOENT: no such file or directory, open ‘/var/task/src/utils/emailTemplates/inquiry-information.html’

my current directory structure looks like this:

PROJECT/
├── .next/
├── node_modules/
├── public/
├── src/
│ ├── app/
│ │ ├── about/
│ │ ├── contact/
│ │ │ ├── contact.module.css
│ │ │ └── page.tsx
│ │ ├── customers/
│ │ ├── privacy-policy/
│ │ ├── terms-of-service/
│ │ ├── actions.tsx
│ │ ├── apple-icon.png
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── icon.png
│ │ ├── icon2.png
│ │ ├── icon3.png
│ │ ├── layout.tsx
│ │ ├── manifest.ts
│ │ ├── page.module.css
│ │ └── page.tsx
│ ├── components/
│ ├── data/
│ ├── types/
│ └── utils/
│ └── emailTemplates/
│ ├── inquiry-information.html
│ └── inquiry.html
│ ├── createEmail.tsx
│ ├── emailTransporter.tsx
│ └── toast.ts
├── .env.local
├── .env.production
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

I’ve also tried putting the templates in the public folder and I’ve had the same issues. Here’s my createEmail file as well:

// node utils
import { promises as fs } from 'fs'; // Use fs to read the file asynchronously
import path from 'path';

// nodemailer
import transporter from './emailTransporter';


// types
import { EmailData } from '@/types/email';



const sendEmail = async (to: string, subject: string, template: string, data: EmailData) => {

    try {


        const publicFolderPath = path.join(process.cwd(), 'src', 'utils', `emailTemplates/${template}.html`);

       
        console.log('public path', publicFolderPath);
        console.log('dirname', __dirname);
        console.log('next path', process.cwd());

        // Read the HTML file
        let htmlTemplate = await fs.readFile(publicFolderPath, 'utf-8');
      

        // loop through the data object and replace what exists
        for (const [key, value] of Object.entries(data)) {
            htmlTemplate = htmlTemplate.replaceAll(`{{${key}}}`, String(value));
        }


        const mailOptions = {
            from: 'privateInfo',
            to: to,
            subject: subject,
            html: htmlTemplate,
        };


        const email = await transporter.sendMail(mailOptions);
        console.log('Email information:', email.messageId);

    } catch (error) {

        if (error instanceof Error) {
            console.error('Failed to send email:', error.message);

        } else {
            console.error('An unknown error occurred while sending email');
        }

        // throw this error to stop the second email from attempting to send 
        throw new Error('<Error occurred in createEmail function>');
    }

};


export default sendEmail;

The fix ended up being needing to add this to the next config file:

experimental: {
        outputFileTracingIncludes: {
            '/**': ['./src/utils/emailTemplates/**/*'],
        },
    },

I suspect it has to do with the build treeshaking the imports and not including files that aren’t explicitly included or linked to in something like an img tag. However that wouldn’t explain how the build works locally. If anyone knows exactly why this fix works and if there’s a better way, or if there’s a way to optimize this option please let me know.

2 Likes
2

:100: You’re awesome for sharing this solution, @operations-greypulse!

I moved this to Community tag to make it easier to find for others :smile:

1 Like
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.