Webpack alias workaround stops working on dev and build after build run

[old-zoomer]

Bug Report

Webpack alias workaround stops working on dev and build after build run. I think I am going crazy here 🤡 #678 #766

Expected Behavior

if yarn dev and yarn build works with no errors
then
cd dist
PAYLOAD_SECRET=secret MONGODB_URI=mongo node server.js
^C
cd ..
yarn dev
works with no errors

Current Behavior

yarn dev and yarn build works with no errors
cd dist
PAYLOAD_SECRET=secret MONGODB_URI=mongo node server.js webpack error
cd ..
yarn dev webpack error, WTF 🤡
rm -rf dist build
yarn dev webpack error, WTF 🤡🤡🤡

Possible Solution

In general this webpack alias workaround is driving me crazy and i spent more of time trying to get it work then actually configuring cms, this looks like v0.1 solution, not v1.0.
Please help me get this this running with some workaround for now.
Ideal solution would be to handle this in a more mature way (not sure if this possible or makes sense considering current setup)

Steps to Reproduce

npx create-payload-app
✔ Project name? … webpack-test
✔ Choose language › typescript
✔ Choose project template › blank
cd webpack-test
yarn add @google-cloud/storage

Add files
src/server-side/storage.ts

import {Storage} from '@google-cloud/storage';

const storage = new Storage();
export async function saveToGoogleStorage(){
    console.log(storage);
}

src/mocks/empty.ts

export default {};

src/collections/Media.ts

import { CollectionConfig } from 'payload/types';
import * as storage from '../server-side/storage';

const Media: CollectionConfig = {
  slug: 'media',
  fields: [],
  hooks: {
    beforeChange: [async () => { await storage.saveToGoogleStorage(); }],
  }
}

export default Media;

Edit file src/payload.config.ts

import { buildConfig } from 'payload/config';
import path from 'path';
// import Examples from './collections/Examples';
import Users from './collections/Users';
import Media from './collections/Media';

const serverCodePath = path.resolve(__dirname, 'server-side/storage.ts');
const mockModulePath = path.resolve(__dirname, 'mocks/empty.ts');

export default buildConfig({
  serverURL: 'http://localhost:3000',
  admin: {
    user: Users.slug,
    webpack: (config) => ({
      ...config,
      resolve: {
          ...config.resolve,
          alias: {
              ...config.resolve.alias,
              [serverCodePath]: mockModulePath,
          }
      }
    })
  },
  collections: [
    Users, Media,
    // Add Collections here
    // Examples,
  ],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts')
  },
});

yarn dev - success
yarn build - success
cd dist
PAYLOAD_SECRET=secret MONGODB_URI=mongo node server.js webpack compiled with 45 errors and 1 warning
cd ..
yarn dev webpack compiled with 45 errors and 1 warning
rm -rf dist build
yarn dev webpack compiled with 45 errors and 1 warning

[jmikrut]

Hey @old-zoomer — we try and keep our issues strictly limited to bugs, but here, this is just a problem with your configuration. I'm going to move this to a discussion.

But, we do understand that this aliasing is not ideal, and we have longer-term plans to fix it similarly to how NextJS eliminates server-side code, but this is quite complex. It's nearing the top of our list of priorities.

In the interim, I am 100% confident that there is just a small issue somewhere.

Question

What are the errors that you are seeing?

Potential Fix 1

Ensure that your mock files are also present and copied over to your /dist folder. They are probably .js files at that point, and you are specifying that in their paths, they are .ts. That is probably the problem. They are .ts in dev, but .js in dist. To fix this, we usually just use .js mocks, so they don't have their filenames changed. 👍

Potential Fix 2

This is more of a best practice than anything, but if you are mocking a module for webpack, the mock should represent the same shape of data that the actual file contains. So, your mock is an empty object, but your actual file is a function. I don't think this is an issue, but it could be.

Potential Fix 3

Try and delete your node_modules/.cache folder. Webpack caches to filesystem for speed, and you might be having a weird webpack caching issue.

