Viz Plugin is not building anymore

[victorfonseca]

Bug description

When I just follow the basic process to create a plugin, the build process is not working anymore. I did following the README steps, and the error always prompt:

npm ci npm run build npm warn deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated npm warn deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142 npm warn deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated npm warn deprecated [email protected]: this library is no longer supported npm warn deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated npm warn deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated npm warn deprecated [email protected]: use String.prototype.padStart() npm warn deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added npm warn deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm warn deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm warn deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142 npm warn deprecated @boost/[email protected]: Package has been deprecated. Core has been split into multiple stand-alone packages. https://github.com/milesj/boost

added 1431 packages, and audited 1432 packages in 21s

110 packages are looking for funding run npm fund for details

68 vulnerabilities (47 moderate, 17 high, 4 critical)

To address issues that do not require attention, run: npm audit fix

Some issues need review, and may require choosing a different dependency.

Run npm audit for details.

[email protected] prebuild rimraf {lib,esm,tsconfig.tsbuildinfo}

[email protected] build npm run build-cjs && npm run build-esm && npm run ts-types

[email protected] build-cjs babel src --extensions ".ts,.tsx,.js,.jsx" --copy-files --out-dir lib

Successfully compiled 7 files with Babel (398ms).

[email protected] build-esm BABEL_OUTPUT=esm babel src --extensions ".ts,.tsx,.js,.jsx" --copy-files --out-dir esm

Successfully compiled 7 files with Babel (284ms).

[email protected] ts-types tsc --build

[email protected] postbuild npm run test

[email protected] test jest

FAIL test/plugin/transformProps.test.ts ● Test suite failed to run

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

ReferenceError: window is not defined

  17 |  * under the License.
  18 |  */
