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

neilg63 commented 1 year ago

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

JarrodMFlesch commented 1 year ago

I am unable to recreate, I just followed your steps exactly.

Is your custom component located within your rootDir defined in your tsconfig.json file? Sounds like it might be outside of it.

neilg63 commented 1 year ago

Thanks for getting back to me. I didn't manually edit tsconfig.ts in the rootDir. My custom components are in ./src/components and my collections files are /src/collections . Note as per your public-demo app, payload.config.ts and payload-type.ts are in ./src and not in the root.

I've just opened tsconfig.ts and noticed "payload generate:types" has added:

"compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "strict": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react",
    "paths": {
      "payload/generated-types": [
        "./src/payload-types.ts",
      ],
    }
  },

Do I need to explicitly add SCSS support or define paths?

JarrodMFlesch commented 1 year ago

No, this is what mine looks like after running npx create-payload-app and installing the blog template:

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

cbratschi commented 1 year ago

After upgrading to Payload 1.12.0 we got this error:

[nodemon] starting `ts-node --project tsconfig.server.json src/payload/server.ts`
uncaughtException /.../node_modules/payload/dist/admin/components/forms/Label/index.scss:1
@import '../../../scss/styles.scss';
^

SyntaxError: Invalid or unexpected token

...

    at Object.<anonymous> (/.../node_modules/payload/src/admin/components/forms/Label/index.tsx:8:1)

Looks like a similar issue. Tried to rebuild Payload but still remains.

cbratschi commented 1 year ago

@payloadcms/plugin-seo is failing in my case. Without this plugin it runs fine.

xyxc0673 commented 1 year ago

I got this error with @payloadcms/plugin-form-builder like @cbratschi

xyxc0673 commented 1 year ago

