Imports for perspective-viewer?

[woodsy-sounding-wilful-sapwood]

So I have a react app using perspective which works flawless in dev mode but breaks when built in prod. I think I am missing an import for perspective-viewer? Minimum working example:

App.tsx:

import React, { useRef } from 'react';
import './App.css';

import '@finos/perspective-viewer';
import { HTMLPerspectiveViewerElement } from '@finos/perspective-viewer';

function App() {
  const viewerRef = useRef<HTMLPerspectiveViewerElement>(null);

  return (
    <perspective-viewer ref={viewerRef} />
  );
}

export default App;

craco.config.js:

const PerspectivePlugin = require("@finos/perspective-webpack-plugin");

module.exports = {
    webpack: {
      plugins: {
        add: [ new PerspectivePlugin() ],
      },
    },
  };

npm start shows an empty perspective viewer (as expected) but npm run build followed by serve -s build gives the following error in console

[woodsy-sounding-wilful-sapwood]

Requiring es6-modules in package.json resolved the problem.

[keddie]

What action did you take to resolve this? I'm seeing the same issue, but adding "type": "module" to package.json didn't seem to help. How specifically did you "require es6-modules" ?

[woodsy-sounding-wilful-sapwood]

You have to change browserslist the and supports es6-module is the bit you need

"browserslist": {
    "production": [
      "defaults and supports es6-module"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },