尝试导入错误：“./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