[PLUGIN] Uncaught TypeError: Cannot destructure property 'controlSetRows' of 'section' as it is undefined.

[loretoparisi]

I have followed the tutorial here for plugin development, basically doing the following:

Install Plugin Generator (Yo)

npm i -g yo
npm i -g @superset-ui/generator-superset

cd superset-frontend/packages/generator-superset
npm i && npm link

Create Example Plugin

mkdir /tmp/superset-plugin-chart-hello-world
cd /tmp/superset-plugin-chart-hello-world
yo @superset-ui/superset
...

Build Example Plugin

npm ci
npm run build

Install Example Plugin

cd superset-frontend
npm i -S /tmp/plugins/superset-plugin-chart-hello-world

And I can see the Hello World plugin in the Charts Explore correctly, but when I try to add it I get this error (in the browser console):

Uncaught TypeError: Cannot destructure property 'controlSetRows' of 'section' as it is undefined.
    at eval (getSectionsToRender.ts:66:1)
    at Array.map (<anonymous>)
    at eval (getSectionsToRender.ts:65:1)
    at memoized (memoize-one.esm.js:30:31)
    at getSectionsToRender (getSectionsToRender.ts:94:1)
    at getAllControlsState (getControlState.ts:174:1)
    at getControlsState (store.js:48:1)
    at StandardizedFormData.transform (standardizedFormData.ts:212:1)
    at Object.SET_FIELD_VALUE (exploreReducer.js:193:1)
    at exploreReducer (exploreReducer.js:280:1)

The controlPanel.ts file looks like contains a controlPanelSections as well as the controlSetRows array:

import { t, validateNonEmpty } from '@superset-ui/core';
import { ControlPanelConfig, sections, sharedControls } from '@superset-ui/chart-controls';

const config: ControlPanelConfig = {
  // For control input types, see: superset-frontend/src/explore/components/controls/index.js
  controlPanelSections: [
    sections.legacyRegularTime,
    {
      label: t('Query'),
      expanded: true,
      controlSetRows: [
        [
          {
            name: 'cols',
            config: {
              ...sharedControls.groupby,
              label: t('Columns'),
              description: t('Columns to group by'),
            },
          },
        ],
        [
          {
            name: 'metrics',
            config: {
              ...sharedControls.metrics,
              // it's possible to add validators to controls if
              // certain selections/types need to be enforced
              validators: [validateNonEmpty],
            },
          },
        ],
        ['adhoc_filters'],
        [
          {
            name: 'row_limit',
            config: sharedControls.row_limit,
          },
        ],
      ],
    },
    {
      label: t('Hello Controls!'),
      expanded: true,
      controlSetRows: [
        [
          {
            name: 'header_text',
            config: {
              type: 'TextControl',
              default: 'Hello, World!',
              renderTrigger: true,
              // ^ this makes it apply instantaneously, without triggering a "run query" button
              label: t('Header Text'),
              description: t('The text you want to see in the header'),
            },
          },
        ],
        [
          {
            name: 'bold_text',
            config: {
              type: 'CheckboxControl',
              label: t('Bold Text'),
              renderTrigger: true,
              default: true,
              description: t('A checkbox to make the '),
            },
          },
        ],
        [
          {
            name: 'header_font_size',
            config: {
              type: 'SelectControl',
              label: t('Font Size'),
              default: 'xl',
              choices: [
                // [value, label]
                ['xxs', 'xx-small'],
                ['xs', 'x-small'],
                ['s', 'small'],
                ['m', 'medium'],
                ['l', 'large'],
                ['xl', 'x-large'],
                ['xxl', 'xx-large'],
              ],
              renderTrigger: true,
              description: t('The size of your header font'),
            },
          },
        ],
      ],
    },
  ],
};

export default config;

so why the undefined error?

[shivanigurbani]

Where have you created this controlpanel.ts file,because i am facing the same issue.

[loretoparisi]

Where have you created this controlpanel.ts file,because i am facing the same issue.

@shivanigurbani it comes from the example "Hello World" plugin tutorial, it's automatically created from the template provided, I did any change to the generated source code from the tutorial, so I was not able to add that example plugin due to this issue.

[doojin]

Exactly same use case, exactly same error

[shivanigurbani]

@loretoparisi is the issue resolved?

[loretoparisi]

I didn't see any fix in progress so far...

[arnabneogi86]

Facing the same issue.
Using 4.0.0rc1 branch for superset.
and using https://github.com/preset-io/superset-plugin-chart-liquid as a new plugin.
Any idea?

[rusackas]

Does the error go away if you remove the sections.legacyRegularTime line?

I don't see that pre-defined Section in the codebase any more, so that would likely throw an undefined error.

[arnabneogi86]

Thanks it is working after removing sections.legacyRegularTime

[loretoparisi]

so you mean

controlPanelSections: [
    sections.legacyRegularTime, // <- This line
    {
...

[codewithrafiq]

After removing this line getting the same error

[loretoparisi]

After commenting sections.legacyRegularTime

To avoid the error

src/plugin/controlPanel.ts:20:30 - error TS6133: 'sections' is declared but its value is never read.

20 import { ControlPanelConfig, sections, sharedControls } from '@superset-ui/chart-controls';
                                ~~~~~~~~


Found 1 error.

I had to add inline tslint config:

/* tslint:disable:no-unused-variable */
import { ControlPanelConfig, sections, sharedControls } from '@superset-ui/chart-controls';

[loretoparisi]

While the plugin build works fine applying the fix above 👍🏾 , to make it working within a Dockerfile it may need some extra efforts - see #27483

[rusackas]

Feel free to close the discussion if you're all set, or let us know to do so if you can't for some reason :D

[codewithrafiq]

The error has not been resolved

[codewithrafiq]

Have to Remove sections from controlPanelSections array.
You find this array on tmp/<your-plugin-name>/src/plugin/controlPanel.ts DIR.
Remove this from controlPanelSections arrays in the first line.