Eui: EUI with a CRA standalone project

[ghost]

Hi. I'm having a problem while trying to use Elastic UI alongside Create React App. With a fresh react-app from CRA I get the following error:

./node_modules/@elastic/eui/es/components/icon/index.js
Attempted import error: 'IconColor' is not exported from './icon'.

The documentation of this project says that you can consume EUI in standalone projects. Is it possible to use EUI to build something with CRA? I'm asking this because CRA is useful because you don't deal with configuration files and I think that is usually something ideal.

My code is here https://github.com/fbraz/elasticui, some files are related to Electron but the same CRA boilerplate fails without those files or lines, so you can ignore them. Nevertheless, is very trivial:

// src/App.css
@import "~@elastic/eui/dist/eui_theme_light.css";

// src/App.js
import React, { Component } from 'react';
import './App.css';
import {
  EuiButton,
  EuiFlexGroup,
  EuiFlexItem,
} from '@elastic/eui';

class App extends Component {
  render() {
    return (
      <div>
        <EuiFlexGroup gutterSize="s" alignItems="center">
          <EuiFlexItem grow={false}>
            <EuiButton
              onClick={() => window.alert('Button clicked')}
            >
              Primary
            </EuiButton>
          </EuiFlexItem>
        </EuiFlexGroup>
      </div>
    );
  }
}

export default App;

What should I do in this case?

[chandlerprall]

Looks like this broke in 5.6.0; I've verified that version 5.5.1 works with create-react-app, that version can be used until a fix lands - and you'll need to add moment to your project if you haven't already (EUI lists it as a peerDependency).

Problem: the babel transpilation step does not remove imports of typescript types, interfaces (such as IconColor).

[ghost]

Thank you!

[ebuildy]

If we want to use the latest version (6.2.0), is it a workaround? (maybe a babel plugin)

[johntilley]

I got it working by deleting all the import statements for the missing modules.

[chandlerprall]

As a work around, you can import from @elastic/eui/lib instead of @elastic/eui - this pulls in commonjs modules instead of esm, which WebPack does not verify against. I plan on resolving this issue later this week or early next week.

[ebuildy]

I can confirm this works! thanks you.

[chandlerprall]

This has been fixed & confirmed working in 6.7.3. CRA apps can import directly from @elastic/eui