require() of ES Module not supported #1425
Comments
|
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"; |
|
Thanks Gil, Hope Shopify team can share a solution for us |
|
Running into this as well I tried using it in a client component: |
|
Any news? Would really love to use it on my project. Thanks! |
|
Having this same issue as well, please prioritize this one! |
|
+1 |
|
Any news on this? Will it work in a lower version of NextJs? Perhaps Next 12? |
|
+1 |
1 similar comment
|
+1 |
Any idea when it will be fixed? |
|
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,
}
); |
|
@gil-- where were you when I had to submit that project to the university? hahhahaa, I couldn't figure it out at the time! :( |
I got the same error. Did not work for me. |
|
I know it's still a bandaid, but I was able to get things up and running (without any modifications) in Next |
|
Did not work either 😢 |
Are you getting any new errors? What version of polaris-viz and Next are you using? |
|
I'm running into this, using @shopify/polaris-viz 8.0.2 and next 13.2.4 on nodejs 18.15.0. 👋
|
|
@envex Any chance of this issue being cleared? I'd love to use this in our merchant-facing stuffs. |
|
Getting the same error, and NextJS config |
|
@isaacbowen Sorry, we don't have any current plans to tackle this issue in the near future. |
|
@isaacbowen @AndrejMazhenkovski I just tested this with |
|
FANTASTIC. This worked for |
Now we're talking! Thanks!
|
|
This isn't strictly an issue in NextJS, but any renderer that takes place in Node which doesn't have |
|
Confirmed working on 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 },
) |
|
👋 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 useEffect(() => {
const load = async () => {
const {PolarisVizLightTheme} = await import('@shopify/polaris-viz');
...
};
load();
}, []);PR: https://github.com/Shopify/shop-campaigns/pull/2633 |
|
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. |
|
@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 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. |
|
I was able to get it to work!
The process involved modifying the remix config thus: |
|
@mattsrobot Nice ahahah! Glad to help and very beautiful website, inspired in Remix landing page I see kkkk! |
|
@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"
)
],
}; |
|
@mattsrobot With your suggested fixes, I can get past the ESM error, but I still see this error – 
with these traces – I'm using the latest versions of everything. |
|
@mattsrobot Can you show me how (and where) you are initializing the Provider? |
|
@paambaati polaris-viz doesn't currently support being server rendered. |
|
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 |
|
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!! |
|
Ah thanks Matt! I've got it working! I used 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! |
|
I got it working, thanks to the hints from both @mattsrobot and @Zwyx. Here's what I had to do –
|
|
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... |
Is this for Shopify's Remix template? |
@mehmettekn That is correct, yes. |
|
I am using Remix template with Vite. I followed paambaati instructions and to fix the error, instead of 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 😁 |
|
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? |
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 |
|
If anyone has a work-around for the tooltips would love to hear it |
|
@ggillespie948 Do you have a video of the issue? Can you also try wrapping the chart in a div with |
|
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 |
|
@mahdi-akbary thanks mate that has done the trick |
|
My build broke due to This works for me, hopefully won't break due to being auto-excluded. |
|
This is the real trick: npm i --save remix-utilsapp.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>
} |
and others
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
The text was updated successfully, but these errors were encountered: