Error: Cannot find module './assets/lock' when using <EuiFieldPassword /> component

[IanChok]

Cannot find assets ./assets/lock and ./assets/eye when using the component.

Login Component

import { EuiButton, EuiFieldPassword, EuiFieldText, EuiForm, EuiFormRow } from '@elastic/eui';
import React, { useState } from 'react';
export default function () {
    const [value, setValue] = useState('');

    return (
        <EuiForm component="form">
        <EuiFormRow label="Username">
          <EuiFieldText name="username" />
        </EuiFormRow>
        <EuiFormRow label="Password">
          <EuiFieldPassword
            placeholder="Placeholder text"
            type={"dual"}
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
        </EuiFormRow>
        <EuiButton type="submit" fill>
          Save form
        </EuiButton>
      </EuiForm>
    )
}

App.tsx

import React from 'react';
import Login from './Login';
import '@elastic/eui/dist/eui_theme_light.css';

export const App = () => (
  <div>
    <h1>Welcome to Meteor!</h1>
    <Login />
  </div>
);

package.json

  "dependencies": {
    "@babel/runtime": "^7.15.3",
    "@elastic/datemath": "^5.0.3",
    "@elastic/eui": "^40.0.0",
    "bcrypt": "^5.0.1",
    "meteor-node-stubs": "^1.1.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/meteor": "^1.4.70",
    "@types/mocha": "^8.2.2",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "typescript": "^4.2.4"
  },

Eui Version: 40.0.0

[cee-chen]

Meteor is polymorphic/server-side rendering, correct? If so I believe you'll need to consume our EuiIcons in this specific manner: https://github.com/elastic/eui/blob/master/wiki/consuming.md#failing-icon-imports

[IanChok]

Thanks @constancecchen ! It works, except I'm using typescript and had to add @ts-ignore above the imports

//@ts-ignore
import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';

Is there a type definition package for Eui somewhere? I can't seem to find it.

[cee-chen]

@chandlerprall Do you know if missing types when using the above icon workaround has always been an issue in the past or if it's related to #5212 somehow?

[chandlerprall]

Ah, it's likely always been an issue, we do not provide type definitions for any import path except '@elastic/eui'.

[cee-chen]

I did a quick grep through Kibana and I can confirm the teams using appendIconComponentCache have a // @ts-expect-error no definitions comment as well.

We should likely close this in favor of #5305 which was also opened recently and addresses the Typescript issue specifically.