Webpack alias "not a directory"

default discord avatar
joelcorey10 months ago
5

I am getting the following error trying to setup webpack aliases.


Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/home/joel/dev/payload-bigtrashpanda-cms/src/collections/hooks/socialMediaPost.js'

Using

https://payloadcms.com/docs/admin/webpack#aliasing-server-only-modules

I am trying to eventually talk to the Facebook API. For now, I will just settle for a console.log of "Hello Payload!"



const createSocialMediaPostPath = path.resolve(__dirname, 'collections/hooks/socialMediaPost.js')
const mockModulePath = path.resolve(__dirname, 'collections/mocks/emptyObject.js');

from my config



admin: {
    user: Users.slug,
    webpack: (config) => ({
            ...config,
            resolve: {
                ...config.resolve,
                alias: {
                    ...config.resolve.alias,
                    [createSocialMediaPostPath]: mockModulePath,
                }
            }
        })


Also, I wanted to paste in the entire thing but Discord won't let me and is trying to get me to buy Discord Nitro.

  • discord user avatar
    jarrod_not_jared
    10 months ago

    and you are using JS not TS right? Either way you can omit the file extenstion from the

    createSocialMediaPostPath

    path

  • default discord avatar
    joelcorey10 months ago

    I am still getting:

    ERROR in ./src/collections/Posts.ts 1:0-54
    Module not found: Error: Can't resolve './hooks/socialMediaPost' in '/home/joel/dev/payload-bigtrashpanda-cms/src/collections'
    
    webpack compiled with 1 error
    Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/home/joel/dev/payload-bigtrashpanda-cms/src/collections/hooks/socialMediaPost.js'


    Here is a screen of what I am working with and my directory structure if that helps



    No matter what combination I try, if the hooks are in the collections folder it does not work and give me

    webpack compiled with 1 error
    Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir

    but if I place the hooks and mocks folder in the "root" src folder AND get rid of the file extension as @jarrod_not_jared instructed, then it works as intended. No idea why as this Webpack alias thing is ... ridiculous.



    Attached image of the payload config with working directory structure.

    Screenshot_20230728_140832.png
    Screenshot_20230728_145710.png
  • discord user avatar
    jarrod_not_jared
    10 months ago

    Well what you have in the first screenshot will not work, you are trying to alias the whole folder, but that’s not how the webpack bundler works. When webpack goes to bundle your code into a single file that the browser can read, it can’t contain paths to files with server code or else it will resolve and add that code to the bundle, i.e. the Facebook API SDK.



    So what the aliases do, is when webpack sees an import it first checks to see if it should resolve the file by path with an alias. If an alias is found, then webpack will load your alias file(the mock file here) instead of the server file. This keeps server code out of the browser bundle.



    I said to keep the file path off because it is just easier, you can write the file in TS, and then when it’s built (into JS), the same alias works and you only need the 1 instead of 1 for JS and 1 for TS.



    I hope this helps clear some of it up for you!

  • default discord avatar
    joelcorey10 months ago

    It does indeed! Thank you so much!

  • discord user avatar
    jarrod_not_jared
    10 months ago

    Awesome!

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.