update to use new React context about d3plus-react HOT 6 CLOSED

UPDATE

I tried to use next-transpile-modules to load d3plus-react into my Next.js project (as one of the answers in the Stackoverflow posted by @davelandry suggested) and it works.

So just npm i next-transpile-modules and change the next.config.js file like this:

const withTM = require('next-transpile-modules')(['d3plus-react']);

module.exports = withTM({
  reactStrictMode: true
});

It works properly but I still get the Legacy context API warning from React. This makes sense because this module does exactly what I did manually and described in my previous post.

This is the warning:

Warning: Legacy context API has been detected within a strict-mode tree.
The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

So I decided to stick with my solution and replace the legacy context with the new React Context API, so I've got a correct module load and no annoying React warning.

@davelandry don't know if that's something that may be of interest to you, I just created and exported a context from Viz.js using the new syntax.

export const D3PlusContext = React.createContext({
  d3plus: {}
});

class Viz extends Component {
  static contextType = D3PlusContext;
  
  // ... everything as it was before
}

// removed this
// Viz.contextTypes = {
//   d3plus: PropTypes.object
// };

An example of usage:

import { D3PlusContext } from '../d3plus-wrapper';
/*
 * this is where I put the wrapper, I guess the best solution would be to export it from `index.js`
 * so you can just do - import { D3PlusContext } from 'd3plus-react' -
 */
 
// example of comfiguration I took from your README
const d3plusConfig = {
  shapeConfig: {
    fontFamily: "Comic Sans MS"
  }
};

const MyApp = () => {
  return (
    <D3PlusContext.Provider value={{ d3plus: d3plusConfig }}>
      <main>
        {/* child components containing visualizations */}
      </main>
    </D3PlusContext.Provider>
  );
};

export default MyApp;

Thank you for your time

from d3plus-react.

@francescocretti I also ran into the same problem using d3plus + next.js. My solution has to wrap the d3plus component I was importing with a dynamic import like the following:

import dynamic from "next/dynamic";
const TreemapCountries = dynamic(
  () => import("../../components/treemapCountries"),
  {
    ssr: false,
  }
);

My treemapCountries component then imports the required d3plus module normally.

import { Treemap } from "d3plus-react";

export default function TreemapCountries() {
  return (
    <>
      <Treemap
        config={{
          data,
           ...
        }}
      />
    </>
  );
}

from d3plus-react.

🤔 d3plus as a library is designed to run in the browser and the package is exported in ESM format. From some initial googling, I found the following StackOverflow post which says that NextJS will only compile ESM import/exports that are present in the src/ directory, and you may need to manually add the node_modules d3plus code to your NextJS loader config: https://stackoverflow.com/questions/65936222/next-js-syntaxerror-unexpected-token-export

from d3plus-react.

Ehy @davelandry, thanks for the hint, I'll take a look at it.

Meanwhile, as a temporary workaround, I managed to make it work copying the Viz.js and Geomap.js wrappers (as they are) into my project folder, installing the Geomap component directly from the d3plus-geomap package and importing it in my component, instead of using the one in node_modules.

Now I've got React complaining about the usage of Legacy context API in the Viz.js component, but that's a whole different story :)

Hope I made myself clear, I'll post news ASAP

from d3plus-react.

Thanks @alexandersimoes for the alternative!

from d3plus-react.

With version v1.2 of the library, we have upgraded the codebase to use proper imports/exports and are now exporting a Context/Provider to use when passing down global configs: https://github.com/d3plus/d3plus-react/releases/tag/v1.2.0

from d3plus-react.