Shopify/polaris-viz

require() of ES Module not supported

Opened this issue · 46 comments

ahmed-adly-khalil commented

Bug summary

adding polaris vis to Next JS 13 project not working

Expected behavior

to work normally

Actual behavior

getting the below error

Error: require() of ES Module .../node_modules/d3-scale/src/index.js from /.../node_modules/@shopify/polaris-viz-core/build/cjs/utilities/createGradient.js not supported. Instead change the require of index.js in.../node_modules/@shopify/polaris-viz/node_modules/@shopify/polaris-viz-core/build/cjs/utilities/createGradient.js to a dynamic import() which is available in all CommonJS modules.

Steps to reproduce the problem

install in nextJS 13 project

Reduced test case

install in nextJS 13 project

Specifications

  • Polaris-Viz version number: 7.6.0
  • Browser: chrome
  • Device: mac
  • Operating System: macos
gil-- commented

I think it exports cjs by default so you'd have to import the esm version although that errors out for me:

import { PolarisVizProvider } from "@shopify/polaris-viz/build/esm/index";
/node_modules/@shopify/polaris-viz/build/esm/index.js:1
export { ColorScale, DEFAULT_THEME as PolarisVizDefaultTheme, LIGHT_THEME as PolarisVizLightTheme, PRINT_THEME as PolarisVizPrintTheme, changeColorOpacity, changeGradientOpacity, createGradient, createTheme, curveStepRounded, getAverageColor, getColorVisionEventAttrs, getColorVisionStylesForActiveIndex, getFilteredSeries, getSeriesColors, isGradientType, paddingStringToObject, removeFalsyValues, uniqueId } from '@shopify/polaris-viz-core';
^^^^^^

SyntaxError: Unexpected token 'export'
  • 👍3
ahmed-adly-khalil commented

Thanks Gil, Hope Shopify team can share a solution for us

chronark commented

Running into this as well

I tried using it in a client component:

error - ../../node_modules/.pnpm/@shopify+polaris-viz-core@7.8.1_react@18.2.0/node_modules/@shopify/polaris-viz-core/build/cjs/components/LineSeries/LineSeries.js:6:0
Module not found: ESM packages (d3-shape) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Import trace for requested module:
../../node_modules/.pnpm/@shopify+polaris-viz-core@7.8.1_react@18.2.0/node_modules/@shopify/polaris-viz-core/build/cjs/index.js
../../node_modules/.pnpm/@shopify+polaris-viz@7.8.1_biqbaboplfbrettd7655fr4n2y/node_modules/@shopify/polaris-viz/build/esm/index.js
./app/(landing)/chart.tsx
HaakonStromsnes commented

Any news? Would really love to use it on my project. Thanks!

  • 👍3
gdayton commented

Having this same issue as well, please prioritize this one!

ayushsoni1001 commented

+1

  • 👍1
aimproxy commented

Any news on this? Will it work in a lower version of NextJs? Perhaps Next 12?

Unvoided commented

+1

