Getting webpack problem recently | Payload | Page 1

worthy spindle Nov 2, 2023, 12:12 PM

#

ERROR (payload): There was a problem setting up the mock email handler err: { "type": "Error", "message": "getaddrinfo ENOTFOUND api.nodemailer.com", "stack": Error: getaddrinfo ENOTFOUND api.nodemailer.com at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26) "errno": -3008, "code": "ENOTFOUND", "syscall": "getaddrinfo", "hostname": "api.nodemailer.com", "sourceUrl": "https://api.nodemailer.com/user" } webpack build 969c549725538ef93da9 in 2183ms

neon ravineBOT Nov 2, 2023, 12:12 PM

#

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

Community-Help:

worthy spindle Nov 2, 2023, 12:22 PM

#

Once I add util dependency, I am facing the following:
inherits_browser.js:6 Uncaught TypeError: Object prototype may only be an Object or null: undefined
at Function.create (<anonymous>)
at Object.inherits (inherits_browser.js:6:1)
at ./node_modules/jws/lib/data-stream.js (data-stream.js:39:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/jws/lib/sign-stream.js (sign-stream.js:3:18)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/jws/index.js (index.js:2:18)
at webpack_require (bootstrap:24:1)

#

cc: @neon ravine

worthy spindle Nov 2, 2023, 1:03 PM

#

Original Error:
ERROR in ./node_modules/jwa/index.js 5:11-26
2023-11-02 17:59:53 Module not found: Error: Can't resolve 'util' in '/home/node/app/node_modules/jwa'
2023-11-02 17:59:53
2023-11-02 17:59:53 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
2023-11-02 17:59:53 This is no longer the case. Verify if you need this module and configure a polyfill for it.
2023-11-02 17:59:53
2023-11-02 17:59:53 If you want to include a polyfill, you need to:
2023-11-02 17:59:53 - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'

#

2023-11-02 17:59:53 - install 'util'
2023-11-02 17:59:53 If you don't want to include a polyfill, you can use an empty module like this:
2023-11-02 17:59:53 resolve.fallback: { "util": false }
2023-11-02 17:59:53
2023-11-02 17:59:53 ERROR in ./node_modules/jws/lib/data-stream.js 4:11-26
2023-11-02 17:59:53 Module not found: Error: Can't resolve 'util' in '/home/node/app/node_modules/jws/lib'
2023-11-02 17:59:53
2023-11-02 17:59:53 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
2023-11-02 17:59:53 This is no longer the case. Verify if you need this module and configure a polyfill for it.
2023-11-02 17:59:53
2023-11-02 17:59:53 If you want to include a polyfill, you need to:
2023-11-02 17:59:53 - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
2023-11-02 17:59:53 - install 'util'
2023-11-02 17:59:53 If you don't want to include a polyfill, you can use an empty module like this:

#

2023-11-02 17:59:53 resolve.fallback: { "util": false }
2023-11-02 17:59:53
2023-11-02 17:59:53 ERROR in ./node_modules/jws/lib/sign-stream.js 7:11-26
2023-11-02 17:59:53 Module not found: Error: Can't resolve 'util' in '/home/node/app/node_modules/jws/lib'
2023-11-02 17:59:53
2023-11-02 17:59:53 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
2023-11-02 17:59:53 This is no longer the case. Verify if you need this module and configure a polyfill for it.
2023-11-02 17:59:53
2023-11-02 17:59:53 If you want to include a polyfill, you need to:
2023-11-02 17:59:53 - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
2023-11-02 17:59:53 - install 'util'
2023-11-02 17:59:53 If you don't want to include a polyfill, you can use an empty module like this:
2023-11-02 17:59:53 resolve.fallback: { "util": false }
2023-11-02 17:59:53
2023-11-02 17:59:53 ERROR in ./node_modules/jws/lib/verify-stream.js 7:11-26
2023-11-02 17:59:53 Module not found: Error: Can't resolve 'util' in '/home/node/app/node_modules/jws/lib'
2023-11-02 17:59:53
2023-11-02 17:59:53 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
2023-11-02 17:59:53 This is no longer the case. Verify if you need this module and configure a polyfill for it.
2023-11-02 17:59:53
2023-11-02 17:59:53 If you want to include a polyfill, you need to:
2023-11-02 17:59:53 - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
2023-11-02 17:59:53 - install 'util'
2023-11-02 17:59:53 If you don't want to include a polyfill, you can use an empty module like this:
2023-11-02 17:59:53 resolve.fallback: { "util": false }
2023-11-02 17:59:53
2023-11-02 17:59:53 webpack compiled with 4 errors and 1 warning

#

After I update the webpack with util:

admin: {
user: Users.slug,
bundler: webpackBundler(),
webpack: (config) => {
const newConfig = { ...config };
newConfig.resolve = {
fallback: {
util: require.resolve("util/"),
},
};
return newConfig;
},
},

I am facing another issue:
2023-11-02 18:10:01 ERROR in ./node_modules/payload/dist/admin/Root.js 15:62-87
2023-11-02 18:10:01 Module not found: Error: Can't resolve 'payload-config' in '/home/node/app/node_modules/payload/dist/admin'

#

@native cosmos

#

Can you look into above?

native cosmos Nov 2, 2023, 1:27 PM

#

Hmm

#

This is pretty typical of having server components being imported into your config that need to be aliased - the latest one about payload-config is interesting, though.

#

Can you provide more info on your project/config?

worthy spindle Nov 2, 2023, 1:32 PM

#

I just restarted the server. now getting one more error 😦
2023-11-02 18:30:59 [nodemon] starting ts-node src/server.ts -- -I
2023-11-02 18:31:01 [13:31:00] INFO (payload): Connected to MongoDB server successfully!
2023-11-02 18:31:01 [13:31:00] INFO (payload): Starting Payload...
2023-11-02 18:31:01 [13:31:01] INFO (payload): Payload Admin URL: /admin/admin
2023-11-02 18:31:01 [13:31:01] INFO (payload): Payload API URL: /api
2023-11-02 18:31:02 webpack built 0f92a91c130c5ce388cc in 1389ms
2023-11-02 18:31:02 ERROR in ./node_modules/payload/dist/admin/scss/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/payload/dist/admin/scss/app.scss)
2023-11-02 18:31:02 Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
2023-11-02 18:31:02 SassError: Can't find stylesheet to import.
2023-11-02 18:31:02 ╷
2023-11-02 18:31:02 203 │ @import '~payload-user-css';
2023-11-02 18:31:02 │ ^^^^^^^^^^^^^^^^^^^
2023-11-02 18:31:02 ╵
2023-11-02 18:31:02 node_modules/payload/dist/admin/scss/app.scss 203:9 root stylesheet