Give those a shot! We'll get it sorted and thanks for hanging in there. A more permanent solution is on the way.

[CallMeLaNN]

longer-term plans

Can you provide the link, like issue or roadmap for me to subscribe?

This #1954 takes me a while to understand and get used to it.

[old-zoomer]

I'll try the fixes.

Regarding Fix 2 - I don't think that's the problem, because everything is working fine until I do a build

Here is the error I see

yarn dev
yarn run v1.22.17
$ cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts GOOGLE_APPLICATION_CREDENTIALS=noty-ai-fcbaf76ce2fa.json nodemon
[nodemon] 2.0.19
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts
[nodemon] starting `ts-node src/server.ts`
[16:07:04] INFO (payload): Starting Payload...
[16:07:05] INFO (payload): Payload Admin URL: http://localhost:3000/admin
[16:07:05] INFO (payload): Connected to Mongo server successfully!
webpack built 1fb48cd84ed7be7c5fc8 in 1428ms
WARNING in ./node_modules/retry-request/index.js 76:21-39
Module not found: Error: Can't resolve 'request' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/retry-request'

ERROR in ./node_modules/@google-cloud/paginator/build/src/resource-stream.js 19:17-34
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/paginator/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/@google-cloud/projectify/build/src/index.js 4:17-34
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/projectify/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/bucket.js 22:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

ERROR in ./node_modules/@google-cloud/storage/build/src/bucket.js 26:15-30
Module not found: Error: Can't resolve 'util' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'
Did you mean './util'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/mykola/naughty/noty_monorepo/cms/node_modules/payload/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/bucket.js 35:17-34
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/bucket.js 36:14-28
Module not found: Error: Can't resolve 'url' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/file.js 22:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

ERROR in ./node_modules/@google-cloud/storage/build/src/file.js 27:17-34
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/file.js 29:13-28
Module not found: Error: Can't resolve 'zlib' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
        - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "zlib": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/hash-stream-validator.js 30:17-34
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/nodejs-common/util.js 27:17-34
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src/nodejs-common'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/resumable-upload.js 22:17-34
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/signer.js 18:12-26
Module not found: Error: Can't resolve 'url' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

ERROR in ./node_modules/@google-cloud/storage/build/src/storage.js 21:17-34
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/@google-cloud/storage/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/gaxios/build/src/gaxios.js 24:14-28
Module not found: Error: Can't resolve 'url' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/gaxios/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

ERROR in ./node_modules/google-auth-library/build/src/auth/baseexternalclient.js 17:15-32
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-auth-library/build/src/auth'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/google-auth-library/build/src/auth/downscopedclient.js 17:15-32
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-auth-library/build/src/auth'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 17:24-48
Module not found: Error: Can't resolve 'child_process' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-auth-library/build/src/auth'

ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 18:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-auth-library/build/src/auth'

ERROR in ./node_modules/google-auth-library/build/src/auth/googleauth.js 20:11-24
Module not found: Error: Can't resolve 'os' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-auth-library/build/src/auth'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
        - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "os": false }

ERROR in ./node_modules/google-auth-library/build/src/auth/identitypoolclient.js 18:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-auth-library/build/src/auth'

ERROR in ./node_modules/google-auth-library/build/src/auth/identitypoolclient.js 19:15-30
Module not found: Error: Can't resolve 'util' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-auth-library/build/src/auth'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/google-auth-library/build/src/auth/oauth2client.js 18:15-32
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-auth-library/build/src/auth'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/google-p12-pem/build/src/index.js 10:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-p12-pem/build/src'

ERROR in ./node_modules/google-p12-pem/build/src/index.js 12:15-30
Module not found: Error: Can't resolve 'util' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/google-p12-pem/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/gtoken/build/src/index.js 17:11-24
Module not found: Error: Can't resolve 'fs' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/gtoken/build/src'

ERROR in ./node_modules/gtoken/build/src/index.js 21:15-30
Module not found: Error: Can't resolve 'util' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/gtoken/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/gtoken/node_modules/gaxios/build/src/gaxios.js 24:14-28
Module not found: Error: Can't resolve 'url' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/gtoken/node_modules/gaxios/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

