Custom Component without having to include React

default discord avatar
_diddlysquat_last year
5

"longtime" lurker, first time poster. Big fan of what payload has become and especially celebrating the cloud offering so far.


One questions though:


i am adding some custom components to customize the admin ui and am faced with some weird behaviour.


i want to NOT include React in my components which should be working when updating the tsconfig to have

compilerOptions.jsx = "react-jsx";

For some reason, i still get the "

ReferenceError: React is not defined

" error.



Anyone run into this and solved it?

  • discord user avatar
    denolfe
    last year

    Hey 👋 The way that I would usually solve this is by using a

    global.d.ts

    file.



    There are a couple of ways to do this, but I believe this one would work



    - Create

    global.d.ts

    file at your project root



    declare global {
      const React: typeof React
    }


    - Reference this file from

    tsconfig.json

      "include": [
        "src",
        "global.d.ts"
      ],


    Custom Component without having to include React

  • default discord avatar
    _diddlysquat_last year

    Awesome, thanks @denolfe for the quick reply! Will check it once i‘m back at the office!



    So, just had time to test and it seems that that didn't do anything. Any other ideas? Glad to share the code, if that helps.



    Basically i'm doing something like that:


    const SomeComponent = () => {
      return <div>Some text</div>;
    };
    
    export default SomeComponent;
  • discord user avatar
    denolfe
    last year

    I would expect there to be a way to get this to working using

    global.d.ts

    . Maybe take a look at these 2 links. This is really just a TS configuration thing at this point, though, not Payload.



    https://stackoverflow.com/questions/66001602/create-react-app-and-global-types-not-being-picked-up
    https://stackoverflow.com/questions/39040108/import-class-in-definition-file-d-ts/51114250#51114250
  • default discord avatar
    _diddlysquat_last year

    Fair point, thanks for the help so far! Will share my solution, once i got one.

  • default discord avatar
    dianoga8 months ago

    @

    diddlysquat

    zombie thread! Did you ever get this one figured out?

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.