#

Sure:
import path from "path";

import { payloadCloud } from "@payloadcms/plugin-cloud";
import { mongooseAdapter } from "@payloadcms/db-mongodb";
import { webpackBundler } from "@payloadcms/bundler-webpack";
import { lexicalEditor } from "@payloadcms/richtext-lexical";
import { cloudStorage } from "@payloadcms/plugin-cloud-storage";
import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";
import { buildConfig } from "payload/config";

import Users from "./collections/Users";
import Engineer from "./collections/Engineer";
import Client from "./collections/Client";
import Media from "./collections/Media";
import Agencies from "./collections/Agencies";

import { engineerOnboarding } from "./api/handlers/engineerOnboarding";

const cloudStorageAdapter = s3Adapter({
config: {
credentials: {
accessKeyId: process.env.S3_ACCESS_KEY_ID,
secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
},
region: process.env.S3_REGION,
// ... Other S3 configuration
},
bucket: process.env.S3_BUCKET,
});

export default buildConfig({
admin: {
user: Users.slug,
bundler: webpackBundler(),
webpack: (config) => {
const newConfig = { ...config };
newConfig.resolve = {
fallback: {
util: require.resolve("util/"),
},
};
return newConfig;
},
},
editor: lexicalEditor({}),
collections: [Users, Engineer, Media, Client, Agencies],
typescript: {
outputFile: path.resolve(__dirname, "payload-types.ts"),
},
graphQL: {
schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
},
plugins: [
payloadCloud(),
cloudStorage({
collections: {
[Media.slug]: {
adapter: cloudStorageAdapter,
disableLocalStorage: true,
disablePayloadAccessControl: true,
prefix: "__cms",
},
},
}),
],
db: mongooseAdapter({
url: process.env.DATABASE_URI,
}),
});