TiagoFonseca99 commented 
```js
import { PolarisVizProvider } from "@shopify/polaris-viz/build/esm/index";

Any idea when it will be fixed?

  • 👍3
gil-- commented

You can resolve this with a short-term fix via dynamic imports on Nextjs

import dynamic from "next/dynamic";
import { Spinner } from "@shopify/polaris";

const PolarisViz = dynamic(
    () =>
        import(
            "@shopify/polaris-viz/build/esm/components/PolarisVizProvider/PolarisVizProvider.js"
        ).then((mod) => mod.PolarisVizProvider),
    {
        loading: () => <Spinner />,
        ssr: false,
    }
);
aimproxy commented

@gil-- where were you when I had to submit that project to the university? hahhahaa, I couldn't figure it out at the time! :(

TiagoFonseca99 commented

You can resolve this with a short-term fix via dynamic imports on Nextjs

import dynamic from "next/dynamic";
import { Spinner } from "@shopify/polaris";

const PolarisViz = dynamic(
    () =>
        import(
            "@shopify/polaris-viz/build/esm/components/PolarisVizProvider/PolarisVizProvider.js"
        ).then((mod) => mod.PolarisVizProvider),
    {
        loading: () => <Spinner />,
        ssr: false,
    }
);

I got the same error. Did not work for me.
Any other suggestion ?

envex commented

I know it's still a bandaid, but I was able to get things up and running (without any modifications) in Next 13.1.6 by adding loose to the esmExternals.

// next.config.js
module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: 'loose' },
};

https://nextjs.org/blog/next-11-1#es-modules-support

TiagoFonseca99 commented

Did not work either 😢

envex commented

Did not work either 😢

Are you getting any new errors?

What version of polaris-viz and Next are you using?

isaacbowen commented

I'm running into this, using @shopify/polaris-viz 8.0.2 and next 13.2.4 on nodejs 18.15.0. 👋

Error: require() of ES Module [...]/node_modules/d3-scale/src/index.js from [...]/node_modules/@shopify/polaris-viz-core/build/cjs/utilities/createGradient.js not supported.
Instead change the require of index.js in [...]/node_modules/@shopify/polaris-viz-core/build/cjs/utilities/createGradient.js to a dynamic import() which is available in all CommonJS modules.

isaacbowen commented

@envex Any chance of this issue being cleared? I'd love to use this in our merchant-facing stuffs.

AndrejMazhenkovski commented

Getting the same error, and NextJS config experimental: { esmExternals: 'loose' } doesn't help either :/

envex commented

@isaacbowen Sorry, we don't have any current plans to tackle this issue in the near future.

  • 👍1
  • 👎3
envex commented

@isaacbowen @AndrejMazhenkovski I just tested this with nest@13.2.4 and @shopify/polaris-viz@9.0.1 and the method below worked.

import dynamic from 'next/dynamic';

const BarChart = dynamic(() => import('@shopify/polaris-viz').then((module) => module.BarChart), { ssr: false });
  • 🎉2
isaacbowen commented

FANTASTIC. This worked for PolarisVizProvider, too. Thank you! 🙌

AndrejMazhenkovski commented

@isaacbowen @AndrejMazhenkovski I just tested this with nest@13.2.4 and @shopify/polaris-viz@9.0.1 and the method below worked.

import dynamic from 'next/dynamic';

const BarChart = dynamic(() => import('@shopify/polaris-viz').then((module) => module.BarChart), { ssr: false });

Now we're talking! Thanks!

image

  • 👍1
ryanwilsonperkin commented

This isn't strictly an issue in NextJS, but any renderer that takes place in Node which doesn't have modules: true on the Node engine and attempts to use the polaris viz library

  • 👍3
aimproxy commented

Confirmed working on next: 13.2.4 and @shopify/polaris-viz": ^9.3.0 using this:

const PolarisVizProvider = dynamic(
  () => import('@shopify/polaris-viz').then((module) => module.PolarisVizProvider),
  { ssr: false },
)

const BarChart = dynamic(
  () => import('@shopify/polaris-viz').then((module) => module.BarChart),
  { ssr: false },
)
  • 👍3
peylun commented

👋 Hit into same issues when upgrading polaris-viz in shop-campaigns too.

This works for us too for components:

import dynamic from 'next/dynamic';

const PolarisVizProvider = dynamic(() =>
  import('@shopify/polaris-viz').then((module) => module.PolarisVizProvider),
);

For types, it works by importing type:

// works
import type {DataSeries} from '@shopify/polaris-viz';

// doesn't work
import {DataSeries} from '@shopify/polaris-viz';

For non-components and non-types, we load with await import():

  useEffect(() => {
    const load = async () => {
      const {PolarisVizLightTheme} = await import('@shopify/polaris-viz');
      ...
    };
    load();
  }, []);

PR: https://github.com/Shopify/shop-campaigns/pull/2633

mattsrobot commented

Hello, just adding my 2c here:

I'm using the Shopify App Remix template, which also uses CommonJS. I can't find a way to important Polaris-viz.

I've checked D3 which does in fact have a CommonJS export, but not sure how to make Polaris-viz work.

  • ❤️1
  • 👀3
aimproxy commented

@mattsrobot Remix dosen't have a way to dynamic import such as 'next/dynamic'. In such a way 'next/dynamic' it's just a wrapper to {Suspense, lazy} from React!

Suggest reading https://react.dev/reference/react/lazy

Try to wrap your component in this way:

import { Suspense, lazy, useEffect, useState } from "react";
import type { ReactNode } from "react";

let LazyImported = lazy(() => import('@shopify/polaris-viz'));

export default RouteComponent() {
    return (
        <Suspense fallback="">
            </>
        </Suspense>
    )
)

or try this approach: https://remix.run/docs/en/main/pages/gotchas#importing-esm-packages

Let me know what's work and what's not, I will to be need this in my project.

mattsrobot commented

@aimproxy

I was able to get it to work!

viz

The process involved modifying the remix config thus:

  serverDependenciesToBundle: [
    "@shopify/polaris-viz",
    "@juggle/resize-observer",
    "@react-spring/animated",
    "@react-spring/core",
    "@react-spring/shared",
    "@react-spring/types",
    "@react-spring/web",
    "@shopify/polaris-viz",
    "@shopify/polaris-viz-core",
    "d3-array",
    "d3-color",
    "d3-format",
    "d3-interpolate",
    "d3-path",
    "d3-scale",
    "d3-shape",
    "d3-time",
    "d3-time-format",
    "internmap",
    "use-debounce"],
  • 👍6
  • 😄1
  • 🎉2
aimproxy commented

@mattsrobot Nice ahahah! Glad to help and very beautiful website, inspired in Remix landing page I see kkkk!

  • ❤️1
aimproxy commented

@mattsrobot I may have found a way to reduce this huge array, you may try this:

const { getDependenciesToBundle } = require("@remix-run/dev");

module.exports = {
  serverDependenciesToBundle: [
    ...getDependenciesToBundle(
      "@shopify/polaris-viz",
      "any-other-top-level-packages-you-import-and-need-to-bundle"
    )
  ],
};
  • 👍1
  • 👀1
paambaati commented

@mattsrobot With your suggested fixes, I can get past the ESM error, but I still see this error –

Screenshot 2023-09-27 at 12 26 38 PM

with these traces –

Warning: useLayoutEffect does nothing on the server, because its effect
cannot be encoded into the server renderer's output format. This will lead to a mismatch
between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect
should only be used in components that render exclusively on the client. See
https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at ChartDimensions
(/my-app/build/index.js:25363:7)
    at div
    at ChartContainer
(/my-app/build/index.js:25452:35)
    at DonutChart2
(/my-app/build/index.js:39565:26)
    at div
    at div
    at VerticalStack (/my-app/node_modules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@s
hopify/polaris/build/cjs/components/VerticalStack/VerticalStack.js:8:3)
    at div
    at /my-app/node_modules
/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/polaris/
build/cjs/components/Box/Box.js:8:3
    at Card (/my-app/node_m
odules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/po
laris/build/cjs/components/Card/Card.js:11:3)
    at div
    at Section (/my-app/nod
e_modules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify
/polaris/build/cjs/components/Layout/components/Section/Section.js:8:3)
    at div
    at Layout (/my-app/node
_modules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/
polaris/build/cjs/components/Layout/Layout.js:9:3)
    at div
    at VerticalStack (/my-app/node_modules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@s
hopify/polaris/build/cjs/components/VerticalStack/VerticalStack.js:8:3)
    at div
    at div
    at Page (/my-app/node_m
odules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/po
laris/build/cjs/components/Page/Page.js:11:3)
    at Index
(/my-app/build/index.js:40996:45)
    at RenderedRoute
(/my-app/node_modules/.pnpm/react-router@6.16.
0_react@18.2.0/node_modules/react-router/dist/umd/react-router.development.js:516:7)
    at Outlet
(/my-app/node_modules/.pnpm/react-router@6.16.
0_react@18.2.0/node_modules/react-router/dist/umd/react-router.development.js:1049:28)
    at IndexFiltersManager (/my-app//sho
pify-app/node_modules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modu
les/@shopify/polaris/build/cjs/utilities/index-filters/IndexFiltersManager.js:8:3)
    at EphemeralPresenceManager
(/my-app/node_modules/.pnpm/@shopify+polaris@1
1.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/polaris/build/cjs/components/Ephe
meralPresenceManager/EphemeralPresenceManager.js:10:3)
    at FocusManager (/my-app//shopify-ap
p/node_modules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@sh
opify/polaris/build/cjs/components/FocusManager/FocusManager.js:7:3)
    at PortalsManager (/my-app//shopify-
app/node_modules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@
shopify/polaris/build/cjs/components/PortalsManager/PortalsManager.js:9:3)
    at MediaQueryProvider (/my-app//shop
ify-app/node_modules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modul
es/@shopify/polaris/build/cjs/components/MediaQueryProvider/MediaQueryProvider.js:10:3)
    at AppProvider (/my-app
/node_modules/.pnpm/@shopify+polaris@11.23.0_react-dom@18.2.0_react@18.2.0/node_modules/@sho
pify/polaris/build/cjs/components/AppProvider/AppProvider.js:39:5)
    at AppProvider
(/my-app/node_modules/.pnpm/@shopify+shopify-a
pp-remix@1.3.0_@remix-run+react@2.0.1_@shopify+polaris@11.23.0_react@18.2.0/node_modules/@sh
opify/shopify-app-remix/build/cjs/react/components/AppProvider/AppProvider.js:78:5)
    at App3
(/my-app/build/index.js:41547:52)
    at RenderedRoute
(/my-app/node_modules/.pnpm/react-router@6.16.
0_react@18.2.0/node_modules/react-router/dist/umd/react-router.development.js:516:7)
    at RenderErrorBoundary
(/my-app/node_modules/.pnpm/react-router@6.16.
0_react@18.2.0/node_modules/react-router/dist/umd/react-router.development.js:463:7)
    at Outlet
(/my-app/node_modules/.pnpm/react-router@6.16.
0_react@18.2.0/node_modules/react-router/dist/umd/react-router.development.js:1049:28)
    at body
    at html
    at App
    at RenderedRoute
(/my-app/node_modules/.pnpm/react-router@6.16.
0_react@18.2.0/node_modules/react-router/dist/umd/react-router.development.js:516:7)
    at RenderErrorBoundary
(/my-app/node_modules/.pnpm/react-router@6.16.
0_react@18.2.0/node_modules/react-router/dist/umd/react-router.development.js:463:7)
    at DataRoutes
(/my-app/node_modules/.pnpm/react-router-dom@6
.16.0_react-dom@18.2.0_react@18.2.0/node_modules/react-router-dom/server.js:117:3)
    at Router
(/my-app/node_modules/.pnpm/react-router@6.16.
0_react@18.2.0/node_modules/react-router/dist/umd/react-router.development.js:1070:17)
    at StaticRouterProvider
(/my-app/node_modules/.pnpm/react-router-dom@6
.16.0_react-dom@18.2.0_react@18.2.0/node_modules/react-router-dom/server.js:65:3)
    at RemixErrorBoundary (/my-app//shop
ify-app/node_modules/.pnpm/@remix-run+react@2.0.1_react-dom@18.2.0_react@18.2.0_typescript@5
.2.2/node_modules/@remix-run/react/dist/errorBoundaries.js:40:5)
    at RemixServer (/my-app
/node_modules/.pnpm/@remix-run+react@2.0.1_react-dom@18.2.0_react@18.2.0_typescript@5.2.2/no
de_modules/@remix-run/react/dist/server.js:47:3)
ReferenceError: navigator is not defined
    at Object.useBrowserCheck (/my-app//
shopify-app/node_modules/.pnpm/@shopify+polaris-viz@9.13.0_react-dom@18.2.0_react@18.2.0/nod
e_modules/@shopify/polaris-viz/build/cjs/hooks/useBrowserCheck.js:10:9)
    at Object.usePrintResizing (/my-app/
/shopify-app/node_modules/.pnpm/@shopify+polaris-viz@9.13.0_react-dom@18.2.0_react@18.2.0/no
de_modules/@shopify/polaris-viz/build/cjs/hooks/usePrintResizing.js:17:23)
    at ChartDimensions
(/my-app/node_modules/.pnpm/@shopify+polaris-v
iz@9.13.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/polaris-viz/build/cjs/componen
ts/ChartContainer/components/ChartDimensions/ChartDimensions.js:35:20)
    at renderWithHooks
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderNode
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12)
    at renderHostElement
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3)
ReferenceError: navigator is not defined
    at Object.useBrowserCheck (/my-app//
shopify-app/node_modules/.pnpm/@shopify+polaris-viz@9.13.0_react-dom@18.2.0_react@18.2.0/nod
e_modules/@shopify/polaris-viz/build/cjs/hooks/useBrowserCheck.js:10:9)
    at Object.usePrintResizing (/my-app/
/shopify-app/node_modules/.pnpm/@shopify+polaris-viz@9.13.0_react-dom@18.2.0_react@18.2.0/no
de_modules/@shopify/polaris-viz/build/cjs/hooks/usePrintResizing.js:17:23)
    at ChartDimensions
(/my-app/node_modules/.pnpm/@shopify+polaris-v
iz@9.13.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/polaris-viz/build/cjs/componen
ts/ChartContainer/components/ChartDimensions/ChartDimensions.js:35:20)
    at renderWithHooks
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderNode
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12)
    at renderHostElement
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3)
ReferenceError: navigator is not defined
    at Object.useBrowserCheck (/my-app//
shopify-app/node_modules/.pnpm/@shopify+polaris-viz@9.13.0_react-dom@18.2.0_react@18.2.0/nod
e_modules/@shopify/polaris-viz/build/cjs/hooks/useBrowserCheck.js:10:9)
    at Object.usePrintResizing (/my-app/
/shopify-app/node_modules/.pnpm/@shopify+polaris-viz@9.13.0_react-dom@18.2.0_react@18.2.0/no
de_modules/@shopify/polaris-viz/build/cjs/hooks/usePrintResizing.js:17:23)
    at ChartDimensions
(/my-app/node_modules/.pnpm/@shopify+polaris-v
iz@9.13.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/polaris-viz/build/cjs/componen
ts/ChartContainer/components/ChartDimensions/ChartDimensions.js:35:20)
    at renderWithHooks
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderNode
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12)
    at renderHostElement
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3)
ReferenceError: navigator is not defined
    at Object.useBrowserCheck (/my-app//
shopify-app/node_modules/.pnpm/@shopify+polaris-viz@9.13.0_react-dom@18.2.0_react@18.2.0/nod
e_modules/@shopify/polaris-viz/build/cjs/hooks/useBrowserCheck.js:10:9)
    at Object.usePrintResizing (/my-app/
/shopify-app/node_modules/.pnpm/@shopify+polaris-viz@9.13.0_react-dom@18.2.0_react@18.2.0/no
de_modules/@shopify/polaris-viz/build/cjs/hooks/usePrintResizing.js:17:23)
    at ChartDimensions
(/my-app/node_modules/.pnpm/@shopify+polaris-v
iz@9.13.0_react-dom@18.2.0_react@18.2.0/node_modules/@shopify/polaris-viz/build/cjs/componen
ts/ChartContainer/components/ChartDimensions/ChartDimensions.js:35:20)
    at renderWithHooks
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderNode
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12)
    at renderHostElement
(/my-app/node_modules/.pnpm/react-dom@18.2.0_r
eact@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3)

I'm using the latest versions of everything.

paambaati commented

@mattsrobot Can you show me how (and where) you are initializing the Provider?

envex commented

@paambaati polaris-viz doesn't currently support being server rendered.

  • 👍1
  • 👀1
Zwyx commented

Hey @mattsrobot, I'm also using the Shopify App Remix template, I've been struggling for a couple of hours, I can't make it work.

Would you be able to share with us your method or a demo project? It would be greatly appreciated.

I've set up serverDependenciesToBundle, I've tried to lazy load Polaris Viz (in app.jsx and in app._index.jsx), got the same error as @paambaati, tried to conditionally display it on the client only, which created some hydration errors... I've run out of things to try.

  • 👍1
mattsrobot commented

Hey @Zwyx @paambaati

I'de be happy to share!! For reference, @envex is right in that Polaris-Viz doesn't support client side rendering, so you may encounter errors because of this.

You will need to use the ClientOnly component to wrap the provider with.

import { ClientOnly } from "remix-utils";

And then your provider code might look something like:

 <ClientOnly fallback={<Card><SkeletonBodyText /></Card>}>
   {() => {
         return <PolarisVizProvider>
         // Graph stuff here
        </PolarisVizProvider> ;
     }}
</ClientOnly>

(Not trying to self promote, but since it was asked for)

I'm going to create some content specifically for creating Remix Shopify apps on my YouTube channel.

I will prepare a demo project on GitHub with examples from what I've learned building my own apps.

Hope that helps!!

  • 👍1
Zwyx commented

Ah thanks Matt! I've got it working!

I used ClientOnly, and no lazy loading (simply import normally: import { LineChart, PolarisVizProvider } from "@shopify/polaris-viz";).

Now I'm fighting with the tooltip, which appears at the bottom of the page, instead of on the graph 😄

Congrats and all the best for your YouTube channel and Zenshop, which looks like a great app!

  • 🎉3
paambaati commented

I got it working, thanks to the hints from both @mattsrobot and @Zwyx. Here's what I had to do –

  1. Install remix-utils@next (not the latest stable version, but the next version) – Starting from remix-utils@7.0.1, you can simple install remix-utils.
  2. Include all the transitive deps of @shopify/polaris-viz as a list in remix.config.js as shown in #1425 (comment), as well as /remix-utils/, as shown in sergiodxa/remix-utils#228 (comment)
  3. Update tsconfig.json to update moduleResolution to Bundler and the module from node to ES2022, as shown in sergiodxa/remix-utils#228 (comment)
  4. Finally use the ClientOnly, PolarisVizProvider and my chart component as shown in #1425 (comment)
  • 👍4
mehmettekn commented

Pretty funny that Shopify doesn't support the use of their own data visualization library in their own app template. I think I'll use another React library that works out of the box...

  • 😕6
mehmettekn commented

I got it working, thanks to the hints from both @mattsrobot and @Zwyx. Here's what I had to do –

  1. Install remix-utils@next (not the latest stable version, but the next version)
  2. Include all the transitive deps of @shopify/polaris-viz as a list in remix.config.js as shown in require() of ES Module not supported #1425 (comment), as well as /remix-utils/, as shown in Add support for Remix v2.0.0 sergiodxa/remix-utils#228 (comment)
  3. Update tsconfig.json to update moduleResolution to Bundler and the module from node to ES2022, as shown in Add support for Remix v2.0.0 sergiodxa/remix-utils#228 (comment)
  4. Finally use the ClientOnly, PolarisVizProvider and my chart component as shown in require() of ES Module not supported #1425 (comment)

Is this for Shopify's Remix template?

paambaati commented

Is this for Shopify's Remix template?

@mehmettekn That is correct, yes.

michsko544 commented

I am using Remix template with Vite. I followed paambaati instructions and to fix the error, instead of remix.config.js I had to change vite.config.ts to the following:

export default defineConfig({
  ...
  ssr: {
    noExternal: [
      "/remix-utils/",
      "@shopify/polaris-viz",
      "@juggle/resize-observer",
      "@react-spring/animated",
      "@react-spring/core",
      "@react-spring/shared",
      "@react-spring/types",
      "@react-spring/web",
      "@shopify/polaris-viz",
      "@shopify/polaris-viz-core",
      "d3-array",
      "d3-color",
      "d3-format",
      "d3-interpolate",
      "d3-path",
      "d3-scale",
      "d3-shape",
      "d3-time",
      "d3-time-format",
      "internmap",
      "use-debounce",
    ],
  },
}) satisfies UserConfig;

Thank you @paambaati your instructions were very helpful 😁

  • ❤️2
ChaseWNorton commented

These instructions produced rendering, but the styling and everything is simply off. Tooltips show up off the frame, general styling is broken, and we still get the require error on hot reload. This bug has been open for 1 1/2 years?

  • 👍1
block2k commented

Hey @Zwyx @paambaati

I'de be happy to share!! For reference, @envex is right in that Polaris-Viz doesn't support client side rendering, so you may encounter errors because of this.

You will need to use the ClientOnly component to wrap the provider with.

import { ClientOnly } from "remix-utils";

And then your provider code might look something like:

 <ClientOnly fallback={<Card><SkeletonBodyText /></Card>}>
   {() => {
         return <PolarisVizProvider>
         // Graph stuff here
        </PolarisVizProvider> ;
     }}
</ClientOnly>

(Not trying to self promote, but since it was asked for)

I'm going to create some content specifically for creating Remix Shopify apps on my YouTube channel.

I will prepare a demo project on GitHub with examples from what I've learned building my own apps.

Hope that helps!!

This work for me, but only in dev mode, after I build the shopify project remix for run on production, it's only display content in fallback, not display the children of ClientOnly

ggillespie948 commented

If anyone has a work-around for the tooltips would love to hear it

envex commented

@ggillespie948 Do you have a video of the issue?

Can you also try wrapping the chart in a div with position: relative?