> 19 | import { ChartProps, supersetTheme } from '@superset-ui/core';
     | ^
  20 | import transformProps from '../../src/plugin/transformProps';
  21 |
  22 | describe('KeywardChart01 transformProps', () => {

  at Object.<anonymous> (node_modules/@superset-ui/core/lib/utils/logging.js:24:17)
  at Object.<anonymous> (node_modules/@superset-ui/core/lib/utils/index.js:45:39)
  at Object.<anonymous> (node_modules/@superset-ui/core/lib/index.js:13:14)
  at Object.require (test/plugin/transformProps.test.ts:19:1)

FAIL test/plugin/buildQuery.test.ts ● Test suite failed to run

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

ReferenceError: window is not defined

  17 |  * under the License.
  18 |  */
> 19 | import { buildQueryContext, QueryFormData } from '@superset-ui/core';
     | ^
  20 |
  21 | /**
  22 |  * The buildQuery function is used to create an instance of QueryContext that's

  at Object.<anonymous> (node_modules/@superset-ui/core/lib/utils/logging.js:24:17)
  at Object.<anonymous> (node_modules/@superset-ui/core/lib/utils/index.js:45:39)
  at Object.<anonymous> (node_modules/@superset-ui/core/lib/index.js:13:14)
  at Object.require (src/plugin/buildQuery.ts:19:1)
  at Object.require (test/plugin/buildQuery.test.ts:19:1)

FAIL test/index.test.ts ● Test suite failed to run

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.

ReferenceError: window is not defined

  17 |  * under the License.
  18 |  */
> 19 | import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
     | ^
  20 | import buildQuery from './buildQuery';
  21 | import controlPanel from './controlPanel';
  22 | import transformProps from './transformProps';

  at Object.<anonymous> (node_modules/@superset-ui/core/lib/utils/logging.js:24:17)
  at Object.<anonymous> (node_modules/@superset-ui/core/lib/utils/index.js:45:39)
  at Object.<anonymous> (node_modules/@superset-ui/core/lib/index.js:13:14)
  at Object.require (src/plugin/index.ts:19:1)
  at Object.require (src/index.ts:20:1)
  at Object.require (test/index.test.ts:19:1)

Test Suites: 3 failed, 3 total Tests: 0 total Snapshots: 0 total Time: 0.588 s Ran all test suites.

How to reproduce the bug

Create the plugin with YO, follow the steps and then:

keyward-chart-01

This is the Keyward Chart 01 Superset Chart Plugin.

Usage

To build the plugin, run the following commands:

npm ci
npm run build

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

Not applicable

Node version

18 or greater

Browser

Chrome

Additional context

No response

Checklist

• [X] I have searched Superset docs and Slack and didn't find a solution to my problem.
• [X] I have searched the GitHub issue tracker and didn't find a similar bug report.
• [X] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot[bot]]

Hey @victorfonseca! I'm here to help you with any bugs, questions, or contributions you have for the Viz Plugin. Let's work through this together!

I found a similar closed issue that might help you resolve the problem:

1. Custom Viz Plugin throwing error after executing yo @superset-ui/superset: This issue was closed and the suggested solution was to change to [email protected] ^[1].

Additionally, the window is not defined error you're encountering is likely due to the tests being run in a Node.js environment where window is not available. To resolve this, you can mock the window object in your tests. Here is an example of how you can modify your test setup:

import { AriaAttributes } from 'react';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
import 'jest-enzyme';
import jQuery from 'jquery';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { configure as configureTranslation } from '../../packages/superset-ui-core/src/translation';
import { Worker } from './Worker';
import { IntersectionObserver } from './IntersectionObserver';
import { ResizeObserver } from './ResizeObserver';
import setupSupersetClient from './setupSupersetClient';
import CacheStorage from './CacheStorage';

configure({ adapter: new Adapter() });

const exposedProperties = ['window', 'navigator', 'document'];

const { defaultView } = document;
if (defaultView != null) {
  Object.keys(defaultView).forEach(property => {
    if (typeof global[property] === 'undefined') {
      exposedProperties.push(property);
      global[property] = defaultView[property];
    }
  });
}
const g = global as any;
g.window ??= Object.create(window);
g.window.location ??= { href: 'about:blank' };
g.window.performance ??= { now: () => new Date().getTime() };
g.window.Worker ??= Worker;
g.window.IntersectionObserver ??= IntersectionObserver;
g.window.ResizeObserver ??= ResizeObserver;
g.window.featureFlags ??= {};
g.URL.createObjectURL ??= () => '';
g.caches = new CacheStorage();

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

g.$ = jQuery(g.window);

configureTranslation();
setupSupersetClient();

jest.mock('src/hooks/useTabId', () => ({
  useTabId: () => 1,
}));

jest.mock('react-markdown', () => (props: any) => <>{props.children}</>);
jest.mock('rehype-sanitize', () => () => jest.fn());
jest.mock('rehype-raw', () => () => jest.fn());
jest.mock('src/components/Icons/Icon', () => ({
  __esModule: true,
  default: ({
    fileName,
    role,
    'aria-label': ariaLabel,
    ...rest
  }: {
    fileName: string;
    role: string;
    'aria-label': AriaAttributes['aria-label'];
  }) => (
    <span
      role={role ?? 'img'}
      aria-label={ariaLabel || fileName.replace('_', '-')}
      {...rest}
    />
  ),
  StyledIcon: ({
    role,
    'aria-label': ariaLabel,
    ...rest
  }: {
    role: string;
    'aria-label': AriaAttributes['aria-label'];
  }) => <span role={role ?? 'img'} aria-label={ariaLabel} {...rest} />,
}));

process.env.WEBPACK_MODE = 'test';

This setup ensures that the window object and other necessary global objects are mocked during the tests, preventing the window is not defined error ^[2][3].

For the deprecation warnings, consider updating your dependencies to their latest versions, particularly those that are flagged as deprecated. You can also switch to the "jsdom" test environment in your Jest configuration to resolve the ReferenceError: window is not defined errors ^[4][5][6].

To continue talking to Dosu, mention @dosu.

[victorfonseca]

I'm still not able to build a plugin, anyone has any recent interactions with it?

if you follow this tutorial https://preset.io/blog/building-custom-viz-plugins-in-superset-v2/ it will not work with the current version of apache superset on master.

[hainenber]

I'm still not able to build a plugin, anyone has any recent interactions with it?

Yes, that was me with this upgrade PR. Apologies for the inconvenience!

Jest v29 no longer brings along JSDOM so we have to explicitly configure in Jest config and add into package.json. If you're getting blocked atm, please help following the changes in linked PR.