Polaris Viz in Shopify Remix CSR app throws error: “require() of ES Module d3-scale not supported”

Polaris
1

Hi,
I’m building a Shopify embedded app using the official Remix template (Client-Side Rendering only) and trying to integrate @shopify/polaris-viz for charts.
However, importing any Polaris Viz chart immediately causes a Vite bundling error.

Error:

require() of ES Module /node_modules/d3-scale/src/index.js
from /node_modules/
/polaris-viz-core/build/cjs/utilities/createGradient.js
not supported.

Instead change the require of index.js in

/polaris-viz-core/build/cjs/utilities/createGradient.js
to a dynamic import() which is available in all CommonJS modules.

Environments

  • Shopify embedded app
  • Remix template (CSR only – no SSR)
  • Vite bundler
  • Polaris Viz: latest version
  • Node: (your version)
  • OS: Ubuntu

Issue Summary

Polaris Viz core (polaris-viz-core) includes CJS files that use require(), but D3 packages are ESM-only.
This causes Vite to throw the error during pre-bundling, even though I’m using CSR only.

Question

Is there an official recommended configuration for using Polaris Viz with the Shopify Remix template (CSR)?
Or should Polaris Viz update its CJS build to support loading ESM modules like D3?

Any guidance or package updates would be appreciated.

Thanks!

2

Just a heads up, Polaris Viz is deprecated now so you may struggle to get support for this. I’d advise looking for a new package to create your tables/charts.

3

Hi @Luke ,

Is there any charting or visualization package that Shopify officially recommends as a replacement for Polaris Viz?
Or is there any Shopify-supported alternative similar to Polaris Viz that we should use going forward?