zed0547last year
The most likely culprit is an invalid custom component path

You most likely are trying to import a react component somewhere it is expecting a path to that component instead

Have you added any custom components recently?
jonnyf.27last year
I have added custom components in a payload config before. As the plugin might be used by others the import is using absolute imports. Does it have to be relative?
zed0547last year
Can you share the custom component configs with me?

Are you importing them as
'my-plugin/exports/rsc#my-comp'
?
jonnyf.27last year

This is from the plugin
zed0547last year
I think when someone installs your plugin they will have difficulties with this because if
@payload-plugins
is an alias then they may not have that set, no?

But in any case, I think you should use the actual plugin name
jonnyf.27last year
Ok that's a fair point. Brain is a bit fried working on this 😂

I'm hoping to publish to Npm so the package will be in the user's node_modules
zed0547last year
Hahaha no worries, it's a bit weird to think through, but it has to be from the pov of someone installing your plugin

I've definitely tripped up here before
jonnyf.27last year
Thanks appreciate it!
zed0547last year
My pleasure!
jackmcglast year
Is the
rsc
export directory path mandatory?

@654031862146007055
? (sorry to drag you back into the chat)
zed0547last year
Hey no worries

No, it's nto mandatory

It's just the user mentioned the plugin template

Or 'plugin' in general, and there's a directory for it there
jackmcglast year
we're working on the same plugin 🙂
zed0547last year
Ahhh I see
jackmcglast year
I got it working but I don't understand WHY it works now
zed0547last year
No, the
'rsc'
is not mandatory, it should be just a path to your component

I can help you out no worries, what's got ya stuck here?
jackmcglast year
CSS paths

thanks btw

much appreciated
zed0547last year
Do you guys import your own css/scss into this component?

jackmcglast year

it's been a long day so please bare with lol

1. we were basically getting the CSS error

@831425870270693376

mentioned above whenever we tried to generate:importMap. Dev and build were fine

2. we're using turborepo. The dev process has been fine. We have a pipeline set up that's a bit complex but in a nutshell, when we push, it builds, creates a PR in a public repo from our private mono, publishes and we pull into a test payload (brand new app)

3. (sorry if I'm rambling)

4. the packages/plugin-package had this

  "name": "@antler-payload-plugins/plugin-analytics",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },

5. This was in our plugin.ts

        views: {
          ...(config.admin?.components?.views || {}),
          analyticsDashboard: {
            // Component: {
            //   exportName: "AnalyticsDashboard",
            //   path: "@antler-payload-plugins/plugin-analytics", // didn't work, CSS errors
            // },
            Component: {
              exportName: "AnalyticsComponent",
              path: "@antler-payload-plugins/plugin-analytics/rsc#AnalyticsComponent", // works, and why I asked about rsc
            },
            path: safePluginOptions.dashboardSlug,
          },
        },

more to come

The project is honestly at this stage a bit complex and hard to summarise

gone through a lot of troubleshooting

but the main thing troubling us is why the importMap threw css errors when importing a component with the exact same structure as now (which doesn't error)

when all we did was change the path

zed0547last year
So, in your plugin, in the directories you have there, you have an
/export
folder with an
rsc.ts
entry - correct? In a sense, it is very much built off of the payload plugin template, right?
jackmcglast year
it is now, yes
zed0547last year
The CSS error is not a direct reason, but more a symptom of an incorrect path as the
importMap
tries to search for your component. I just know it is usually a result of a malformed path out of experience dealing with these questions here!

I think the errors in general will improve here with some more time and care.

Now, why does it work now
jackmcglast year
zed0547last year
The plugin template maps the
/export
folder to two distinct folders in the distrib.

1. Client

2. RSC

These represent client components and rsc components respectively. You can see this mapping in the package.json file somewhere

The '#MyComp' is a way to tell the importmap that the import is a
named
import

If you omit it, it will look for a default one

The reason why this works for you, is because your named export is being exported out of
plugin/rsc
as is dictated by that package.json mapping

From the perspective of your user, the ones installing the plugin, they don't see
plugin/export/rsc
, they see it as a built distribution, which will have just
plugin/rsc
instead

Does that make sense?

Which is why I say that it's a little confusing at first because you have to consider imports here from the perspective of the users consuming the package instead of users that are simply authoring their own config

jackmcglast year

so user imports

import { analyticsPlugin } from '@antler-payload-plugins/plugin-analytics'

from

views: {
  ...(config.admin?.components?.views || {}),
  analyticsDashboard: {
    Component: {
      exportName: "AnalyticsComponent",
      path: "@antler-payload-plugins/plugin-analytics/rsc#AnalyticsComponent",
    },
    path: safePluginOptions.dashboardSlug,
  },
},

which is defined in the package json as

  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },
    "./rsc": {
      "import": "./src/exports/rsc.ts",
      "types": "./src/exports/rsc.ts",
      "default": "./src/exports/rsc.ts"
    },
    "./styles": {
      "import": "./src/exports/output.css",
      "types": "./src/exports/output.css",
      "default": "./src/exports/output.css"
    }
  },

zed0547last year
You got it
jackmcglast year
before in the non-functional version, we were exporting from
dist
not
src
zed0547last year
Correct
jackmcglast year
so when bundling as a package, this can still be .ts, not .js
zed0547last year
When you bundle the package it should be fine due to the mapping of
.

Wait a sec

No, something is wrong here, this is your publishConfig?
jackmcglast year
no, esports

something is wrong here
story of our last 48 hours
zed0547last year
I think your
'.'
is incorrect... let me double check with the plugin template

Yeah, look here with
"publishConfig.exports"
and
"exports"
:
https://github.com/payloadcms/payload/blob/main/templates/plugin/package.json#L86-L102

And you should align it as above
jackmcglast year
ahh

right
zed0547last year
Then all will be good!
jackmcglast year
and this should still be goood in a turborepo?
zed0547last year
Should be fine I think although I have not tried it myself in a turborepo
jackmcglast year
ha
zed0547last year
Nothing stands out to me immediately
jackmcglast year
well, we'll let you know

if everything explodes, we'll drop you a line
zed0547last year
If it doesn't I'll forward you my invoice

Hahaha just kidding
jackmcglast year
we'll be like....

https://tenor.com/3xVE.gif

ok, I think we can take it from here

thank you for all you're help
zed0547last year
Good luck and have fun with it! It's my pleasure!
jackmcglast year
TLDR code good (subjective), paths bad

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.