Error interpreting SCSS file: @import '../../../scss/styles';

[neilg63]

Link to reproduction

test:int _community

To Reproduce

I installed Payload CMS via the recommended method (npx create-payload-app ) with Node 18.15.0, set up MongoDB, used the blog option for the base installation with full Typescript and ScSS support. I successfully added a number of collections and field hooks. All good. Then add a custom component as detailed in your documentation:

 admin: {
    defaultColumns: [
      "displayName",
      "user",
      "edition",
      "themes",
      "published",
      "updatedAt",
    ],
    useAsTitle: "displayName",
    components: {
      views: {
        List: SubmissionList,
      },
    },
  },

So far I only have a bare bones component (again based on your documentation):

import React from "react";
import { List, type Props } from "payload/components/views/List";

export const SubmissionList: React.FC<Props> = (props) => (
  <div className="submission-list">
    <p>
      Some text before the default list view component. If you just want to do
      that, you can also use the admin.components.list.BeforeList hook
    </p>
    <List {...props} />
  </div>
);

Describe the Bug

On enabling any custom collection component, I get this error message when running yarn dev. The project builds correctly, but fails on yarn serve:

`/Users/neil/Sites/platform3/rca/payload/plrca/node_modules/payload/dist/admin/components/icons/Chevron/index.scss:1
@import '../../../scss/styles';
^

SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Object.require.extensions.<computed> [as .js] (/Users/xxxx/Sites/platform3/rca/payload/plrca/node_modules/ts-node/src/index.ts:1045:43)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Function.Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/xxxx/Sites/platform3/rca/payload/plrca/node_modules/payload/src/admin/components/icons/Chevron/index.tsx:3:1)`

Am I missing something? Did I skip a configuration step? It seems to be interpreting the file as typescript. I checked sass and sass-loader have been correctly installed. Thanks in advance

Payload Version

1.11.8

[cbratschi]

I tried it again but getting now the node-fetch ESM issue:

 ⨯ ../../node_modules/payload/dist/uploads/getExternalFile.js:61:34
Module not found: ESM packages (node-fetch) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Import trace for requested module:
../../node_modules/payload/dist/uploads/generateFileData.js
../../node_modules/payload/dist/collections/operations/create.js
../../node_modules/payload/dist/collections/requestHandlers/create.js
../../node_modules/payload/dist/collections/buildEndpoints.js
../../node_modules/payload/dist/collections/initHTTP.js
../../node_modules/payload/dist/initHTTP.js
../../node_modules/payload/dist/index.js
../../node_modules/@payloadcms/richtext-lexical/dist/field/features/Upload/index.js
../../node_modules/@payloadcms/richtext-lexical/dist/index.js
./src/app/_components/richtext/richtext-lexical.tsx
./src/app/[lang]/[[...slug]]/_page-types/generic.tsx
./src/app/[lang]/[[...slug]]/_page-types/index.tsx
./src/app/[lang]/[[...slug]]/page.tsx

Somehow the Lexical code initializes a full payload instance and generateFileData() gets called.

I guess we have to wait for Payload 3 to fully use Lexical from Next.js.

More details about the ESM issue are here:

https://github.com/payloadcms/payload/issues/4421#issuecomment-2064129906

[cbratschi]

The upload feature is causing this:

https://github.com/payloadcms/payload/blob/main/packages/richtext-lexical/src/field/features/Upload/index.ts#L3

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.