Код Visual Studio не импортирует автоматически из корня библиотеки

Question

Я работаю над приложением React, которое использует библиотеку компонентов Elastic UI . Я начал новый проект с create-react-app и установил необходимые зависимости eui.

Когда я пытаюсь добавить новый компонент, VSC выбирает его при автозаполнении и заполняет импорт следующим образом:

      import { EuiPage } from '@elastic/eui/src/components/page/page'
import React from 'react'

function App() {
  return (
    <div className="App">
      <EuiPage></EuiPage>
    </div>
  );
}
export default App;

Но когда это происходит, и я сохраняю, приложение не может скомпилироваться, и рабочий сервер выйдет из строя.

Я обнаружил, что если заменить импорт на

      import { EuiPage } from '@elastic/eui'

все работает нормально, но поведение по умолчанию по-прежнему вызывает сбой, и мне приходится вручную исправлять или вручную импортировать все компоненты. Как я могу настроить его так, чтобы весь импорт из эластичного всегда выглядел так?

PS: это сообщение, которое у меня остается в консоли после ее сбоя.

      Compiling...
/home/path/To/Project/ProjectName/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

[Error: ENOENT: no such file or directory, stat '/home/user/.steampath'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: '/home/user/.steampath'
}
error Command failed with exit code 1.

И это тот, который появляется в браузере

      Failed to compile

./src/App.js
Module not found: Can't resolve '@elastic/eui/src/components/page/page' in '/home/path/To/Project/ProjectName/src'