ERROR in ./node_modules/http-proxy-agent/dist/agent.js 15:30-44
Module not found: Error: Can't resolve 'net' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/http-proxy-agent/dist'

ERROR in ./node_modules/http-proxy-agent/dist/agent.js 16:30-44
Module not found: Error: Can't resolve 'tls' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/http-proxy-agent/dist'

ERROR in ./node_modules/http-proxy-agent/dist/agent.js 17:30-44
Module not found: Error: Can't resolve 'url' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/http-proxy-agent/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

ERROR in ./node_modules/https-proxy-agent/dist/agent.js 15:30-44
Module not found: Error: Can't resolve 'net' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/https-proxy-agent/dist'

ERROR in ./node_modules/https-proxy-agent/dist/agent.js 16:30-44
Module not found: Error: Can't resolve 'tls' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/https-proxy-agent/dist'

ERROR in ./node_modules/https-proxy-agent/dist/agent.js 17:30-44
Module not found: Error: Can't resolve 'url' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/https-proxy-agent/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

ERROR in ./node_modules/https-proxy-agent/dist/agent.js 18:33-50
Module not found: Error: Can't resolve 'assert' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/https-proxy-agent/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
        - install 'assert'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "assert": false }

ERROR in ./node_modules/jwa/index.js 5:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/jwa'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/data-stream.js 3:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/data-stream.js 4:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/sign-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/sign-stream.js 7:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/jws/lib/verify-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/jws/lib/verify-stream.js 7:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/jws/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

ERROR in ./node_modules/retry-request/index.js 3:22-39
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/retry-request'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/teeny-request/build/src/agents.js 23:14-28
Module not found: Error: Can't resolve 'url' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/teeny-request/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

ERROR in ./node_modules/teeny-request/build/src/index.js 21:17-34
Module not found: Error: Can't resolve 'stream' in '/Users/mykola/naughty/noty_monorepo/cms/node_modules/teeny-request/build/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

webpack compiled with 45 errors and 1 warning

[jmikrut]

OK yep. can't resolve means that it can't find your mock. Probably because fix #1. This will be it.

Thanks for the error message!

[old-zoomer]

@jmikrut

So I've tried the fixes, and got it working

Fix 2 doesn't seem to change anything, but I''l keep it just in case

Fix 1: I've switched to using .js mock file, but it is still not in dist folder
In order to make this work i need to copy mocks folder to dist manually and then I also need to fix 3 - delete node_modules/.cache. If I do that - then it works.

Just to clarify that I understood you correctly:

Hey @old-zoomer — we try and keep our issues strictly limited to bugs, but here, this is just a problem with your configuration. I'm going to move this to a discussion.

Do you mean that this is not a bug, but expected behaviour?

[old-zoomer]

I've changed the build command so the steps I've described above happen automatically
yarn build:payload && yarn build:server && cp src/mocks dist/mocks && rm -rf mode_modules/.cache

[jmikrut]

OK - if you use the following tsconfig.json, you'll be able to have TS copy your JS files automatically, too:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "strict": false,
    "allowJs": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react",
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "build",
    "src/tests"
  ],
  "ts-node": {
    "transpileOnly": true
  }
}

We will update our create-payload-app package to do this for all new instances of Payload. This is a good call.

An alternative idea, if you don't want "allowJs": true in your tsconfig would be to have a copyfiles script that copies any non-TS files that you rely on over to dist as well. This is a common pattern for many TS projects because tsc doesn't automatically copy over things like scss, svg, etc.

    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,js}\" dist/"

Do you mean that this is not a bug, but expected behaviour?

Yep. This is up to the implementation of a Payload app, moreso than an intrinsic bug to how Payload operates internally. The Payload package itself, at least until we solve this in a more permanent manner, is not able to understand your mocks and structure unless you configure it to. So this is more of a configuration issue than a bug, but regardless, it's a good call and we are going to update our create-payload-app so that people have an easier time with this out of the gate.

Thanks for bringing all of this up. I appreciate it!