require() of ES Module not supported

ahmed-adly-khalil commented 2 years ago

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 2 years ago

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'

ahmed-adly-khalil commented 2 years ago

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

chronark commented 2 years ago

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 1 year ago

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

gdayton commented 1 year ago

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

ayushsoni1001 commented 1 year ago

+1

aimproxy commented 1 year ago

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

TiagoFonseca99 commented 1 year ago

+1

Unvoided commented 1 year ago

+1

TiagoFonseca99 commented 1 year ago

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

Any idea when it will be fixed?

gil-- commented 1 year ago

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 1 year ago

@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 1 year ago

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 1 year ago

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 1 year ago

Did not work either 😢

envex commented 1 year ago

Did not work either 😢

Are you getting any new errors?

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

isaacbowen commented 1 year ago

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

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 1 year ago

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

AndrejMazhenkovski commented 1 year ago

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

envex commented 1 year ago

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

envex commented 1 year ago

@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 });

isaacbowen commented 1 year ago

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

AndrejMazhenkovski commented 1 year ago

@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!

ryanwilsonperkin commented 1 year ago

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

aimproxy commented 1 year ago

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 },
)

peylun commented 1 year ago

👋 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 1 year ago

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.

aimproxy commented 1 year ago

@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 1 year ago

@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"],

aimproxy commented 1 year ago

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

aimproxy commented 1 year ago

@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"
    )
  ],
};

paambaati commented 1 year ago

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

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 1 year ago

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

envex commented 1 year ago

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

Zwyx commented 1 year ago

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.

mattsrobot commented 1 year ago

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!!

Zwyx commented 1 year ago

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 :smile:

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

paambaati commented 1 year ago

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

~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.
Include all the transitive deps of @shopify/polaris-viz as a list in remix.config.js as shown in https://github.com/Shopify/polaris-viz/issues/1425#issuecomment-1712785999, as well as /remix-utils/, as shown in https://github.com/sergiodxa/remix-utils/issues/228#issuecomment-1732564007
Update tsconfig.json to update moduleResolution to Bundler and the module from node to ES2022, as shown in https://github.com/sergiodxa/remix-utils/issues/228#issuecomment-1742225235
Finally use the ClientOnly, PolarisVizProvider and my chart component as shown in https://github.com/Shopify/polaris-viz/issues/1425#issuecomment-1741614727

mehmettekn commented 1 year ago

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...

mehmettekn commented 1 year ago

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

Install remix-utils@next (not the latest stable version, but the next version)

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)

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)

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 1 year ago

Is this for Shopify's Remix template?

@mehmettekn That is correct, yes.

michsko544 commented 5 months ago

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 😁

ChaseWNorton commented 5 months ago

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?

block2k commented 4 months ago

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 4 months ago

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

envex commented 4 months ago

@ggillespie948 Do you have a video of the issue?

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

mahdi-akbary commented 4 months ago

Hey @ggillespie948, I was wondering if someone would ask about it, Yeah all you have to do is add the CSS to your app, in my remix app, I did like import polarisVizStyles from '@shopify/polaris-viz/build/esm/styles.css?url'; export const links = () => [ { rel: "stylesheet", href: polarisStyles }, { rel: "stylesheet", href: polarisVizStyles } ]; Btw, @envex the position: relative for the parent div doesn't work at all.

ggillespie948 commented 4 months ago

@mahdi-akbary thanks mate that has done the trick

nick-potts commented 3 months ago

My build broke due to @react-spring/rafz now also needing noExternal.

This works for me, hopefully won't break due to being auto-excluded.

   noExternal: [
      ...getDependenciesToBundle(
        "@shopify/polaris-viz",
        "@shopify/polaris-viz-core",
      ),
    ],

vpcarlos commented 1 month ago

This is the real trick:

npm i --save remix-utils

app.tsx

...
import polarisVizStyles from '@shopify/polaris-viz/build/esm/styles.css?url';
export const links = () => [{ rel: "stylesheet", href: polarisVizStyles }];
...

vite.config.tsx

...
import { getDependenciesToBundle } from "@remix-run/dev";

export default defineConfig({
...
  ssr: {
    noExternal: [
      ...getDependenciesToBundle(
        "remix-utils",
        "@shopify/polaris-viz",
        "@shopify/polaris-viz-core",
      ),
    ],
  },

}) satisfies UserConfig;

app.home.tsx


...
import { ClientOnly } from "remix-utils/client-only";

export default function Home() {
    return  <ClientOnly>
        {() => {
            return  <StackedAreaChart id="analytics" data={[...]} />
        }}
     </ClientOnly>
}

Shopify / polaris-viz