Browser fallbacks frequently needed?

default discord avatar
7 months ago

I'm writing a plugin that involves connecting to a Microsoft SQL Server for data to import. This has lead me to what I would hope to be the simple use of the



Instead it has lead me to having to setup many fallback resolutions to


















, and


This seems to stem from payload compiling scripts for browser usage when they don't necessarily need to do so. For instance, the


package I'm calling is on a custom endpoint I've defined; meaning the response is handled on the server... therefore no browser side JavaScript should be necessary right?

Perhaps I'm misunderstanding why this is happening but any feedback on this would be helpful. Maybe I'm just doing something incorrectly to make Payload behave in this manner?

Thanks in advance!

  • discord user avatar
    Payload Team
    7 months ago

    oh nono don't go the fallback route, it's absolute pain.

    Check out this:

    which should be exactly what you need

    Webpack is too dumb at noticing something is server-only, so you gotta tell it with aliasing to not include certain files in client-side code

    I'm doing it like this which is a bit nicer if you have to alias multiple files:

    const m = path.resolve(__dirname, 'mocks/emptyObject.js');
    function r(str) {
      return path.resolve(__dirname, str);
    function generateAliases() {
      return {
        [r('endpoints/cleanContent/endpoint.ts')]: m,
        [r('endpoints/cleanContent/index.ts')]: m,
        [r('endpoints/completion/index.ts')]: m,
        [r('endpoints/serps/endpoint.ts')]: m,
        [r('endpoints/serps/index.ts')]: m,
        [r('endpoints/serps/types.ts')]: m,
        [r('endpoints/summarizeContent/endpoint.ts')]: m,
        [r('endpoints/summarizeContent/index.ts')]: m,
        [r('endpoints/tokenLength/endpoint.ts')]: m,
        [r('endpoints/tokenLength/index.ts')]: m,
        [r('endpoints/lexicalToMarkdown/index.ts')]: m,
        [r('jobs/index.ts')]: m,
        [r('jobs/serps/SerpCreator.ts')]: m,
        [r('jobs/serps/SiteCreator.ts')]: m,
        [r('jobs/serps/Status.ts')]: m,
        [r('jobs/embeddings/EmbeddingsJob.ts')]: m,
        [r('jobs/summaries/SummarizeJob.ts')]: m,
    export default buildConfig({
      admin: {
        webpack: (config) => {
          const newConfig = {
            resolve: {
              ...(config.resolve || {}),
              alias: {
                ...(config.resolve.alias || {}),
                react: path.resolve(__dirname, '../node_modules/react'),
          return newConfig;

    even for custom endpoints, webpack needs to be told to alias those like a baby

    Sadly no way to have an "endpoints" / "server" folder and just alias everything in that folder automatically, as to make it all server-side and not worry about it.

  • default discord avatar
    7 months ago

    oh! didn't expect a response so quickly, lol. Thank you, I'll review this closely 🙇‍♂️

    @alessiogr thanks for providing this feedback. It's good to know that we have to work around webpack's short-comings in this case.

    in my case I just went with this type of solution

    alias: {
        ...[ 'constants', 'stream', 'url', 'util', 'os', 'timers', 'dns', 'dgram', 'fs', 'child_process' ]
        .reduce((previousValue, currentValue) => {
            return {
                [currentValue]: path.resolve(__dirname, "mocks/emptyObject.js")
        }, {})

    seems to properly not run on the client and only on the server now.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

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