I've tried adding this to a NextJS app by following the instructions in the README and I'm running into an error:
`error - ./node_modules/payload/dist/admin/scss/app.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[14].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[14].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[14].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[14].use[5]!./node_modules/payload/dist/admin/scss/app.scss
SassError: Can't find stylesheet to import.
โท
180 โ @import '~payload-user-css';
โ ^^^^^^^^^^^^^^^^^^^
โต
node_modules/payload/dist/admin/scss/app.scss 180:9 root stylesheet
Import trace for requested module:
./node_modules/payload/dist/admin/scss/app.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[14].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[14].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[14].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[14].use[5]!./node_modules/payload/dist/admin/scss/app.scss
./node_modules/payload/dist/admin/scss/app.scss
./node_modules/payload/dist/admin/Root.js
./app/(payload)/admin/page.tsx`
I was able to recreate the error using a completely clean Next JS app after performing the following steps:
yarn create next-app yarn create v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "[email protected]" with binaries: - create-next-app โ What is your project named? โฆ payload-module-test โ Would you like to use TypeScript with this project? โฆ Yes โ Would you like to use ESLint with this project? โฆ Yes โ Would you like to use Tailwind CSS with this project? โฆ Yes โ Would you like to use
src/directory with this project? โฆ Yes โ Would you like to use experimental
app/ directory with this project? โฆ Yes โ What import alias would you like configured? โฆ @/* Creating a new Next.js app in /home/dan/scratch/nextjs/payload-module-test.
yarn add @payloadcms/next-payload payload
yarn next-payload install yarn run v1.22.19 $ /home/dan/scratch/nextjs/payload-module-test/node_modules/.bin/next-payload install Done in 0.06s.
next.config.js:
`
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
// next.config.js
const path = require('path');
const { withPayload } = require('@payloadcms/next-payload');
module.exports = withPayload(nextConfig, {
// The second argument to withPayload
// allows you to specify paths to your Payload dependencies.
// Point to your Payload config (Required)
configPath: path.resolve(__dirname, './payload/payload.config.ts'),
// Point to custom Payload CSS (optional)
cssPath: path.resolve(__dirname, './css/my-custom-payload-styles.css'),
// Point to your exported, initialized Payload instance (optional, default shown below) payloadPath: path.resolve(process.cwd(), './payload.ts'), });
yarn dev
Any help in troubleshooting this issue would be much appreciated. Please let me know if you require any more information.