Webpack alias "not a directory"

joelcorey12 months ago

5

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

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

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

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

• 

  jarrod_not_jared

  12 months ago

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

  createSocialMediaPostPath

  path

• 

  joelcorey12 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.

  

  
• 

  jarrod_not_jared

  12 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!

• 

  joelcorey12 months ago

  It does indeed! Thank you so much!

• 

  jarrod_not_jared

  12 months ago

  Awesome!