EUI doesn't transpile bundle to ES5

[sorenlouv]

I wanted to play with EUI outside Kibana, by using create-react-app:

import React from 'react';
import ReactDOM from 'react-dom';
import { EuiIcon } from '@elastic/eui';

const App = () => <EuiIcon type="logoKibana" />;

ReactDOM.render(<App />, document.getElementById('root'));

This throws the following error:

./node_modules/@elastic/eui/src/components/header/header_breadcrumbs/header_breadcrumb.js
Module parse failed: Unexpected token (10:2)
You may need an appropriate loader to handle this file type.
|   children,
|   className,
|   ...rest
| }) => {
|   const classes = classNames('euiHeaderBreadcrumb', className, {

it seems to be caused by the rest parameter, which is an ES6 feature. The webpack config for create-react-app does not currently transpile code in node_modules and expects it to be es5 (afaict)

It's very possible that create-react-app will transpile node_modules in the future - but that will be for the upcoming v2 (release date unknown)

This is also a problem for ordinary webpack setups (that exclude node_modules by default) so it might be worth looking into even after v2 comes out.

[chandlerprall]

Look's like the issue is EUI's module and jsnext:main fields are pointing at src instead of lib. Changing this shouldn't have any impact except allow what you're describing.

@pugnascotia thoughts? does Kibana benefit from building against the original source?

[chandlerprall]

The npm package also contains a transpiled bundle, but you'd have to import from @elastic/eui/dist/eui or setup a webpack alias to look there.

[sorenlouv]

The npm package also contains a transpiled bundle, but you'd have to import from @elastic/eui/dist/eui or setup a webpack alias to look there.

I actually tried exactly this with import { EuiIcon } from '@elastic/eui/dist/eui'; and got another error - can't remember what it is now. Can try it out again later if needed.

[pugnascotia]

Cloud UI is just importing from @elastic/eui though we may have a webpack setting to select what main fields we respect.

[pugnascotia]

@chandlerprall Do we have any intention of changing anything here? You could argue that it's the consumer's problem - for example, I've heard that Gatsby imports from EUI just fine, so its webpack config is presumably configured similarly to Cloud UI.

[chandlerprall]

@pugnascotia Right. The issue is that create-react-app intentionally made the choice to use modules and not let consumers change that. I would like to make the change to EUI so that modules points at lib, but a couple things need to happen around typescript support first (no TS files exist in lib right now), and that relies on the typescript compilation support in EUI which should be coming in the next few weeks. After that, I believe these changes can be experimented with to ensure we don't negatively affect Kibana or Cloud.

Not publishing src gives EUI more flexibility - for example we could use some fancy new compilation thing and not worry about updating downstream projects.

[chandlerprall]

This also affects canvas, which has to include a webpack config targeting EUI to compile.

[pugnascotia]

Although I personally find it handy having src available in the published module, since I can quickly refer to it in my IDE, if not publishing src helps address this issue then I'm +1.

[bevacqua]

+1 to removing src, as it eliminates the scenario where "debugging in a dependency" results in "wasting time in src instead of lib"