Payload build command does not return

[rishi-afk]

Bug Report

Expected Behavior

Payload build should successfully build the Payload app.

Current Behavior

yarn dev command outputs this to the console:

Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/home/user/Desktop/app/src/collections/Customer/hooks/CUSTOMER_CREATED.ts'
Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/home/user/Desktop/app/src/collections/Customer/hooks/CUSTOMER_UPDATED.ts'

payload build command keeps on running and does not return.

Detailed Description

I have two hooks collections/Customer/hooks/CUSTOMER_CREATED.ts and collections/Customer/hooks/CUSTOMER_UPDATED.ts

This is my payload.config.ts file

const customerCreatedHookPath = path.resolve(
    __dirname,
    "collections/Customer/hooks/CUSTOMER_CREATED.ts"
);

const customerUpdatedHookPath = path.resolve(
    __dirname,
    "collections/Customer/hooks/CUSTOMER_UPDATED.ts"
);
const mockModulePath = path.resolve(__dirname, "mocks/emptyObject.ts");

export default buildConfig({
    graphQL: { disable: true },
    admin: {
        user: Admin.slug,
        components: { graphics: { Icon: Icon, Logo: Logo } },
        css: path.resolve(__dirname, "ui/stylesheet.scss"),
        webpack: (config) => ({
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    [customerCreatedHookPath]: mockModulePath,
                    [customerUpdatedHookPath]: mockModulePath,
                },
            },
        }),
    },
    collections: [Admin, Customers, Products, Orders],
});

[jmikrut]

Hey @rishi-afk — this actually appears to be a problem with your webpack aliases.

Typically when we see errors like this, it's due to an aliased file not being able to be found.

const mockModulePath = path.resolve(__dirname, "mocks/emptyObject.ts");

Does this file exist? If so, try and remove the .ts extension from the path to see if that works. Or try and use a .js mock file.

I am going to move this to a Discussion though as this is definitely Webpack-related and should be able to be solved with a little trial and error. Let me know what you think about the above!

[rishi-afk]

Hi @jmikrut, thanks for the reply. Quick update, I removed the .ts extension from the module path, and the webpack is now getting successfully compiled but only when I do yarn dev. Although, while doing yarn build it is still getting stuck forever without an error. Any idea what might be going wrong?

[rishi-afk]

Adding to that, the webpack does actually outputs all the files in the build folder, however never returns. Is webpack continuously waiting for changes to rebuild by using the dev config and watching for changes?

[rishi-afk]

After digging in more, I have realized the payload build gets stuck when I import an instance of a server-side library (exported as default from another folder in src) into the hook file which is aliased in the webpack config.

To give some more clarity here is src/payload.config.ts

import { buildConfig } from "payload/config";
import path from "path";
import Admin from "./collections/Admin";
import Customers from "./collections/Customer";
import Icon from "./ui/icon";
import Logo from "./ui/logo";

const customerCreatedHookPath = path.resolve(
    __dirname,
    "collections/Customer/hooks/CUSTOMER_CREATED"
);

const customerUpdatedHookPath = path.resolve(
    __dirname,
    "collections/Customer/hooks/CUSTOMER_UPDATED"
);

const mockModulePath = path.resolve(__dirname, "mocks/emptyObject");

export default buildConfig({
    serverURL: "http://localhost:3000",
    admin: {
        user: Admin.slug,
        components: { graphics: { Icon: Icon, Logo: Logo } },
        css: path.resolve(__dirname, "ui/stylesheet.scss"),
        webpack: (config) => ({
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    [customerCreatedHookPath]: mockModulePath,
                    [customerUpdatedHookPath]: mockModulePath,
                },
            },
        }),
    },
    collections: [Customers, Admin],
    typescript: {
        outputFile: path.resolve(__dirname, "payload-types.ts"),
    },
});

Here is the hook file src/collections/Customer/hooks/CUSTOMER_CREATED.ts

import { CollectionAfterChangeHook } from "payload/types";
import publisher from "../../../mq/publisher";  **This is the line when imported payload build gets stuck. Payload build succeeds if we comment this line**

const CUSTOMER_CREATED: CollectionAfterChangeHook = async ({
    doc,
    operation,
}): Promise<void> => {
    if (operation === "create") {
        await publisher.publish("CUSTOMER_CREATED", "", doc); **Payload build succeeds if we comment this line**
    }
};

export default CUSTOMER_CREATED;

Here is the src/mq/publisher.ts file

import { ConfirmChannel } from "amqplib";
import connection from ".";

const publisher = connection.createChannel({
    json: true,
    setup: (channel: ConfirmChannel) => {
        return Promise.all([
            channel.assertExchange("CUSTOMER_CREATED", "fanout", {
                durable: true,
            })
        ]);
    },
});
export default publisher;

Here is the src/mq/index.ts file

import amqp from "amqp-connection-manager";
const url = process.env.RABBITMQ_URI || "amqp://localhost:5672";
const connection = amqp.connect(url);
export default connection;

[jmikrut]

Hey @rishi-afk — here are some thoughts for you.

I believe that the fact that your build process is not returning is related to your project's code somewhere.

First, a clarification:

When you use Webpack aliases to exclude server-side files from Webpack, that only affects the admin UI bundle. Your imported modules will still be loaded and executed on the server when you run Payload, or when you build—as when you build, your entire Payload config is loaded, sanitized, and validated.

By looking at your code, I bet that your src/mq/index.ts file is causing your Node process to "stay alive" - as in, the connection within that file does not close, which keeps your process alive. You may need to re-architect how you export that connection. I would probably consider opening that connection in your server file, or only importing in in cases where your server is running which would alleviate the issues of it holding your Node process alive.

Is there anything that you could do to rearchitect the way that the above file exports an open connection?