[bug]: Chart component does not compile

afogel commented 2 weeks ago

Describe the bug

when building in nextjs 14.1.3 with typescript 5.x, the chart component throws an error: Linting and checking validity of types ..Failed to compile.

./src/components/ui/chart.tsx:82:9
Type error: Type 'string[]' is not assignable to type 'string | TrustedHTML'.

  80 |     <style
  81 |       dangerouslySetInnerHTML={{
> 82 |         __html: Object.entries(THEMES).map(
     |         ^
  83 |           ([theme, prefix]) => `
  84 | ${prefix} [data-chart=${id}] {
  85 | ${colorConfig

Affected component/components

Chart

How to reproduce

Run next lint. It breaks the build.

The fix could be as simple as refactoring the component to be:

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([_, config]) => config.theme || config.color,
  );

  if (!colorConfig.length) {
    return null;
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES).map(
          ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color;
    return color ? `  --color-${key}: ${color};` : null;
  })
  .join("\n")}
}
`,
-         ),
+         ).join("\n"),
      }}
    />
  );
};

Codesandbox/StackBlitz link

No response

Logs

bun run build
$ next build
   ▲ Next.js 14.1.3
   - Environments: .env
   - Experiments (use at your own risk):
     · instrumentationHook

   Creating an optimized production build ...
(node:55040) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ⚠ Compiled with warnings

./node_modules/@opentelemetry/instrumentation-winston/build/src/instrumentation.js
Module not found: Can't resolve '@opentelemetry/winston-transport' in '/Users/arielfogel/Development/pillar_apps/cloud_dashboard/node_modules/@opentelemetry/instrumentation-winston/build/src'

Import trace for requested module:
./node_modules/@opentelemetry/instrumentation-winston/build/src/instrumentation.js
./node_modules/@opentelemetry/instrumentation-winston/build/src/index.js
./node_modules/@opentelemetry/auto-instrumentations-node/build/src/utils.js
./node_modules/@opentelemetry/auto-instrumentations-node/build/src/index.js
./src/instrumentation.node.ts
./src/app/api/v1/messages/route.ts

./node_modules/@descope/node-sdk/dist/index.esm.js
A Node.js API is used (process.versions at line: 1) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime

Import trace for requested module:
./node_modules/@descope/node-sdk/dist/index.esm.js
./node_modules/@descope/nextjs-sdk/dist/server/authMiddleware.js
./node_modules/@descope/nextjs-sdk/dist/server/index.js

   Linting and checking validity of types  ..Failed to compile.

./src/components/ui/chart.tsx:82:9
Type error: Type 'string[]' is not assignable to type 'string | TrustedHTML'.

  80 |     <style
  81 |       dangerouslySetInnerHTML={{
> 82 |         __html: Object.entries(THEMES).map(
     |         ^
  83 |           ([theme, prefix]) => `
  84 | ${prefix} [data-chart=${id}] {
  85 | ${colorConfig
   Linting and checking validity of types  ...error: script "build" exited with code 1

System Info

OSX

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

thekesslereffect commented 2 weeks ago

also getting this issue