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.
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/euiI 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/euiI get the following error:TypeError: Failed to fetch dynamically imported module: http://127.0.0.1:3000/_node/@elastic/eui@95.2.0/index.jsEnvironment and versions
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 devNow update on of the existing md files like
src/example-report.mdand add the following lines: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.
Then update the code in your markdown file and remove the
npm:prefix from the import: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.jsExpected behavior
EUI imports should work and render the EUI components within Observable Framework pages.