嘗試導入錯誤：“./components”不包含默認導出（導入為“App”）

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 擴展名？

• 索引.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();

• 組件/index.js

export App from './App';

• 組件/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;

• 組件/App/style.css

我嘗試了什么：

我嘗試執行以下操作，就像人們在此線程中所說的那樣： Attempted import error: 'App' is not exported from './App' 。

• 組件/index.js

export { App } from './App'; // note the brackets

但后來我得到了：

./src/components/index.js
Attempted import error: 'App' is not exported from './App'.

Answer 1

看來您對 ES6 導出/ 導入語法有些困惑。 MDN 文檔非常詳細，我建議您查看一下。

最重要的是記住默認和命名導出/導入之間的區別。 （提示：當您在導出/導入語句中看到括號時，您正在處理命名語句）

在您的具體情況下，您必須執行以下操作：

• ./components/component-a.jsx

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

export {ComponentA};

• ./components/component-b.jsx

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

export {ComponentB};

• ./components/index.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'導入內容的唯一方法是在node_modules目錄中安裝components package。

Answer 2

確保您沒有在 {componentA} 中使用導出值 componentA

remove `{}` and check