Getting error reactNodeRef must hold a reference to a ReactNode. unclear why

[bryandbs]

I'm trying to wrap a slate editor by following the fabric examples. I can't seem to get a basic example working. I've set up a module like:

import { registerElement } from '@angular-react/core'
import { CommonModule } from '@angular/common'
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'
import { Editor } from 'slate-react'
import { SlateEditorComponent } from './slate-editor/slate-editor.component'

@NgModule({
  declarations: [SlateEditorComponent],
  imports: [CommonModule],
  exports: [SlateEditorComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class SlateModule {
  constructor() {
    registerElement('Editor', () => Editor)
  }
}

and a simple component:

import { Value } from 'slate'
import { EditorProps } from 'slate-react'

@Component({
  selector: 'app-slate-editor',
  template: `
    <Editor #reactNode [value]="value" [Change]="onChange"></Editor>
  `,
  styles: ['react-renderer'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SlateEditorComponent extends ReactWrapperComponent<EditorProps> {
  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef

  @Input() value: EditorProps['value'] = Value.fromJSON({
    document: {
      nodes: [
        {
          object: 'block',
          type: 'paragraph',
          nodes: [
            {
              object: 'text',
              text: 'A line of text in a paragraph.',
            },
          ],
        },
      ],
    },
  })

  @Input() onChange: EditorProps['onChange'] = ({ value }) => console.log(value)

  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
    super(elementRef, changeDetectorRef, renderer)
  }
}

I've installed the following dependencies:

  "dependencies": {
    "@angular-react/core": "^1.0.1",
    "@angular/animations": "~8.0.3",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "~8.0.3",
    "@angular/compiler": "~8.0.3",
    "@angular/core": "~8.0.3",
    "@angular/forms": "~8.0.3",
    "@angular/material-moment-adapter": "^8.0.1",
    "@angular/platform-browser": "~8.0.3",
    "@angular/platform-browser-dynamic": "~8.0.3",
    "@angular/router": "~8.0.3",
    "@types/slate-react": "^0.22.6",
    "@types/stylenames": "^1.1.0",
    "immutable": "^4.0.0-rc.12",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "rxjs": "~6.5.2",
    "slate": "^0.47.8",
    "slate-react": "^0.22.9",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },

I'm at a bit of a loss and would appreciate any guidance on what I'm doing wrong here.

[yuwu9145]

As far as I know, @angular-react/core: 1.0.1 works only when following dependencies and versions installed:

"react": "^16.6.3",
"react-dom": "^16.6.3",

My project works well with above package.json settings, hope it helps :)

[bryandbs]

@yuchaosydney I updated my dependencies and reinstalled everything, still getting the same error. Even tried to use a basic react component I wrote myself, still not getting any luck. If you have a link to a project or gist where I can see how you integrated a component library, that would be very helpful

[dschoon]

I was seeing this as well (although I didn't notice any negative side effects). It goes away if I set reactNodeRef to static = true: @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

[lachis]

Did you have any success resolving this issue @bryandbs. I'm having the same problem

[lygstate]

Same issue

[KorsaR-ZN]

@lygstate @bryandbs Hi, you should import AngularReactBrowserModule in AppModule

import { AngularReactBrowserModule } from '@angular-react/core';

@NgModule({
    imports: [
        AngularReactBrowserModule,
        ....

[rafaelcalpena]

I had the same error, tried all suggested fixes and it still didn't work. In my case, I forgot to set styles: ['react-renderer'] in the declaration for my wrapper component.