Error: Cannot read properties of undefined (reading 'call') when loading plugin with SCSS in OpenSearch Dashboards v2.19.0

OpenSearch Dashboards
1

Versions (relevant - OpenSearch/Dashboard/Server OS/Browser):

  • OpenSearch Dashboards: 2.19.0
  • OS: Windows
  • Browser: Chrome v123
  • Node: 18.x

Describe the issue:
I’m developing a custom plugin for OpenSearch Dashboards v2.19.0 and encountering a runtime error when trying to load the plugin in the browser:

TypeError: Cannot read properties of undefined (reading ‘call’) at webpack_require (http://localhost:5601/8260/bundles/plugin/swiftDashboard/swiftDashboard.plugin.js:1:923) at async mount (http://localhost:5601/8260/bundles/plugin/swiftDashboard/swiftDashboard.plugin.js:1:6452)

Plugin Setup I’m using the official @osd/plugin-helpers to build the plugin (yarn build). My plugin uses:

TypeScript

React (react-router-dom)

SCSS stylesheets

Dynamic import() for code splitting during mount()

plugin.ts

core.application.register({
  id: 'swiftDashboard',
  title: 'SWIFT Dashboard',
  async mount(params: AppMountParameters) {
    const { element } = params;
    try {
      const applicationsModule = await import('./applications');
      const [coreStart, depsStart] = await core.getStartServices();
      return applicationsModule.renderApp(params, coreStart, depsStart);
    } catch (error) {
      element.innerHTML = `<p>Failed to load app: ${error.message}</p>`;
      return () => {};
    }
  }
});

applications.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { BrowserRouter } from 'react-router-dom';
import './styles/main.scss'; // SCSS import

export const renderApp = (params, coreStart, plugins) => {
  ReactDOM.render(
    <BrowserRouter basename="/app/swiftDashboard">
      <App coreStart={coreStart} plugins={plugins} />
    </BrowserRouter>,
    params.element
  );

  return () => ReactDOM.unmountComponentAtNode(params.element);
};

Webpack SCSS config (not picked up by @osd/plugin-helpers)

const path = require('path');

module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: [path.resolve(__dirname, '../../../node_modules')],
              },
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
};

Additional Info SCSS files are used in component-level styles and main.scss.

renderApp is correctly exported and imported.

Dev dependencies installed:

“sass-loader”: “^12.6.0”

“sass”: “^1.69.0”

“style-loader”: “^2.0.0”

“css-loader”: “^5.2.7”

Running yarn build builds using @osd/plugin-helpers, which seems to ignore custom webpack.config.js.

How can I correctly use SCSS in an OpenSearch Dashboards plugin without triggering Webpack runtime errors like Cannot read properties of undefined (reading ‘call’)?

Is there a recommended way to handle SCSS styles when using @osd/plugin-helpers, which doesn’t seem to allow custom webpack.config.js?

Could dynamic imports or CSS processing be interfering with OpenSearch Dashboards’ build/runtime system?