Bug Report: Error with ES Module in @shopify/polaris-viz-core when using D3-scale

[ersanjay1995]

Bug summary

Error

Instead change the require of index.js in /home/../app/node_modules/@shopify/polaris-viz-core/build/cjs/utilities/createGradient.js to a dynamic import() which is available in all CommonJS modules.

Write a short description of the issue here -

Expected Behavior:
The application should work without encountering the ES Module compatibility issue.

Actual Behavior:
The app crashes due to the require() of an ES Module not being supported. The error suggests using a dynamic import() instead.

What actually happens?

Steps to reproduce the problem

1. Start with the Shopify remix app
2. Add the shopffy polaris viz
3. add any chart to remix app any page.

Reduced test case

node modules package.json

"dependencies": { "@prisma/client": "^5.11.0", "@remix-run/dev": "^2.7.1", "@remix-run/node": "^2.7.1", "@remix-run/react": "^2.7.1", "@remix-run/serve": "^2.7.1", "@shopify/app-bridge-react": "^4.1.2", "@shopify/polaris": "^13.9.0", "@shopify/polaris-viz": "^9.12.0", "@shopify/shopify-app-remix": "^3.3.2", "@shopify/shopify-app-session-storage-prisma": "^5.0.2", "isbot": "^5.1.0", "prisma": "^5.11.0", "react": "^18.2.0", "react-dom": "^18.2.0", "vite-tsconfig-paths": "^5.0.1" },

##remix react compont code this componest is rending to the remix app page.
app/routes/app._index.jsx

import that Polarisviz to the index page

import Polarisviz from "../components/Polarisviz";
...

 <Polarisviz />

components/Polarisviz

import React, { useEffect, useState } from 'react';
import { BarChart, PolarisVizProvider } from '@shopify/polaris-viz';
import '@shopify/polaris-viz/build/esm/styles.css';

const chartdata = [
   {
     name: 'Sales',
     data: [
       { key: 'January', value: 1200 },
       { key: 'February', value: 2300 },
       { key: 'March', value: 1800 },
     ],
   },
   {
     name: 'Returns',
     data: [
       { key: 'January', value: 200 },
       { key: 'February', value: 300 },
       { key: 'March', value: 150 },
     ],
   },
 ];


export default function Polarisviz() {
  
 return (
   <div style={{ height: 500 }}>
     <PolarisVizProvider
       themes={{
         Default: {
           chartContainer: {
             backgroundColor: 'transparent',
           },
         },
       }}
     >
       <BarChart data={chartdata } showLegend={true} />
     </PolarisVizProvider>
   </div>
 );
};

Specifications

Paste the results here:

System:
OS: Linux 5.8 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU:
Memory:
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
Watchman: 4.9.0 - /usr/bin/watchman
Browsers:
Chrome: 110.0.5481.77
npmPackages:
@shopify/polaris-viz: ^9.12.0 => 9.18.2
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1

[frknue]

Having the same issue with the latest Vite template.

[RayTrommelenBikeMatrix]

#1425

This is a thread where people suggest some fixes.