Попытка импорта: «./components» не содержит экспорт по умолчанию (импортируется как «Приложение»)

Question

У меня есть следующая ReactJS структура проекта, и я получаю следующую ошибку:

. / Src / index. js

Попытка ошибки импорта: ' ./components 'не содержит экспорт по умолчанию (импортируемый как' App ').

Моя цель - импортировать компоненты так: import { App, Navbar } from 'components'; (обратите внимание на' компоненты '), а не как ./components/App, ./components/App/index или около того. Для этого мне нужно было добавить index. js в каталог компонентов. Я попытался сделать это с помощью следующего кода, но я получаю сообщение об ошибке выше.

В чем причина? Как мне это решить?

Существуют похожие темы, но я уже экспортирую их по export default App; в ./components/App/index.jsx. Может быть, причина в расширении .jsx?

• index. js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

• компоненты / индекс. js

export App from './App';

• компоненты / приложение / index.jsx

import React, { Fragment } from 'react';
import './style.css';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import NotAuthorizedRoute from '../../common/NotAuthorizedRoute';
import { Navbar, Home, User, Login } from 'components';

const App = () => {
  return (
    <Fragment>
      <Router>
        <Navbar />

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/users" component={User} />
          <NotAuthorizedRoute path="/sign-in" component={Login} />
          <Redirect from="*" to="/" />
        </Switch>

      </Router>
    </Fragment>
  );
};

export default App;

• компоненты / приложение /style.css

То, что я пробовал:

Я пытался сделать следующее, как люди говорили в этой теме: Попытка ошибки импорта: «Приложение» не экспортировано из.

Answer 1

Похоже, у вас возникли путаницы с синтаксисами ES6 export / import . Документация по MDN очень наглядна, я бы порекомендовал вам ее проверить.

Самое главное - запомнить разницу между именем по умолчанию и именованным экспортом / импортом. (СОВЕТ: Когда вы видите квадратные скобки в операторах экспорта / импорта, с которыми вы имеете дело с именованными)

В вашем конкретном случае c вам нужно будет сделать следующее:

• ./components/component-a.jsx

const ComponentA = () => {
  return (
    <MyComponent/>
  );
};

export {ComponentA};

• . / components / component-b.jsx

const ComponentB = () => {
  return (
    <MyComponent/>
  );
};

export {ComponentB};

• . / компоненты / индекс. js

import {componentA} from './component-a.jsx';
import {componentB} from './component-b.jsx';

export {componentA, componentB};

• . / some-file.jsx

import {componentA, componentB} from './components';

• . / some-other- file.jsx

import {componentA} from './components';

Это типичный шаблон для создания виртуального пространства имен экспорта / импорта для классификации логических модулей.

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

Обратите также внимание, что вам всегда нужно будет указывать полный относительный путь к components каталог. Единственный способ импортировать вещи из 'components' - это установить пакет components в каталог node_modules.