Cannot read properties of null (reading 'useReducer')

[corranmac]

Hi all,

Thanks for your open libraries, loving working with Solara so far!

I just discovered ipyreact also and I'm trying to see how easy it is for using react libraries with.

Currently trying to demo the react-pdf library and have overcome earlier errors but I'm now getting "Cannot read properties of null (reading 'useReducer')"

My code is the following:

import ipyreact

ipyreact.Widget(
    _esm="""
    import { Document, Page, pdfjs } from "https://esm.sh/react-pdf";
    import * as React from "react";


    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

    export default function MyApp() {

      return (
        <div>
          <Document file="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" >
          </Document>
        </div>
      );
    };
    """
)

Hoping you might be able to advise.

Thanks a lot

[maartenbreddels]

Thanks for your open libraries, loving working with Solara so far!

Thank you :)

We haven't tested ipyreact with solara very well, and I know there are issues (with the recent modules/source map features). But we plan to add better support for that in solara soon.

The problem you see now, is that you have two versions of react. Starting from ipyreact 0.4 we do not special case esm.sh anymore, and you are yourself responsible for adding ?external=react,react-dom to your import source.

In fact, it's even more clean to add an import map:

import ipyreact

ipyreact.define_import_map({
    "react-pdf": "https://esm.sh/react-pdf?external=react,react-dom",
})

ipyreact.Widget(
    _esm="""
    import { Document, Page, pdfjs } from "react-pdf";
    import * as React from "react";


    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

    export default function MyApp() {

      return (
        <div>
          <Document file="https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf" >
          </Document>
        </div>
      );
    };
    """
)

This seems to work, except after a while it shown nothing, but at least you don't get the react error.

Hope this helps.

Maarten

[maartenbreddels]

I've added this problem to the FAQ: https://github.com/widgetti/ipyreact?tab=readme-ov-file#i-get-a-react-error

[paulftw]

Came here looking for a solution to Cannot read properties of null (reading 'useRef'). FAQ entry helped.

However, FAQ page suggests ??external=... with two question marks, for me it only worked with one:
import { Dotting } from "https://esm.sh/dotting?external=react,react-dom";. Seems like a typo

[maartenbreddels]

True, do you want to open a PR so you get the credits?

[paulftw]

@maartenbreddels #78