Payload 3.0 beta

[JakobLierman]

Hi!

Are there any plans on migrating this plugin to Payload 3.0, since the beta has already been released? If so, is there a roadmap I can consult?
I get a bunch of errors related to this plugin in the beta as we speak.

Used versions:

• @nouance/payload-better-fields-plugin: ^1.4.1
• payload: 3.0.0-beta.18
• next: 14.3.0-canary.26

For example:

../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss.webpack[javascript/auto]!=!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss
SassError: Can't find stylesheet to import.
  ╷
1 │ @import 'payload/scss';
  │         ^^^^^^^^^^^^^^
  ╵
  ../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss 1:9  root stylesheet

Import trace for requested module:
../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss.webpack[javascript/auto]!=!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss
../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss
 ⨯ ../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss.webpack[javascript/auto]!=!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss
SassError: Can't find stylesheet to import.
  ╷
1 │ @import 'payload/scss';
  │         ^^^^^^^^^^^^^^
  ╵
  ../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss 1:9  root stylesheet

Import trace for requested module:
../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss.webpack[javascript/auto]!=!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!../../node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss
../../node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/jakob/Development/Projects/Stampix/b2b/node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!/Users/jakob/Development/Projects/Stampix/b2b/node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!/Users/jakob/Development/Projects/Stampix/b2b/node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[4]!/Users/jakob/Development/Projects/Stampix/b2b/node_modules/.pnpm/next@14.3.0-canary.26_@babel+core@7.24.4_@playwright+test@1.43.1_react-dom@18.3.1_react@18.3.1__react@18.3.1_sass@1.75.0/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[5]!/Users/jakob/Development/Projects/Stampix/b2b/node_modules/.pnpm/@nouance+payload-better-fields-plugin@1.4.1_date-fns@3.3.1_payload@3.0.0-beta.18_@swc+core@1._fs3zefyviue7ojvmmkj2aevmae/node_modules/@nouance/payload-better-fields-plugin/dist/styles/colourPicker.scss': No serializer registered for SassError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError

Errors in beta software are to be expected! I was just curious on future development for this plugin.

Keep up the good work!
Cheers

[paulpopus]

Yes, migration to beta has already started! Had to go back and make some changes in core to accommodate some of the work here, soon!

[tsemachh]

@paulpopus is there any incomplete PR ready to review ? , we are looking for example of custom component in Payload 3

[carstenblt]

Any updates on this? Wouldn't mind helping out!

[mgehrls]

Also interested in an update here.

[Gabsii]

Is there a way to support you in the update process?

[carstenblt]

@paulpopus Just an estimate if and when you will get to this would be nice!

[valentindiehl]

Would also love to support the process!

[paulpopus]

I'll be updating this plugin very soon! Sorry for the wait but had very little free time since v3 launched

[benjick]

Any alternatives?

[BrianJM]

I'm looking forward to v3 support. 🙂

[paulpopus]

Progress is underway, I've found somebody to sponsor this project so we'll be releasing 2.0 very soon

[benjick]

Only thing I used was SlugField, built my own to be able to upgrade:

import { type Field, type FieldHook, type TypeWithID } from "payload";
import slugify from "slugify";

const createSlugBeforeValidateHook =
  (useField: string): FieldHook<TypeWithID, string, Record<string, string>> =>
  async ({ value, siblingData }) => {
    if (siblingData.slugEdit && value) {
      return value;
    }
    if (!siblingData[useField] || typeof siblingData[useField] !== "string") {
      throw new Error(`Missing required string field: ${useField}`);
    }
    return slugify(siblingData[useField], {
      lower: true,
      strict: true,
    });
  };

type Props = {
  useField: string;
  localized?: boolean;
  required?: boolean;
};

export const SlugField = ({ useField, localized, required }: Props) => {
  const slugConfig: Field = {
    name: "slug",
    type: "text",
    localized,
    required,
    admin: {
      description: `Automatically generated from ${useField}`,
      position: "sidebar",
    },
    hooks: {
      beforeValidate: [createSlugBeforeValidateHook(useField)],
    },
  };

  const slugEditConfig: Field = {
    name: "slugEdit",
    type: "checkbox",
    localized,
    admin: {
      description: "Override default slug",
      position: "sidebar",
    },
  };

  return [slugConfig, slugEditConfig] as [Field, Field];
};

usage:

...SlugField({
  useField: "title",
  localized: true,
  required: true,
}),

[adamk22]

Also looking forward to the v3 support since we're going to have to migrate soon and we're using this plugin