I found that the pure payload project is going well, but face this issue again in the demo project(https://github.com/payloadcms/next-payload-demo) with @payloadcms/plugin-form-builder

cbratschi commented 1 year ago

I got this fixed by removing the custom import of the Payload config in my Express server. For some reasons I had to use this code at the beginning but this is no longer needed. The Node code should not directly use the Payload config, only the generated schema files and Payload itself.

JessChowdhury commented 1 year ago

@neilg63 we haven't heard back in a couple weeks, are you still experiencing this error?

@cbratschi it sounds like you've sorted out your issue - do you need any more help here?

@xyxc0673 are you still stuck with this error? did it happen after you installed @payloadcms/plugin-form-builder and does it go away if you disable the plugin? I'll try to reproduce with this setup.

cbratschi commented 1 year ago

@JessChowdhury yes, my case is solved.

xyxc0673 commented 1 year ago

@JessChowdhury Sure，only happen if I add this plugin to payload config

JessChowdhury commented 1 year ago

@xyxc0673 can I take a look at your next.config.js file?

Try adding this line to your next.config.js and let me know if the error persists:

transpilePackages: ["@payloadcms/plugin-form-builder"],

tux-rampage commented 1 year ago

Same issue here. Bare payload project without NextJS. Everything runs fine until I add any custom component to a field as described in the docs. As soon as I do this, the error appears.

tux-rampage commented 1 year ago

I manage to track down the issue. The problem is that when the config is Loaded in NodeJS on server side, it will require the compiled Component jsx files. Some of these files contain a require call to SCSS resources to bundle them in webpack, but this will fail on server side.

I managed to add a workaround with intercept-require and return an empty object for these resources, but this is a bit dirty.

Thisisjuke commented 1 year ago

Same thing here, was working for a while and when I continued to work on my project, I had the same exact error.

In another project we used transpilePackages: ["@payloadcms/plugin-form-builder"]. But this time payload cms is in standalone / api mod.

I tried this nodemon dev command: cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon -e ts,js --exec ts-node -r tsconfig-paths/register ./src/server.ts

With this custom webpack configuration:

  admin: {
    webpack: config => ({
        ...config,
        externals: [nodeExternals()],
        module: {
          ...config.module,
          rules: [
            ...config.module.rules,
            {
              test: /\.scss$/,
              exclude: /node_modules/,
              use: ['sass-loader'],
            },
          ],
        },
      }),
  },

Using webpack-node-externals and a default sass-loader to just try to dodge this error.

As tux-rampage said previously, it's because of .tsx compilation on server side.

Why a core admin package is crashing issues ? The .scss file is located inside /node_modules/payload/dist/admin/components/forms/Label/index.scss:1. So it's located in dist folder. Shouldn't this file has been already transpiled to just CSS ?

Is there an easy way to fix it ? thx

tux-rampage commented 1 year ago

Is there an easy way to fix it ? thx

I can only give you a (dirty) work around. I imported the following code at the beginning of the server entry script (server.ts):

/**
 * This will fix an issue with react component loading on server side.
 * See: https://github.com/payloadcms/payload/issues/3120
 */

import intercept from 'intercept-require';

const cssPattern = /\.(s?css|svg|png|jpe?g|gif|ttf)$/i;

intercept(
    (module, info) => {
        if (info.didShortCircuit) {
            return {};
        }

        if (info.error) {
            throw info.error;
        }

        return module;
    },
    {
        shortCircuit: true,
        shortCircuitMatch: (info) => cssPattern.test(info.extname ?? ''),
    }
);

I am using intercept-require for this. This has no Typings, so you may have to add it manually when using typescript:

declare module "intercept-require" {
    export type InterceptFn = (module: unknown, info: RequireInfo) => unknown;
    export type RestoreFn = () => void;

    export interface RequireInfo {
        readonly moduleId: string;
        readonly callingFile: string;
        readonly native: boolean;
        readonly extname: string|null;
        readonly thirdParty: boolean;
        readonly absPath: string;
        readonly absPathResolvedCorrectly: boolean;
        readonly local: boolean;
        readonly error: Error|null;
        readonly attemptedShortCircuit?: boolean;
        readonly didShortCircuit?: boolean;
    }

    export interface InterceptShortCircuitOptions {
        shortCircuit: true;
        shortCircuitMatch?: (info: RequireInfo) => boolean;
    }

    export type InterceptOptions = InterceptShortCircuitOptions | {shortCircuit: false};

    export default function intercept(interceptor: InterceptFn, options?: InterceptOptions): RestoreFn;
}

Thisisjuke commented 1 year ago

Thx for the snippet, I hope I will not have to do this :disappointed:

I think that 50% of my issues are because of things exported inside the payload package. For example, when I want to type things using types inside payload/dist/payload, I have a bad mix between things that should stay in the node ecosystem but are trying to be bundled to Payload Front admin (react part).

Additional errors are coming form the fact that tsconfig.json is not handled at 100% in standalone mod. Aliases break and we have to fix things using webpack inside payload.config.ts. And then after fixing things with webpack plugins, we have weird behaviors at the build time. We fix things one more time using other webpack configuration like resolve:

{
resolve: {
  modules: [...],
  fallback: {
    "fs": "browserify-fs",

Then, we can have new errors at the run time (using serve after build).

Our solution:

We just removed all @/ aliases from our app.
Limit what we import from payload or payload/dist and duplicate types in our repository when possible.
Empty webpack config but we still need browserfied packages like : "browserify-fs": "^1.0.0",.

I don't know why I can have issues relative to SCSS setup or browserified-fs when I import things from payload/dist/payload.

Do we have a way to be sure that when importing things like types, 20% of all payloadCMS bundle is not also included ?

lucianogreiner commented 1 year ago

Up

lucianogreiner commented 1 year ago

I am having the same issue using the standalone version, no next-payload. Had to create a custom relationship field to customize the way we fetch the options, and Payload forces me to pretty much copy the whole existing component so I can use everything that is around it. Can't find a way out of this issue.

RickVM commented 1 year ago

Yeah, seems like we're experiencing the same issue.

If we try to include "@payloadcms/plugin-stripe": "^0.0.15",
if we upgrade to payload v2

Can confirm on both accounts that tux-rampage's fix works

marpstar commented 1 year ago

I'm having similar issues. I'm trying to upgrade to Payload 2.0.13 as well as convert my project to use next-payload.

> next build

WARNING(withPayload): Custom CSS file not found at undefined. Please update your next.config.js file.
 ✓ Creating an optimized production build    
 ✓ Compiled successfully
   Linting and checking validity of types  .. ⨯ ESLint: Failed to load config "next/core-web-vitals" to extend from. Referenced from: /Users/someuser/Projects/jd-farm-next/.eslintrc.json
 ✓ Linting and checking validity of types    
   Collecting page data  .../Users/someuser/Projects/jd-farm-next/next-app/node_modules/payload/dist/admin/components/elements/Tooltip/index.scss:1
@import '../../../scss/styles.scss';
^

SyntaxError: Invalid or unexpected token
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1126:15)
    at Module._compile (node:internal/modules/cjs/loader:1162:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
    at Module.load (node:internal/modules/cjs/loader:1076:32)
    at Function.Module._load (node:internal/modules/cjs/loader:911:12)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at Module.mod.require (/Users/someuser/Projects/jd-farm-next/next-app/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (/Users/someuser/Projects/jd-farm-next/next-app/node_modules/payload/dist/admin/components/elements/Tooltip/index.js:13:1)
/Users/someuser/Projects/jd-farm-next/next-app/node_modules/payload/dist/admin/components/elements/Tooltip/index.scss:1
@import '../../../scss/styles.scss';
^

I do have a few custom components, but none of them import Tooltip, and I can't seem to get a stack trace that goes any higher than this.

marpstar commented 1 year ago

Following up on this. I had my custom components declared in the same file I was declaring my collection, and therefore a .tsx extension on my Collection.tsx file.

All of my other collections were in .ts files except for this one. I moved my custom component into its own .tsx file and imported it into my Collection.ts and this error went away.

Also had to add

"browser": {
    "fs": false
  },

to my package.json

ghost commented 1 year ago

Had the same issue when trying to use form builder on 2.0 via next-payload and adding transpilePackages: ["@payloadcms/plugin-form-builder"] to next.config.js fixed my issue.

tyteen4a03 commented 1 year ago

Running into the same issue, tux-rampage's fix did not work for me. Switching to Vite bundler didn't help either.

tyteen4a03 commented 1 year ago

Upon further testing I found something very peculiar: This error breaks all valid SCSS, and as the above mentioned, it seems to be caused by importing payload/dist. I was referencing this component in payload.config.ts like this:

import GateListDocument from "./views/volunteer/GateListDocument";
...
    admin: {
        user: Users.slug,
        bundler: webpackBundler(),
        components: {
            views: {
                GateListDocument: {
                    Component: GateListDocument,
                    path: "/collections/volunteers/gate-list/output",
                },
            },
        },
    },

This is the problematic component:

import { useSearchParams } from "payload/dist/admin/components/utilities/SearchParams";
import React from "react";

import "./index.scss";

const GateListDocument = () => {
    const params = useSearchParams();
    return (
        <div className="gate-list-document">
            things
        </div>
    );
};

export default GateListDocument;

and I don't think it matters (as the compilation will fail for all valid SCSS documents), but here's my index.scss:

@import "~rfs/scss";

@at-root {
  @page {
    size: auto;
    /* 0.84cm */
    margin: 0.84cm 0;
  }

  @page :first {
    margin: 0 0 0.84cm 0;
  }
}

@media print {
  .pagebreak { break-after: page; } /* page-break-after works, as well */
}

.gate-list-document {
    margin: 0;
}

In order for the error to go away, I had to:

Start the backend with yarn dev and wait for it to error.

Comment out these two lines in the component:

import { useSearchParams } from "payload/dist/admin/components/utilities/SearchParams";
...
const params = useSearchParams();

Restart the server. The error will persist.
Comment out this line:
```
import "./index.scss";
```
Restart the server. Now uncomment all 3 lines and wait for nodemon to restart; this time no errors. Edit one of the files, webpack should restart and there shouldn't be any errors.
Restart the server, webpack once again errors.

It seems like there is an issue with compiling SCSS files when a component is imported from payload.config.ts.

tyteen4a03 commented 1 year ago

It looks like removing PAYLOAD_CONFIG_PATH (which is commonplace for payload v1 package.json content) from the run configs fixed it for me.

thgh commented 1 year ago

Same issue when combining Payload + Nest.js https://github.com/CloudeyIT/payload-nestjs/issues/1

tyteen4a03 commented 1 year ago

Same issue when combining Payload + Nest.js CloudeyIT/payload-nestjs#1

Have you tried removing PAYLOAD_CONFIG_PATH=src/cms/payload.config.ts?

thgh commented 1 year ago

Gave it up and then it started working!

Resolved it like this: (note that most of these things relate to Nest.js)

Downgrade to Payload 1 to resolve the scss issue
Add process.env.PAYLOAD_CONFIG_PATH = __dirname.replace('dist', 'src') + '/payload.config.ts' before init
Disable the nest swc builder
Remove the dist folder (or run nest start --watch twice or something)

ssyberg commented 1 year ago

I started seeing this today, after many hours I narrowed it down to an import statement within an unrelated management function. The import is importing a simple javascript object. I spent a long long time trying to figure out why this could possibly happen, seemed potentially related to webpack alias' but I really couldn't say definitively. For the moment I'm refining a "global" constant object in multiple places to avoid this. Very weird, but I can say fairly definitively it has nothing specifically to do with the @import '../../../scss/styles'; line

JarrodMFlesch commented 1 year ago

Can anyone link a reproduction?

I just tried to recreate this:

npx create-payload-app
chose website
ran yarn dev

This template has a custom component being imported and used on the dashboard. I also tried the custom route/component mentioned above and that worked fine for me as well.

A reproduction would be very helpful at this point.

ssyberg commented 1 year ago

Can anyone link a reproduction?

I just tried to recreate this:

npx create-payload-app

chose website

ran yarn dev

This template has a custom component being imported and used on the dashboard. I also tried the custom route/component mentioned above and that worked fine for me as well.

A reproduction would be very helpful at this point.

I don't have any custom components, I think this is a big red herring. I do think this has something to do with imports in server.ts or the payload config, but I think the error itself that payload is displaying is just coincidentally occurring in Tooltip.

To clarify what I was saying before, for me this is happening during import of some command line management scripts that aren't even run during yarn dev and have no react/UI whatsoever. Within my management scripts I am importing some configuration information from my block definitions, but when I comment out my management scripts everything loads and works just fine (admin/API/etc).

JarrodMFlesch commented 1 year ago

Sure, but could you get me something I can pull down on my machine and have it appear? That would be much easier to debug.

thgh commented 1 year ago

Potentially useful: components.d.ts refers to several elements which require(.scss) files. Typescript is parsing these global declarations, not sure why it tries to execute require calls too.

^ payload v1 did not have this components file

JessChowdhury commented 1 year ago

Is anyone on this thread still able to reproduce this issue? Please drop us a reply if you are, we're actively trying to resolve this.

JarrodMFlesch commented 1 year ago

Hey everyone! While we would love to help you fix this issue, it is very hard to do so without an actual reproduction. We are going to close this for now, but if anyone wants to submit a link to a branch or fork that throws this error we will gladly re-open it.

If any of you are using next-payload packages or the next-custom-server template - ensure that you are adding use client to the top of any files that import .scss files inside the app folder.

Again, if anyone can link a reproduction we will take a look.

Thanks!

thgh commented 1 year ago

Here is a repro: https://github.com/thgh/payload-3120

» yarn start    
yarn run v1.22.19
$ nest start
/.../payload-3120/node_modules/payload/dist/admin/components/elements/Banner/index.scss:1
@import '../../../scss/styles.scss';
^

SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)

Thisisjuke commented 1 year ago

Hi everyone, Took some time yesterday to create a repro repo, but my usecase was too complex to have a minimal working repository.

More information about the stack inside this collapsible section :arrow_down:

Context

Moving from a big Monolith using [Next.js Payload](https://nextjs-vercel.payloadcms.com/) to a Turborepo monorepo.

Our Monorepo

Next.js Website
Standalone PayloadCMS API
Libs mainly imported inside the PayloadCMS instance:
- Prisma (done this way: https://turbo.build/repo/docs/handbook/tools/prisma)
- Apollo GQL
- Types+Config package (done this way: https://turbo.build/repo/docs/handbook/linting/eslint).

For a little more context, I encountered this issue in 4 different way:

Import my monorepo prisma library inside Payload. . Then load this library inside a Payload custom endpoint, to just do a basic push data in both Payload Collection + Prisma collection.
Using a custom webpack resolve.alias like @. Might be relative to the fact that we were resolving .tsx files and not .jsx files since we want to use typescript in our monorepo libraries. At the end, we removed all imports and used relative paths.
Not using Nextjs transpilePackage anymore. Since we are not using Nextjs, we encounter many issues relative to webpack resolve.fallback. Sometimes, after adding packages like os-browserify, we can have this error again.
Importing types from payload/dist/payload. Seems like things other than types are shipped to the browser.

Over time doing this migration, I formed an opinion (maybe bad sorry), but I think those time wasting issues are coming for 2 big concepts:

The bundling ecosystem using webpack + express is awful. As James said during the meeting about "Move to Next.js?", there is a big issue with bundler. Vitejs could resolve the problem, any other solution also might, but at the moment, using PayloadCMS+Typescript with ts-node and express is incredibly daunting. Also, there are differences between development and production builds, costing time for Devops / Infra relative tasks.
All PayloadCMS types not being exposed in its own namespace like payload/types/....

I hope this comment will be somewhat helpful, and I look forward to reading further discussions about this issue.

ryoheiw commented 12 months ago

@thgh Thank you for the reproduction. I'm getting the same error message as you when trying to upgrade Payload CMS to version 2.0.0.

thgh commented 12 months ago

If I add useAuth() from payload/dist/utilities I also get .svg and .png errors. (fixable by overriding require())

itspers commented 12 months ago

why is this closed?

i have dozens of places in libs where i have things like

import { FieldType, Options, } from 'payload/dist/admin/components/forms/useField/types';

which is causing this error

Extazykeep commented 11 months ago

Experiencing same problem, but im using astrojs framework, and decided to convert lexical json to html on "frontend", but actually its on server at the time of html generating, copied the code from payload docs,

import type { SerializedEditorState } from 'lexical'
import {
  type SanitizedEditorConfig,
  convertLexicalToHTML,
  consolidateHTMLConverters,
} from '@payloadcms/richtext-lexical'

async function lexicalToHTML(editorData: SerializedEditorState, editorConfig: SanitizedEditorConfig) {
  return await convertLexicalToHTML({
    converters: consolidateHTMLConverters({ editorConfig }),
    data: editorData,
  })
}

and getting such error:

/home/office/projects/20231120_domainRU_bani/node_modules/payload/dist/admin/components/elements/Banner/index.scss:1
@import '../../../scss/styles.scss';

For some reason @payload/richtext-lexical, imports payload with its admin part which has a lot of scss, but it does not make a lot of sense for me, why would we need any scss to convert json to html.

jmikrut commented 10 months ago

Hey all,

Jarrod and I have just caught up on this thread and we have gotten to the bottom of this.

It appears that potentially -all- of the above issues, including the one reproduction that we received from @thgh (THANK YOU) are importing the Payload config directly, and / or using the Payload config within another service outside of Payload itself.

As you all know, the Payload config is isomorphic, in that it loads both server-side and client-side code into the same config. This means it loads SCSS files.

But node itself (not even ts-node) understand what to do with a .scss file (or a .css, .svg, etc). If you try to run a little test app that imports one of these files, it will crash.

That's where Webpack / etc. come in. Webpack knows how to handle CSS / SCSS / etc. And that's how Payload currently makes -use- of those files for the client side.

But on the server side, we just need to completely disregard any client-side only files. So to do this, we do the following before we load the Payload config:

  clientFiles.forEach((ext) => {
    require.extensions[ext] = () => null
  })

What the above code does is just says to Node that whenever it finds an .scss file, instead of loading the file, just return null instead.

This effectively dodges the issue.

Here's the important part - we are doing this for you before we load the Payload config. But if you're loading the config directly elsewhere, you need to do this same thing in your own code.

Here's where we perform this code inside of Payload, before we load your config: https://github.com/payloadcms/payload/blob/main/packages/payload/src/config/load.ts

This is just a side-effect of the beautiful JavaScript world we live in, and there's little Payload can do to make this easier I'm afraid. If you import your Payload config into your own project, you need to be able to handle the client-side files that it comes with

jmikrut commented 10 months ago

@Extazykeep on your point:

it does not make a lot of sense for me, why would we need any scss to convert json to html.

This is 100% the truth. @AlessioGr has plans to resolve this so that Lexical converters don't load anything unnecessary.

Extazykeep commented 10 months ago

@Extazykeep on your point:

it does not make a lot of sense for me, why would we need any scss to convert json to html.

This is 100% the truth. @AlessioGr has plans to resolve this so that Lexical converters don't load anything unnecessary.

seems like problem already solved, they swap react imports for lazy imports, now it does not require unnecessary admin ui, i guess

AlessioGr commented 10 months ago

@Extazykeep on your point:

it does not make a lot of sense for me, why would we need any scss to convert json to html.

This is 100% the truth. @AlessioGr has plans to resolve this so that Lexical converters don't load anything unnecessary.

seems like problem already solved, they swap react imports for lazy imports, now it does not require unnecessary admin ui, i guess

It's currently only partly solved. SCSS might still make it to the frontend SCSS (even if no actual import happens, because of webpack's static analysis) because it's bundled by webpack. See https://github.com/payloadcms/payload/issues/4085#issuecomment-1847389064

On the server side, there shouldn't be any issues anymore, though. This is only an issue on the client

dianjuar commented 7 months ago

I'm trying to use payloadCMS on a NestJS app but no luck. I keep getting the error SyntaxError: Invalid or unexpected token even though when I applied the solution of telling node that it shouldn't process certain files

[
  '.scss',
  '.css',
  '.svg',
  '.png',
  '.jpg',
  '.eot',
  '.ttf',
  '.woff',
  '.woff2',
].forEach((ext) => {
  require.extensions[ext] = () => null;
})

AlessioGr commented 7 months ago

I'm trying to use payloadCMS on a NestJS app but no luck. I keep getting the error SyntaxError: Invalid or unexpected token even though when I applied the solution of telling node that it shouldn't process certain files
[
  '.scss',
  '.css',
  '.svg',
  '.png',
  '.jpg',
  '.eot',
  '.ttf',
  '.woff',
  '.woff2',
].forEach((ext) => {
  require.extensions[ext] = () => null;
})

Can you share the full error?

dianjuar commented 7 months ago

The error is not different of the ones shown before.

/Users/dianjuar_cripto/Documents/rpg-marketplace-project/nest-payloadcms/node_modules/payload/dist/admin/components/elements/Banner/index.scss:1
@import '../../../scss/styles.scss';
^

SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1280:20)
    at Module._compile (node:internal/modules/cjs/loader:1332:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1022:12)
    at Function.Module._load (/Users/dianjuar_cripto/Documents/rpg-marketplace-project/nest-payloadcms/node_modules/@nx/js/src/executors/node/node-with-require-overrides.js:18:31)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/Users/dianjuar_cripto/Documents/rpg-marketplace-project/nest-payloadcms/node_modules/payload/dist/admin/components/elements/Banner/index.js:21:1)

I put the suggested code to avoid node load the client files in several places (on the payload.config.ts file, on the main.ts file) but same results

rtpurswell commented 6 months ago

For anyone who may still be having this issue, it is fixed in the latest version of @payload/richtext-lexical. Make sure to update to 0.9.3 and update any lexical packages to 0.13.1. Hope this helps

payloadcms / payload