Visualization won't load in a production build (NextJS)

[maxsibilla]

Describe the bug
We are implementing the lazy load method described here (http://vitessce.io/docs/js-react-vitessce/#lazy-loading), which works in local development but causes the following error when running in production:

ReferenceError: pTt is not defined

Seems to fail regardless of the configuration.
This was not a problem on version 1.2.2.

To Reproduce

• Use version 2.0.0 or newer and implement the bundle splitting approach (http://vitessce.io/docs/js-react-vitessce/#lazy-loading)
• Run npm run build
• Run npm run start
• Visit the page where the Vitessce component is defined

Expected behavior
No warnings in console.

Screenshots

Configuration

Environment:

• Browser: Chrome and Firefox
• Browser version: 113.0.5672.126 and 113.0.1

[maxsibilla]

*Note that the cell-atlas label should be applied, member of SenNet

[keller-mark]

Have you tried the current latest version on NPM (2.0.3)? The published bundles immediately after the major version bump v2.0.0 and 2.0.1 had issues.

Also, for debugging purposes, can you try swapping out vitessce for @vitessce/dev (in package.json and import statements)? This should allow you to see non-minified variable names in the error messages https://www.npmjs.com/package/@vitessce/dev

[maxsibilla]

@keller-mark We are currently using version 2.0.3. I just noted during some trial and error that the same error occurred on previous versions that were still version 2.

After updating the imports to use @vitessce/dev the error we now get is:

ReferenceError: SchemaObject$2 is not defined

[keller-mark]

I can reproduce locally, it seems to have something to do with AJV (a JSON schema validator package). I have no idea why. I tried pinning a different AJV version in a nextJS app and still encountered the error with Vitessce v2.0.3.

Luckily, we have a PR that gets rid of AJV (for different reasons) #1441 so this issue should be fixed in the next Vitessce version.

I just tested with a local version of the branch keller-mark/file-exts (corresponding to #1519) which contains those AJV changes and could successfully render Vitessce in a production static HTML build of a NextJS app (using dynamic).

To reproduce locally:

# clone vitessce repo
cd vitessce
git checkout keller-mark/file-exts
pnpm install
pnpm run clean
pnpm run build
pnpm run bundle
./scripts/consumer-install.sh

cd ../nextjs-blog
npm install $(ls ../vitessce/consumer/vitessce-*.tgz)
npm run dev
npm run build

[keller-mark]

This was my component

import dynamic from 'next/dynamic';

const Vitessce = dynamic(() => import('./VitessceWrapper'), {
  loading: () => <p>Loading...</p>,
  ssr: false,
});

const config = {
  // omitted
};

export default function Vis() {
  return (
    <Vitessce config={config} theme="dark" height={600} />
  );
}

[maxsibilla]

@keller-mark Awesome thank you for all of this information! No rush, as we can and have been using version 1, but do you have any idea on when this PR will make it into production?

[keller-mark]

hopefully ASAP! Just need a re-review from another team member