TypeError: Cannot read property 'id' of null

[inveon-osmanakar]

Describe the bug First of all, I would like to say that I loved Craft.js and love working with it. Great job.

I could not find a solution to my problem even if I read the docs again and again.

I have two separated Nextjs projects and React component library project to create my own components to use in these Nextjs projects. Some components of this library will use Craft.js functionalities.

You can see the one of these components right below. I export this from my component library and import in one of those Nextjs libraries. (This component library in my local environment, not publised to npm. Using npm link to test library).

I got an error when I import this library: TypeError: Cannot read property 'id' of null

import { useNode, UserComponent } from '@craftjs/core';

interface IProps {
   text: string;
}

export const MyButton: UserComponent<IProps> = (props) => {
   const {
      connectors: { connect, drag },
   } = useNode();

   const { text } = props;

   return (
      <button ref={(ref: any) => connect(drag(ref))}>
         {text}
      </button>
   );
};

How I use:

import { Editor, Frame } from "@craftjs/core";
import { MyButton} from "@mylibrary/dist";

function App() {
  return (
        <Editor resolver={{ MyButton  }}>
          <Frame>
            <MyButton text="click me" />
          </Frame>
        </Editor>
  );

My main purpose, edit some page from one of those nextjs projects and create a json via Craft.js. I will save this json to my database. Also use this json in another project to create a page with shared React component library?

Any suggestion?

To Reproduce It is hard to produce and create environment in sandbox.

1. Create a React component library
2. Create a component with useNode
3. Create a nextjs library
4. Import component
5. See error when start project

Expected behavior Use same components with another projects and create layout with json

Your environment

Software	Version(s)
craft.js	0.1.0-beta.10
React	^16.12.0
TypeScript	^3.7.3
Browser	Google Chrome
npm/Yarn	npm
Operating System	window

[d3dc]

This happens when I use an Element outside of a Frame. The default value for NodeContext is null - which has an attempt to unpack it in useInternalNode:

  const context = useContext(NodeContext);
  const { id, related, connectors } = context;

[inveon-osmanakar]

@d3dc I just export it (MyButton) and it is been used inside of a Frame like right below:

import { Editor, Frame } from "@craftjs/core";
import { MyButton} from "@mylibrary/dist";

function App() {
  return (
        <Editor resolver={{ MyButton  }}>
          <Frame>
            <MyButton text="click me" />
          </Frame>
        </Editor>
  );

Also, if you are talking about the Element which is provided by Craft.js, I have not used it yet. Have any idea to solve this? or is it not possible?

[prevwong]

@inveon-osmanakar Could you create a sandbox demonstrating the error? I made a sandbox with your sample code (https://codesandbox.io/s/objective-bell-uvsgc?file=/src/App.js), but I wasn't able to replicate the error 😅

[inveon-osmanakar]

@prevwong I have created two github repo, one for an demo application (with create-react-app here) and the other one is simple react component library which exports two components. One of those components use useNode hook (you can see the repo of library here

Now I am not able to demonstrate TypeError: Cannot read property 'id' of null but this approach creates invalid hook call. By analyzing this sandbox, you can understand my approach better https://codesandbox.io/s/agitated-mcnulty-lueks?file=/src/App.js

PS: If you uncomment 'MyButtonWithCraftHook' components, application works

Thank you for your time

[irishkungfu]

@inveon-osmanakar Were you able to work out a solution to this?

[inveon-osmanakar]

Not yet, but I was importing my third library via 'npm link'. I believe that problem can be solved by publishing the third party to npm and import it from there. Not tested yet @irishkungfu

[achendrick]

@inveon-osmanakar @irishkungfu I'm sure you've likely moved on from this issue but I just ran into this problem and was able to sort it out.

Essentially, both my app and my components lib had craft.js as a dependency and were using their own instance of Craft. I recently tackled this issue but with React after looking at this issue https://github.com/facebook/react/issues/13991

So, there are several ways to solve it, but for me, here's what I've done:

• used Lerna
• made sure all my packages are using the same version of craft.js (currently "^0.1.0-beta.16")
• hoisting my dependencies using lerna bootstrap --hoist
• having craft as a peer dependency of my components lib "@craftjs/core": "0.x", "@craftjs/utils": "0.x",

Again, depending on your set up there are other ways to solve this but take a look at the React issue I linked to for other possible ways to solve as they are applicable as it's the same root issue.