Package does not compile due to potential mismatch of "require" and "import" syntax #278
Comments
|
Thanks for the report, which version of function-plot are you using? |
|
I'm using the latest version, 1.24.4 |
|
I think it's happening because the dist files in As a workaround try this import which uses a bundled version of function-plot which is the entire library in a single file: import functionPlot from 'function-plot/dist/function-plot'For the real solution the flow above needs to be JS Module (your app) -> JS Modlue (function plot) -> JS Module (d3). I switched to use JS modules in the master branch so you should be able to do |
|
Thank you for the response. I tried the work around, but it does not work: 
It seems that this is a breaking change. |
|
Since the documentaiton for Function-plot is solely written using JS Module syntax (and hence the users of Function-plot are more likely using ESM imports), I think that a new release for this seemingly breaking change should not be that difficult, given that you already updated the master branch for chart.js. I'll be looking forward to the release/fix. Thank you. |
|
I tried the following in a hello world parcel app and it did work: import functionPlot from 'function-plot/dist/function-plot'
functionPlot({
target: '#playground',
data: [{ fn: 'x^2', graphType: 'polyline' }]
})I suspect this might be a problem between the integration of the NextJS bundler and this library. There's a dev build not ready for production usage that already uses JS modules, could you please try with this module? |
|
Related issue in a NextJS app #217 that I think was never solved. |
|
I've reproduced this issue with the following steps:
import functionPlot from "function-plot";
import functionPlot from "function-plot/dist/function-plot"; |
|
With dev build version 1.25.0, the package loads: 
However, a new error shows on the application page: The fix for the above error seems to be moving the "default" key from "exports" to the last place, as shown below: 
|
|
Thanks for the investigation, yes I saw a similar answer online, in addition I had to make a few changes to the dependencies included. Anyways, first install the latest alpha version (not production ready yet) The toy app I have looks like this: "use client";
import React, { useRef, useEffect } from "react";
import functionPlot from "function-plot";
import styles from "./page.module.css";
export const FunctionPlot = React.memo(
({ options }) => {
const rootEl = useRef(null);
useEffect(() => {
try {
functionPlot(Object.assign({}, options, { target: rootEl.current }));
} catch (e) {}
});
return <div ref={rootEl} />;
},
() => false,
);
export default function Home() {
const options = {
data: [{ fn: "x^2", graphType: "polyline" }],
};
return (
<main className={styles.main}>
<FunctionPlot options={options} />
</main>
);
} |
|
Hi @mauriciopoppe , Thank you for the code. I just tested the code, and it shows an error: 
The error comes at the "import" line: import functionPlot from 'function-plot'; |
|
it has been a month and will there any update for this in near future? |
|
I tried the changes in #278 (comment) and they work for me, here's my setup: cd $(mktemp -d)
npx create-next-app@latest
cd my-app
npm install [email protected]
cat <<EOF > src/app/page.js
"use client";
import React, { useRef, useEffect } from "react";
import functionPlot from "function-plot";
import styles from "./page.module.css";
export const FunctionPlot = React.memo(
({ options }) => {
const rootEl = useRef(null);
useEffect(() => {
try {
functionPlot(Object.assign({}, options, { target: rootEl.current }));
} catch (e) {}
});
return <div ref={rootEl} />;
},
() => false,
);
export default function Home() {
const options = {
data: [{ fn: "x^2", graphType: "polyline" }],
};
return (
<main className={styles.main}>
<FunctionPlot options={options} />
</main>
);
}
EOF
npm run devWhen I open the dev webpage I see no errors |
|
Any follow-up on this issue? I encountered the same problem when using it (v1.25.0) in my Vitepress project. The dev server runs fine, but the build fails. I have tried the previous methods, and using When using the alpha version |
|
Based on the error message, the problematic package seems to be I looked into it and found that the |
|
I checked that I'm using |
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
I'm using Nextjs V12. When trying to use the function-plot library via import statement, the library does not work. I get the below error:
There seems to be an import mismatch between the d3-shape dependency and the chart.js dependency. I would appreciate help on solving this issue.
The text was updated successfully, but these errors were encountered: