Embeding Observable notebboks depends on navigators ?

Community Help
1

Hey everyone,
I’m having trouble embeding a notebook into my React web page (Next.js to be precise). I’m used to using Firefox and everything works fine, but I wanted to test viewing my site with Chrome and there’s an error. Is there anything special I need to do to support all browsers?

Here’s a specific example:
I integrate the @linard-y/from-her-to-eternity notebook as a package in my website (pnpm add https://api.observablehq.com/@linard-y/from-her-to-eternity.tgz?v=3). Then I have a React component named ObservableNotebook.jsx defined like this:

import React, { useRef, useEffect } from 'react';
import { Runtime, Inspector, Library } from '@observablehq/runtime';

const mountId = 'mdx-container-div';
const stdlib = new Library();
const library = Object.assign({}, stdlib, { width: width_mdx });

function ObservableNotebook({ notebook, cells, customClassName }) {
    const refs = useRef(cells.map(() => React.createRef()));
    useEffect(() => {
        const runtime = new Runtime(library);
        runtime.module(notebook, name => {
            const index = cells.indexOf(name);
            if (index !== -1) { return new Inspector(refs.current[index].current); }
        });
        return () => runtime.dispose();
    }, [notebook, cells]);

    return (
        <div className={customClassName}>
            {refs.current.map((ref, index) => ( <div key={index} ref={ref} />))}
        </div>
    );
}

export default ObservableNotebook;

In my MDX page, I import

import styles from '@/styles/contours.module.css'
import notebook from "@linard-y/from-her-to-eternity"
import ObservableNotebook from '@/components/blog/post-components/ObservableNotebook';

then somewhere in the page I use the component ObservableNotebook to declare the cells to be displayed:

<ObservableNotebook notebook={notebook} cells={["viewof targetProjection","Render_Proj"]} customClassName={styles.reprojection} />

Firefox users will see that it works very well here (at the bottom of the page) :
https://mo-omgaia.vercel.app/blog/posts/contours
While Chrome users will get an error :

Render_Proj = RuntimeError: Cannot read properties of undefined (reading 'index')

Does anyone have an idea how to solve my problem?

2

I can see the notebook itself failing in Chrome and Safari. The console error suggests that convert cannot find the file, so my suspicion would be that you have a race condition somewhere in your notebook where you try to read the file before it has been fully imported into the in-memory file system.

… Actually, it seems to work in Chrome if I select at least one of the color layers. The third layer (red) appears to be missing in Chrome.

3

The notebbok in Observablehq.com runs as I want (in Chrome or in Firefox) but the trouble comes when it is embed in my website.

4

Then we’re clearly not seeing the same thing. This is a screenshot of your notebook in Chrome 137 on macOS:

Screenshot 2025-06-19 at 13.45.19
Screenshot 2025-06-19 at 13.45.191920×1147 279 KB

5

Thank you for your help. Indeed, the notebook behaves differently depending on the browser, even in its original version on Observable.com.
The difference seems to start when using the external wasm-imagemagick library. I’ll see how I can get around the problem by not using this library.

6

I discovered that image and color management differed between Firefox and Chrome. I worked around my problem without really understanding everything; but at least it works for both browsers now.