#Struggling to package React components inside a plugin

29 messages · Page 1 of 1 (latest)

violet turtle
#

I've been working on https://github.com/NouanceLabs/payload-dashboard-analytics and trying to build out the logic for fetching analytics data via an API and then exposing it in the Payload admin panel via custom components. However I simply can't seem to be able to use any React hooks inside my custom components as I get a React error about invalid hook use. The component is here https://github.com/NouanceLabs/payload-dashboard-analytics/blob/main/src/components/Charts/ViewsChart.tsx

I cross referenced my implementation with the SEO plugin https://github.com/payloadcms/plugin-seo and the lexical plugin and for the life of me I can't seem to figure out where I'm going wrong.

I've attached a video showing how just one hook breaks the admin panel entirely.

#

@onyx narwhal @frigid spoke any ideas?

I checked for duplicate or incorrect react versions, didn't find anything 😟

Edit: this similar error happens if I try to bundle a component in the admin panel directly like in beforeDashboard, didn't see any example of a plugin specifically dealing with that

frigid spoke
#

well

#

from your vid i see this as strange:

#

this might be something to do with that ViewsChart component itself specifically

#

does the error go away if you completely remove the ViewsChart, even in the below function?

#

the first error, i have never seen before. But the second errors about invalid hooks, I see all the time. What is inside the ViewsChart component? Is it a library? Does it come with its own React version? If you type yarn why react do you have more than one copy installed?

#

generally i'd want to get to the bottom of why there are more than one react copies installed (which i am 99% confident is the problem here)

#

but another way you can fix this is if you just simply alias react and react-dom to ONE copy of react

#

example:

# 
webpack: config => {
  const newConfig = {
    ...config,
    resolve: {
      ...(config.resolve || {}),
      alias: {
        ...(config.resolve.alias || {}),
        react: path.resolve(__dirname, '../node_modules/react'),
      },
    },
  }
  return newConfig
},
onyx narwhal
frigid spoke
#

kinda, because it can "obscure" issues that should otherwise be solved

#

but i'm not opposed to it

#

really you should not have to install multiple copies / different versions of react

violet turtle
violet turtle
# frigid spoke the first error, i have never seen before. But the second errors about invalid h...

The output of why react is

[1/4] Why do we have the module "react"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "react@18.2.0"
info Has been hoisted to "react"
info Reasons this module exists
   - Specified in "devDependencies"
   - Hoisted from "payload#react"
info Disk size without dependencies: "388KB"
info Disk size with unique dependencies: "420KB"
info Disk size with transitive dependencies: "448KB"
info Number of shared dependencies: 2
frigid spoke
#

it's in your devDependencies?

#

you could probably remove it from there

#

that might be the cause

violet turtle
#

I find it odd because the seo plugin has

"peerDependencies": {
    "payload": "^0.18.5 || ^1.0.0",
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "devDependencies": {
    "payload": "^1.0.9",
    "react": "^18.0.0",
    "typescript": "^4.5.5"
  },
frigid spoke
#

that's a good question

#

i would guess that in dev mode, that plugin does alias react

#

like, for local dev of the plugin itself

violet turtle
# 
webpack: (config) => {
      const newConfig = {
        ...config,
        resolve: {
          ...config.resolve,
          alias: {
            ...config.resolve.alias,
            react: path.join(__dirname, "../node_modules/react"),
            "react-dom": path.join(__dirname, "../node_modules/react-dom"),
            payload: path.join(__dirname, "../node_modules/payload"),
          },
        },
      };

      return newConfig;
    },
#

Except it aliases everything, this seems to fix it!