Skip to content

Error when trying to use EUI with Observable Framework #7847

@walterra

Description

@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 '../../refractor@3.6.0/_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/eui@95.2.0/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 '../../refractor@3.6.0/_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/eui@95.2.0/index.js

Expected behavior

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Stale(Don't delete - used for automation)known issue

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions