Anybody had success implementing Highcharts? #8153

viniciusbo · 2023-11-27T18:45:22Z

viniciusbo
Nov 27, 2023

Hello there. First time trying out Remix for a new project.

I'm trying to add Highcharts to my Remix project but I can't get it working. The following error is thrown:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I think the issue could be due to Remix trying to render this code on the server, but even forcing client-side rendering/bundling, the app returns the error above.

Does anybody had success implementing Highcharts in Remix?

I've also tried using chart.client.jsx along with ClientOnly for the Chart component, but no success. Also tried rendering everything on the server, but also couldn't get it to work. Also tried searching stackoverflow/github for any previous attempt to make Highcharts work with Remix, but couldn't find anything.

What am I doing wrong? Any advices towards the right path? Thank you in advance.

Here's the code:

root.jsx

import {
 Links,
 Meta,
 Outlet,
 Scripts,
} from "@remix-run/react";
import Chart from "../chart";

export default function App() {
 return (
   <html>
     <head>
       <link
         rel="icon"
         href="data:image/x-icon;base64,AA"
       />
       <Meta />
       <Links />
     </head>
     <body>
       <h1>Hello world!</h1>

       <Chart />

       <Outlet />
       <Scripts />
     </body>
   </html>
 );
}

chart.jsx

import { ClientOnly } from "remix-utils/client-only";
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const options = {
  title: {
    text: 'My chart'
  },
  series: [{
    data: [1, 2, 3]
  }]
}

export default function Chart() {
  return (
    <ClientOnly fallback={'Fallback'}>
      {() => (
        <div>
          <HighchartsReact
            highcharts={Highcharts}
            options={options}
          />
        </div>
      )}
    </ClientOnly>
  )
}

remix.config.cjs

module.exports = {
  serverDependenciesToBundle: [
    /^remix-utils.*/,
    "highcharts",
  ],
};

Answered by kiliman

Nov 28, 2023

View full answer

kiliman · 2023-11-28T15:50:42Z

kiliman
Nov 28, 2023
Maintainer

Here's a StackBlitz

https://stackblitz.com/edit/remix-run-remix-xnlpw8?file=app%2Froutes%2F_index.tsx

3 replies

kiliman Nov 28, 2023
Maintainer

Answer selected by viniciusbo

viniciusbo Nov 28, 2023
Author

I really appreciate the time you took to make it work. Now I know how this situation should be handled. Thank you.

kiliman Nov 28, 2023
Maintainer

Yes, typically, when dealing with components that don't support SSR, I simply re-export everything from a *.client file and import from there.

khanhnqnd · 2024-05-22T17:41:44Z

khanhnqnd
May 22, 2024

Import

import HighchartsReact from "highcharts-react-official";
import Highcharts from 'highcharts';

Use CSR (Client Side Rendering)

 const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true);
  }, []);

Return function

 return (
    <>
      {
        isClient ? (
          <HighchartsReact highcharts={Highcharts}/>
        ) : null
      }
    </>
  )

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Anybody had success implementing Highcharts? #8153

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Anybody had success implementing Highcharts? #8153

Uh oh!

Uh oh!

viniciusbo Nov 27, 2023

Replies: 2 comments · 3 replies

Uh oh!

kiliman Nov 28, 2023 Maintainer

Uh oh!

kiliman Nov 28, 2023 Maintainer

Uh oh!

viniciusbo Nov 28, 2023 Author

Uh oh!

kiliman Nov 28, 2023 Maintainer

Uh oh!

khanhnqnd May 22, 2024

viniciusbo
Nov 27, 2023

Replies: 2 comments 3 replies

kiliman
Nov 28, 2023
Maintainer

kiliman Nov 28, 2023
Maintainer

viniciusbo Nov 28, 2023
Author

kiliman Nov 28, 2023
Maintainer

khanhnqnd
May 22, 2024