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

**URL:** <https://community.grafana.com/t/using-a-external-lib-module-to-develop-a-plugin-causes-transpilation-error/65680>\
**Category:** Grafana Plugin Development\
**Created:** [May 13, 2022, 2:22pm UTC](https://community.grafana.com/t/using-a-external-lib-module-to-develop-a-plugin-causes-transpilation-error/65680 "2022-05-13T14:22:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielmichalichyn](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/danielmichalichyn/32/23214_2.png) [@danielmichalichyn](https://community.grafana.com/u/danielmichalichyn)\
**Post date:** [May 13, 2022, 2:22pm UTC](https://community.grafana.com/t/using-a-external-lib-module-to-develop-a-plugin-causes-transpilation-error/65680/1 "2022-05-13T14:22:08Z")

</div>

Hello,

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](https://www.npmjs.com/package/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:

```auto
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:

```auto
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!

---

<div class="post-metadata">

**Author:** ![TaiyoShin](https://avatars.discourse-cdn.com/v4/letter/t/e19b73/32.png) [@TaiyoShin](https://community.grafana.com/u/TaiyoShin)\
**Post date:** [May 17, 2022, 8:42am UTC](https://community.grafana.com/t/using-a-external-lib-module-to-develop-a-plugin-causes-transpilation-error/65680/2 "2022-05-17T08:42:56Z")

</div>

Hi Daniel.

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

---

<div class="post-metadata">

**Author:** ![danielmichalichyn](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/danielmichalichyn/32/23214_2.png) [@danielmichalichyn](https://community.grafana.com/u/danielmichalichyn)\
**Post date:** [May 17, 2022, 1:16pm UTC](https://community.grafana.com/t/using-a-external-lib-module-to-develop-a-plugin-causes-transpilation-error/65680/3 "2022-05-17T13:16:24Z")

</div>

This is my custom component file:

```auto
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:

```auto
...

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

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/grafana/original/2X/e/ef5308cc58c9e5a13187b5012eb99f406928462f.png) [@system](https://community.grafana.com/u/system)\
**Post date:** [May 17, 2023, 1:16pm UTC](https://community.grafana.com/t/using-a-external-lib-module-to-develop-a-plugin-causes-transpilation-error/65680/4 "2023-05-17T13:16:34Z")

</div>

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.