Using a external lib/module to develop a plugin causes transpilation error


I’m developing a custom App plugin for my Grafana instance, but i’m trying to use the follow NPM lib. in my code to rewrite the Select component react-select-async-paginate
This is necessary because in my select i have pretty big array to load, and would be nice to load with pagination.
But when i’m loading my plugin into Grafana with this module imported to my plugin, the following error appear:

Uncaught (in promise) SyntaxError: Unexpected token '<'
    at eval (<anonymous>)
    at le (system.js:4:25550)

If i try to just run the plugin without a build, only with “npm run dev” the following error appears:

Uncaught (in promise) TypeError: Unable to dynamically transpile ES module
   A loader plugin needs to be configured via `SystemJS.config({ transpiler: 'transpiler-module' })`.

Any help would be appreciated, thanks!

Hi Daniel.

The first message leads me to believe it’s a syntax error. Would you show a little bit of code?

This is my custom component file:

import React, { FC } from 'react';
import { AsyncPaginate } from 'react-select-async-paginate';

/** Will be implemented */
// export interface Props {
//   value: string | undefined;
//   placeholder?: string;
//   labelClassName?: string;
//   inputClassName?: string;
//   onChange: (value: string) => void;
// }

/** Testing only */
function loadOpts(search, previous) {
  return {
    options: [],
    hasMore: false,

export const CustomAsyncPaginate: FC<{}> = (props) => (
  <AsyncPaginate loadOptions={(search, previous) => loadOpts(search, previous)} />

And i’m importing like this in my plugin page:


import { CustomAsyncPaginate } from 'components/Custom/AsyncSelect';
return (
        <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
              <div style={{ paddingBottom: '5px', paddingTop: '5px' }}>Testing:</div>
              <CustomAsyncPaginate />