Error when trying to use EUI with Observable Framework

[walterra]

Describe the bug

I'm trying to use EUI with Observable Framework (https://observablehq.com/framework/what-is-framework). Observable Framework offers 2 ways to use js libraries, both seem to fail with EUI.

When trying to render EUI via npm:@elastic/eui I get the following error:

SyntaxError: The requested module '../../[email protected]/_esm.js' does not provide an export named 'highlight'

When trying to render EUI via node:@elastic/eui I get the following error:

TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:3000/_node/@elastic/[email protected]/index.js

Environment and versions

• EUI version: 95.2.0
• React version: 18.3.1
• Observable Framework: 1.9.0

To Reproduce

Go through the steps of the tutorial to set up Observable Framework (https://observablehq.com/framework/getting-started):

yarn create @observablehq
cd hello-framework
yarn dev

Now update on of the existing md files like src/example-report.md and add the following lines:

```js
import {EuiProvider,EuiText} from "npm:@elastic/eui";
```

```jsx
display(
  <EuiProvider colorMode="light">
    <EuiText><p>Hello World!</p></EuiText>
  </EuiProvider>
);
```

This will render the following error:

SyntaxError: The requested module '../../[email protected]/_esm.js' does not provide an export named 'highlight'

---

Here's how to reproduce the error when installing EUI locally within the Observable Framework project.

# Stop the dev server if running, then install EUI:
yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/css moment react react-dom

Then update the code in your markdown file and remove the npm: prefix from the import:

```js
import {EuiProvider,EuiText} from "@elastic/eui";
```

```jsx
display(
  <EuiProvider colorMode="light">
    <EuiText><p>Hello World!</p></EuiText>
  </EuiProvider>
);
```

This will render the following error:

TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:3000/_node/@elastic/[email protected]/index.js

Expected behavior

EUI imports should work and render the EUI components within Observable Framework pages.

[cee-chen]

@walterra Do you mind clarifying if you're trying to use Observable Framework for an Elastic/Kibana project or for personal side use? That will help us determine priority/support.

[JasonStoltz]

@walterra I'm unfamiliar with that framework. Were you able to find any additional context from Observable Framework docs or resources that could give us a clue to what is triggering those errors?

[walterra]

Hey! I came across this during ON Week and just wanted to document it should others come across it. It's definitely low priority from my point of view!

I'm suspecting it might be related to what others have seen in other contexts with how EUI builds/imports its icons.

[JasonStoltz]

@walterra Rad! Thanks for reporting it in that case. We'll note it here.