#

@native cosmos Thank you for looking into, I am quite blocked on this for past many hours and having anxiety now since I need to deliver stuff based on it.

native cosmos Nov 2, 2023, 1:34 PM

#

For the sass error, does this sound familiar? https://discord.com/channels/967097582721572934/1067481961108607027

worthy spindle Nov 2, 2023, 1:51 PM

#

I am not using any custom sass or css file, so no

#

@native cosmos

native cosmos Nov 2, 2023, 1:52 PM

#

Was this created from create-payload-app?

#

Payload and plugins updated to latest?

worthy spindle Nov 2, 2023, 1:54 PM

#

Yes, i created it from npx create...

native cosmos Nov 2, 2023, 2:01 PM

#

Does this occur if you remove everything from plugins ?

worthy spindle Nov 2, 2023, 2:01 PM

#

Let me check.

native cosmos Nov 2, 2023, 2:01 PM

#

If you can troubleshoot by stripping down the config to see if that has anything to do with it, that would be helpful

worthy spindle Nov 2, 2023, 2:02 PM

#

Sounds a debugging plan

native cosmos Nov 2, 2023, 2:02 PM

#

Honestly, the base project from create-payload-app shouldn't need anything in your admin.webpack. Something seems off.

#

Are you importing server code in any of your collections?

worthy spindle Nov 2, 2023, 3:09 PM

#

I am just having 1 endpoint in my code.

#

But it was working fine. Even i added the feature updates on Monday on Payload. All was working fine, i don't know how without any change from my side, it is creating problems.

native cosmos Nov 2, 2023, 3:39 PM

#

Do you know what versions of each you were on previously? Can you look at the lock file from that point in time in git history?

worthy spindle Nov 5, 2023, 5:36 PM

#

Turns out webpack issue is when i am using verifying the token in custom collection permission fucntion. When i uncomment the line, error appears if comment, line disaappears

import payload from "payload";
import jwt from "jsonwebtoken";
import type { Access } from "payload/types";
import { checkRole } from "../collections/utils/checkRole";

const adminsOrUserOrToken: Access = ({ req: { user, rawHeaders } }) => {
if (user) {
if (checkRole(["admin"], user)) {
return true;
}

return {
  id: user.id,
};

}

const bearerToken = rawHeaders.find((header) => header.startsWith("Bearer "));
if (bearerToken) {
try {
const token = bearerToken.split("Bearer ")[1];
// const decodedToken = jwt.verify(token, process.env.AUTH_JWT_SECRET);

  // if (decodedToken) {
  // return {
  // email: ,
  // };
  // }
} catch (error) {
  // payload.logger.error("Token exists but verification failed:", error);
}

}

return false;
};

export default adminsOrUserOrToken;

#

@native cosmos

native cosmos Nov 5, 2023, 6:02 PM

#

So jsonwebtoken is a server-only module, you'll need to alias it properly w/ webpack. Docs here: https://payloadcms.com/docs/admin/excluding-server-code#aliasing-server-only-modules

Payload CMS

Excluding server-only code from admin UI | Documentation | Payload CMS

Payload is a headless CMS and application framework built with TypeScript, Node.js, React and MongoDB

#Getting webpack problem recently

Documentation:

Community-Help: